Card Heading
This section is where descriptive content would normally appear. It helps demonstrate how text flows.
Colors
Color primitives organized into scales. Each scale has numbered shades from light to dark, plus semantic variants (muted, subtle) for transparency effects.
Blue
--color-blue-*25#f9f9fe
50#e5e5fe
100#bcbefe
200#989cfe
300#666afe
400#5157fe
500#3e44fe
600#2e34e5
700#1217b2
800#11145f
900#090b34
Default:
#3e44fePurple
--color-purple-*25#fdfaff
50#f7ebff
100#ebccff
200#d599ff
300#c26bff
400#b752ff
500#aa33ff
600#8829cc
700#600f99
800#400a66
900#200533
Default:
#aa33ffNeutral
--color-neutral-*25#f3f3f8
50#e4e4f0
100#d8d8e8
200#c0c0d1
300#aaaabd
400#8b8b9e
500#676776
600#4a4a57
700#3c3c48
800#25252e
900#1e1f28
950#181921
1000#13141c
Default:
#676776Warning
--color-warning-*25#fffdfa
50#fff9f2
100#ffecd9
200#ffd9b2
300#ffc68c
400#ffb266
500#ff9f40
600#d97716
700#99520b
800#592e04
900#331900
Default:
#ff9f40Success
--color-success-*25#fafffb
50#f2fff6
100#d4fae0
200#abf5c1
300#84f0a4
400#5eeb88
500#33cc61
600#13bf47
700#008c2a
800#00591b
900#00330f
Default:
#33cc61Info
--color-info-*25#fafcff
50#f2f7ff
100#d7e6fd
200#afcdfa
300#88b4f7
400#629cf5
500#3d85f2
600#1358bf
700#0a3e8c
800#042659
900#001433
Default:
#3d85f2Error
--color-error-*25#fffafa
50#fff2f2
100#fdd7d7
200#faafaf
300#f78888
400#f56262
500#f23d3d
600#bf1313
700#8c0a0a
800#590404
900#330000
Default:
#f23d3dBase Colors
Fundamental color values
black
#13141cwhite
#fffffftransparent
#00000000imageOverlay
#00000099Spacing
Consistent spacing scale based on a base unit. Use these tokens for margins, padding, and gaps.
--spacing-00px--spacing-18px--spacing-216px--spacing-324px--spacing-432px16px - standard padding (4 x 4px base)
--spacing-540px--spacing-648px--spacing-864px--spacing-1080px--spacing-1296px--spacing-offset-10px--spacing-offset-20px--spacing-offset-30px--spacing-offset-40px--spacing-component-spacing0px--spacing-internal-padding32pxInternal padding between content elements within a component
--spacing-column-count4px--spacing-gutter16px--spacing-margin24px--spacing-2-col-offset-min-width280px--spacing-3-col-offset-min-width300px--spacing-min-width340px--spacing-default-width360px--spacing-max-width767px--spacing-horizontal-padding16px--spacing-block-vertical-padding2.5rem--spacing-block-transition2.5remVertical gap inserted between two adjacent blocks only when their width class changes (full ↔ immersive ↔ bleed). Same width class gets no gap.
--spacing-block-vertical-padding-card1rem--spacing-block-internal-s0.5rem--spacing-block-internal-l1.5rem--spacing-block-internal-m1remCorner Radius
Border radius values for rounding corners. Applied consistently across the design system.
--corner-medium8px--corner-full400px--corner-large12px--corner-small4pxShadows
Elevation shadows create depth and hierarchy. Use sparingly - shadows are more prominent in light mode.
none
--shadow-nonefocus
--shadow-focusfocusRing
--shadow-focus-ringVisible focus indicator for interactive elements (form fields, buttons, links). Use this on `:focus-visible` to meet WCAG 2.2 visible-focus requirements. `shadow.focus` is a softer drop-shadow used in non-keyboard contexts; this token is the keyboard-a11y ring.focusDanger
--shadow-focus-dangerlarge
--shadow-largemedium
--shadow-mediumsmall
--shadow-smallglow
--shadow-glowglowSecondary
--shadow-glow-secondarypressed
--shadow-pressedTypography
Type system including font families, sizes, weights, and line heights.
Text Styles
Composite typography tokens combining font properties into ready-to-use styles.
body
--text-style-bodyFontAvenirNextLTPro,sans-serif
Weight400
Base Size1rem
Line Height1.6
Spacingnormal
The quick brown fox jumps over the lazy dog
body-1
--text-style-body-1FontAvenirNextLTPro,sans-serif
Weight400
Base Size1rem
Line Height1.6
Spacingnormal
The quick brown fox jumps over the lazy dog
body-2
--text-style-body-2FontAvenirNextLTPro,sans-serif
Weight400
Base Size0.875rem
Line Height1.6
Spacingnormal
The quick brown fox jumps over the lazy dog
body-3
--text-style-body-3FontAvenirNextLTPro,sans-serif
Weight400
Base Size0.875rem
Line Height1.6
Spacingnormal
The quick brown fox jumps over the lazy dog
caption
--text-style-captionFontAvenirNextLTPro,sans-serif
Weight600
Base Size0.75rem
Line Height1
Spacingnormal
The quick brown fox jumps over the lazy dog
eyebrow
--text-style-eyebrowFontAvenirNextLTPro,sans-serif
Weight600
Base Size0.75rem
Line Height1
Spacingnormal
The quick brown fox jumps over the lazy dog
h1
--text-style-h1FontAvenirNextLTPro,sans-serif
Weight600
Base Size2.5rem
Line Height1.2
Spacingnormal
The quick brown fox jumps over the lazy dog
h2
--text-style-h2FontAvenirNextLTPro,sans-serif
Weight600
Base Size2rem
Line Height1.2
Spacingnormal
The quick brown fox jumps over the lazy dog
h3
--text-style-h3FontAvenirNextLTPro,sans-serif
Weight600
Base Size1.75rem
Line Height1.3
Spacingnormal
The quick brown fox jumps over the lazy dog
h4
--text-style-h4FontAvenirNextLTPro,sans-serif
Weight400
Base Size1.5rem
Line Height1.3
Spacingnormal
The quick brown fox jumps over the lazy dog
h5
--text-style-h5FontAvenirNextLTPro,sans-serif
Weight600
Base Size1.25rem
Line Height1.3
Spacingnormal
The quick brown fox jumps over the lazy dog
h6
--text-style-h6FontAvenirNextLTPro,sans-serif
Weight600
Base Size1rem
Line Height1.4
Spacingnormal
The quick brown fox jumps over the lazy dog
h7
--text-style-h7FontAvenirNextLTPro,sans-serif
Weight600
Base Size1rem
Line Height1.4
Spacingnormal
The quick brown fox jumps over the lazy dog
Type Hierarchy
Display (h1)
Design Tokens
Heading (h3)
Section heading for content areas
Body (body-1)
Body text forms the foundation of any interface. It needs to be readable at various screen sizes, from compact mobile layouts to expansive desktop monitors. Good body typography balances line length, line height, and font size to maintain comfortable reading across all breakpoints. This paragraph demonstrates how body text reflows and scales as the viewport changes — notice how the text remains legible and well-spaced regardless of screen width.
Caption (caption)
Small text for captions, labels, and supporting information
Font Families
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
base
--typography-font-family-basePrimary font for body text and UIAvenirNextLTPro,sans-serifThe quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
mono
--typography-font-family-monomonospace,sans-serifFont Sizes
--typography-font-size-h12.5remThe quick brown fox jumps over the lazy dog
--typography-font-size-h22remThe quick brown fox jumps over the lazy dog
--typography-font-size-h31.75remThe quick brown fox jumps over the lazy dog
--typography-font-size-h41.5remThe quick brown fox jumps over the lazy dog
--typography-font-size-h51.25remThe quick brown fox jumps over the lazy dog
--typography-font-size-h61remThe quick brown fox jumps over the lazy dog
--typography-font-size-body1remBody textThe quick brown fox jumps over the lazy dog
--typography-font-size-caption0.75remThe quick brown fox jumps over the lazy dog
--typography-font-size-body-11remThe quick brown fox jumps over the lazy dog
--typography-font-size-body-20.875remThe quick brown fox jumps over the lazy dog
--typography-font-size-body-30.875remThe quick brown fox jumps over the lazy dog
--typography-font-size-h71remThe quick brown fox jumps over the lazy dog
--typography-font-size-eyebrow0.75remThe quick brown fox jumps over the lazy dog
Font Weights
The quick brown fox
--typography-font-weight-lightlight (300)300 weight - light textThe quick brown fox
--typography-font-weight-regularregular (400)The quick brown fox
--typography-font-weight-semiboldsemibold (600)600 weight - buttons, labelsThe quick brown fox
--typography-font-weight-mediummedium (500)500 weightThe quick brown fox
--typography-font-weight-boldbold (700)Line Heights
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-100100 (100%)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-120120 (120%)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-130130 (130%)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-140140 (140%)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-160160 (160%)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-relaxedrelaxed (200%)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-tighttight (100%)Letter Spacings
Aa Bb Cc
--typography-letter-spacing-normalnormal (0em)Normal letter spacingAa Bb Cc
--typography-letter-spacing-tighttight (-0.025em)Tighter - large headingsAa Bb Cc
--typography-letter-spacing-widewide (0.05em)Wider - overlines, all-capsBorders
Composite border tokens combining width, style, and color.
--border-standardstandardStandard 1px solid border--border-inputinput1px solid high-contrast border for form-field inputs--border-transparenttransparent--border-errorerror--border-dasheddashedOpacity
Opacity levels for creating tinted variants and transparency effects.
--opacity-softsoft (15%)--opacity-mutedmuted (50%)Half opacity (50%)--opacity-subtlesubtle (25%)Mostly transparent (25%)--opacity-strongstrong (60%)Animation
Motion tokens for consistent, purposeful animations across the UI.
Duration
--duration-normalnormal (200ms)Normal - button feedback, tooltipsEasing
Hover to preview
--easing-easeeasecubic-bezier(0.25, 0.1, 0.25, 1)General purpose easingTheme Tokens
Semantic tokens that adapt to light/dark mode. These reference primitive tokens but switch values based on the active theme.
Surfaces
Layered backgrounds for creating depth
Light
#ffffffDark
#13141c--theme-surface-11Base canvas - the lowest layerLight
#e4e4f0Dark
#25252e--theme-surface-22Raised surface - cards, panelsLight
#d8d8e8Dark
#3c3c48--theme-surface-33Overlay surface - modals, popoversLight
#f3f3f8Dark
#1e1f28--theme-surface-defaultdefaultLight
#f3f3f8Dark
#181921--theme-surface-alternativealternativeLight
#c0c0d1Dark
#3c3c48--theme-surface-interactive-defaultdefaultLight
#8b8b9eDark
#676776--theme-surface-interactive-hoverhoverLight
#f3f3f8Dark
#3c3c48--theme-background-subtlesubtleLight
#d8d8e8Dark
#4a4a57--theme-background-hoverhoverLight
#ffffffDark
#13141c--theme-background-sitesiteBase page background color applied to <body> via layout.css. Do not remove without updating layout.css.Text Colors
Light
#13141cDark
#ffffff--theme-text-inverseinverseLight
#3c3c48Dark
#aaaabd--theme-text-secondarysecondaryLight
#4a4a57Dark
#8b8b9e--theme-text-mutedtextMutedBorder Colors
Light
#c0c0d1Dark
#3c3c48--theme-borderborderLight
#d8d8e8Dark
#25252e--theme-border-subtleborderSubtleFeedback States
Light
#33cc61Dark
#5eeb88--theme-color-successsuccessLight
#1358bfDark
#3d85f2--theme-color-infoinfoLight
#f23d3dDark
#f56262--theme-color-errorerrorElevation
--theme-elevation-11Subtle lift - cardsLight
0px 1px 2px 0px [object Object]Dark
0px 0px 0px 0px [object Object]--theme-elevation-22Medium lift - dropdownsLight
0px 4px 6px 0px [object Object]Dark
0px 0px 0px 0px [object Object]--theme-elevation-33High lift - modalsLight
0px 10px 15px 0px [object Object]Dark
0px 10px 15px 0px [object Object]Color
Light
#aa33ffDark
#b752ff--theme-color-accent-defaultdefaultLight
#8829ccDark
#aa33ff--theme-color-accent-hoverhoverLight
#d599ffDark
#600f99--theme-color-accent-low-contrastlowContrastLight
#2e34e5Dark
#5157fe--theme-color-primary-hoverhoverStroke
Light
#666afeDark
#989cfe--theme-stroke-focus-borderfocusBorderLight
#aaaabdDark
#8b8b9e--theme-stroke-high-contrast-defaultdefaultLight
#8b8b9eDark
#c0c0d1--theme-stroke-high-contrast-hoverhoverLight
#1e1f28Dark
#f3f3f8--theme-stroke-high-contrast-activeactiveLight
#13141cDark
#ffffff--theme-stroke-high-contrast-inverseinverseLight
#c0c0d1Dark
#3c3c48--theme-stroke-soft-contrast-defaultdefaultLight
#8b8b9eDark
#676776--theme-stroke-soft-contrast-hoverhoverLight
#676776Dark
#8b8b9e--theme-stroke-soft-contrast-activeactiveLight
#d8d8e8Dark
#25252e--theme-stroke-soft-contrast-dividerdividerBorder
Light
ref
1px solid {color.neutral.600}Dark
ref
1px solid {color.neutral.200}--border-standardstandardStandard 1px solid borderLight
ref
1px solid {color.neutral.300}Dark
ref
1px solid {color.neutral.400}--border-inputinput1px solid high-contrast border for form-field inputsComponents
Button
Primary action trigger
Primary
Primary Disabled
Secondary
IconButton
Icon-only button
Primary
Secondary Outlined
Secondary Filled
PlayButton
Media play button
Default
Small
Large
DropdownMenu
Action menu
Default
Open
FileMenu
ContextMenu
Right-click menu
Default
Small
Large
Pagination
Page navigation
Default
First Page
Last Page
Layout Grid
Token-driven page layout. Press Ctrl+G to toggle the debug overlay.
Use PageLayout as your starting template — it shares this grid system with debug off by default. Import grid-debug.css and callinitGridDebug(container) to enable Ctrl+G toggling.
Main Content
Two-thirds width on desktop, full width on mobile
Two-thirds — col-two-thirds
One-third — col-third
Centered — col-half col-center
Left-aligned — col-third
Right-aligned — col-third col-end
Full-bleed section — content extends to viewport edges