Skip to content
PanelUI KitCompany design system
0.3.0-alpha.3
Documentation / Foundations

Foundations

Give the same components your product’s identity through supported tokens.

1. Semantic

Product roles such as primary color, surface, text and typography.

2. Family

Shared rules for controls, focus, choices and surfaces.

3. Component

Part-specific geometry and presentation. Change one component when a family rule should stay shared.

Use a profile

Start with a maintained theme, then load a schema 1 JSON profile from any component page. Override only what your product needs. Export the profile and keep its exact library version with your editable source.

The values below are CSS declarations for Neutral, based on neutral, using library 0.3.0-alpha.3. References such as var(--panel-primary) resolve inside the rendered theme. This table does not claim computed colors, contrast or font availability.

172 of 172 supported tokens

Public token names and current profile declarations
TokenLayerValue
--panel-backgroundsemantic#ffffff
--panel-foregroundsemantic#20252b
--panel-surfacesemantic#ffffff
--panel-surface-foregroundsemantic#20252b
--panel-popoversemantic#ffffff
--panel-popover-foregroundsemantic#20252b
--panel-mutedsemantic#59636f
--panel-subtlesemantic#f3f5f7
--panel-primarysemantic#303b49
--panel-on-primarysemantic#ffffff
--panel-primary-hoversemantic#1c2531
--panel-secondarysemantic#f3f5f7
--panel-on-secondarysemantic#20252b
--panel-destructivesemantic#a92626
--panel-on-destructivesemantic#ffffff
--panel-accentsemantic#f3f5f7
--panel-accent-foregroundsemantic#20252b
--panel-bordersemantic#aab3bd
--panel-focussemantic#365f99
--panel-font-familysemanticArial, system-ui, sans-serif
--panel-font-sizesemantic16px
--panel-line-heightsemantic1.5
--panel-border-widthsemantic1px
--panel-overlaysemantic#0f172a66
--panel-space-1semantic4px
--panel-space-2semantic8px
--panel-space-4semantic16px
--panel-space-6semantic24px
--panel-type-smsemantic14px
--panel-weight-regularsemantic400
--panel-weight-mediumsemantic500
--panel-weight-semiboldsemantic600
--panel-icon-sizesemantic16px
--panel-control-radiusfamily8px
--panel-control-shadowfamilynone
--panel-focus-widthfamily2px
--panel-focus-offsetfamily3px
--panel-input-borderfamilyvar(--panel-border)
--panel-control-font-familyfamilyvar(--panel-font-family)
--panel-control-font-sizefamilyvar(--panel-font-size)
--panel-control-border-widthfamilyvar(--panel-border-width)
--panel-control-border-colorfamilyvar(--panel-input-border)
--panel-surface-border-widthfamilyvar(--panel-border-width)
--panel-surface-border-colorfamilyvar(--panel-border)
--panel-surface-backgroundfamilyvar(--panel-surface)
--panel-surface-colorfamilyvar(--panel-surface-foreground)
--panel-choice-backgroundfamilyvar(--panel-surface-background)
--panel-choice-border-colorfamilyvar(--panel-control-border-color)
--panel-choice-selected-backgroundfamilyvar(--panel-primary)
--panel-choice-selected-foregroundfamilyvar(--panel-on-primary)
--panel-input-invalid-bordercomponent#a92626
--panel-button-heightcomponent44px
--panel-button-border-widthcomponent1px
--panel-button-padding-xcomponent16px
--panel-button-padding-ycomponent8px
--panel-button-font-sizecomponentvar(--panel-control-font-size)
--panel-button-weightcomponent600
--panel-button-line-heightcomponent1.35
--panel-button-shadowcomponentnone
--panel-button-lg-heightcomponent48px
--panel-button-lg-padding-xcomponent32px
--panel-button-lg-padding-ycomponent12px
--panel-link-colorcomponentvar(--panel-primary)
--panel-link-font-sizecomponent14px
--panel-input-heightcomponent44px
--panel-input-padding-xcomponent16px
--panel-input-padding-ycomponent10px
--panel-input-line-heightcomponent1.4
--panel-input-backgroundcomponentvar(--panel-surface)
--panel-label-weightcomponent600
--panel-select-heightcomponent44px
--panel-select-font-sizecomponent16px
--panel-select-padding-xcomponent16px
--panel-select-padding-ycomponent10px
--panel-select-backgroundcomponentvar(--panel-surface)
--panel-select-shadowcomponent0 12px 32px #14283c26
--panel-select-item-paddingcomponent9px 12px
--panel-select-item-radiuscomponent4px
--panel-card-radiuscomponent12px
--panel-card-shadowcomponent0 2px 6px #14283c0a
--panel-card-header-paddingcomponent24px
--panel-card-header-gapcomponent8px
--panel-card-title-sizecomponent20px
--panel-card-title-line-heightcomponent1.3
--panel-card-content-paddingcomponent0 24px 24px
--panel-card-description-sizecomponent16px
--panel-dialog-widthcomponent672px
--panel-dialog-paddingcomponent24px
--panel-dialog-gapcomponent16px
--panel-dialog-radiuscomponent12px
--panel-dialog-mobile-radiuscomponent12px
--panel-dialog-mobile-paddingcomponent20px 16px
--panel-dialog-shadowcomponent0 12px 32px #14283c26
--panel-dialog-title-sizecomponent20px
--panel-accordion-radiuscomponent8px
--panel-accordion-item-bordercomponentvar(--panel-border-width) solid var(--panel-border)
--panel-accordion-item-outlinecomponentvar(--panel-border-width) solid var(--panel-border)
--panel-accordion-font-sizecomponent16px
--panel-accordion-weightcomponent600
--panel-accordion-line-heightcomponent1.5
--panel-accordion-trigger-paddingcomponent16px
--panel-accordion-trigger-min-heightcomponent56px
--panel-accordion-open-backgroundcomponentvar(--panel-subtle)
--panel-accordion-content-paddingcomponent16px
--panel-accordion-content-sizecomponent16px
--panel-accordion-content-line-heightcomponent1.6
--panel-link-hover-decorationcomponentunderline
--panel-accordion-hover-decorationcomponentunderline
--panel-label-font-sizecomponentvar(--panel-type-sm)
--panel-textarea-min-heightcomponent96px
--panel-textarea-paddingcomponent12px 16px
--panel-skeleton-radiuscomponentvar(--panel-control-radius)
--panel-skeleton-backgroundcomponentcolor-mix(in srgb, var(--panel-primary) 10%, transparent)
--panel-skeleton-durationcomponent2s
--panel-loading-button-icon-sizecomponentvar(--panel-icon-size)
--panel-loading-button-durationcomponent1s
--panel-popover-widthcomponent288px
--panel-popover-paddingcomponentvar(--panel-space-4)
--panel-popover-radiuscomponentvar(--panel-control-radius)
--panel-popover-shadowcomponentvar(--panel-select-shadow)
--panel-tooltip-max-widthcomponent288px
--panel-tooltip-paddingcomponent6px 12px
--panel-tooltip-radiuscomponentvar(--panel-control-radius)
--panel-tooltip-font-sizecomponent12px
--panel-tooltip-backgroundcomponentvar(--panel-primary)
--panel-tooltip-foregroundcomponentvar(--panel-on-primary)
--panel-slider-hit-sizecomponent32px
--panel-slider-vertical-heightcomponent160px
--panel-slider-track-sizecomponent6px
--panel-slider-track-backgroundcomponentcolor-mix(in srgb, var(--panel-primary) 20%, transparent)
--panel-slider-range-backgroundcomponentvar(--panel-primary)
--panel-slider-thumb-sizecomponent16px
--panel-slider-thumb-bordercomponentcolor-mix(in srgb, var(--panel-primary) 50%, transparent)
--panel-sheet-widthcomponent75vw
--panel-sheet-max-widthcomponent384px
--panel-sheet-paddingcomponentvar(--panel-space-6)
--panel-sheet-gapcomponentvar(--panel-space-4)
--panel-sheet-shadowcomponentvar(--panel-dialog-shadow)
--panel-sheet-enter-durationcomponent500ms
--panel-sheet-exit-durationcomponent300ms
--panel-table-font-sizecomponentvar(--panel-type-sm)
--panel-table-head-heightcomponent40px
--panel-table-cell-paddingcomponent8px
--panel-table-hover-backgroundcomponentcolor-mix(in srgb, var(--panel-subtle) 50%, transparent)
--panel-table-selected-backgroundcomponentvar(--panel-subtle)
--panel-checkbox-sizecomponent20px
--panel-checkbox-radiuscomponent4px
--panel-checkbox-icon-sizecomponent14px
--panel-switch-widthcomponent40px
--panel-switch-heightcomponent24px
--panel-switch-thumb-sizecomponent20px
--panel-switch-insetcomponent2px
--panel-switch-backgroundcomponentvar(--panel-border)
--panel-switch-checked-backgroundcomponentvar(--panel-choice-selected-background)
--panel-switch-thumb-backgroundcomponentvar(--panel-surface-background)
--panel-radio-sizecomponent20px
--panel-radio-indicator-sizecomponent10px
--panel-radio-group-gapcomponent12px
--panel-tabs-gapcomponent4px
--panel-tabs-list-paddingcomponent4px
--panel-tabs-radiuscomponentvar(--panel-control-radius)
--panel-tabs-trigger-paddingcomponent8px 12px
--panel-tabs-trigger-radiuscomponentcalc(var(--panel-control-radius) - 2px)
--panel-tabs-font-sizecomponentvar(--panel-type-sm)
--panel-badge-paddingcomponent2px 8px
--panel-badge-radiuscomponent999px
--panel-badge-font-sizecomponent12px
--panel-badge-backgroundcomponentvar(--panel-accent)
--panel-badge-foregroundcomponentvar(--panel-accent-foreground)
--panel-separator-colorcomponentvar(--panel-border)
--panel-separator-sizecomponent1px
--panel-separator-heightcomponent24px
Panel UI KitShared components. Product identity.