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
#13141cblack-muted
#13141c80Black at 50% - translucent chrome intended to sit over a backdrop blurwhite
#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-hero7.5remVertical padding of a hero block, top and bottom. Deliberately its own token rather than the generic block padding: the fixed header bar sits INSIDE the hero's top padding, so this number is the bar height plus the clear space wanted beneath it. At 120 with a 72 bar that is 48 clear, the same at every breakpoint.
--spacing-block-vertical-padding-card1rem--spacing-block-internal-s0.5rem--spacing-block-internal-l1.5rem--spacing-block-internal-m1rem--spacing-card-vertical-padding1rem--spacing-card-horizontal-padding1rem--spacing-card-margin1rem--spacing-carousel-card-gap-s1rem--spacing-carousel-card-gap-l1rem--spacing-carousel-logo-card-width10remPartner logo carousel tile width — fixed per breakpoint; the aspect-ratio derives height.
--spacing-carousel-logo-card-gap1.5remGap between partner logo tiles, marquee and grid alike.
Corner 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 (buttons, links, form fields). Use this on `:focus-visible` to meet WCAG 2.2 visible-focus requirements. Two theme-aware layers: a 3px gap ring in the surface/background colour, then a 5px violet ring in the focus-border colour — resolving on dark surfaces to #13141C (gap) + #989CFE (ring). `shadow.focus` is the softer drop-shadow used in non-keyboard contexts; this token is the keyboard-a11y ring shared by Primary/Secondary/Play buttons.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
Spacing-0.0025em
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
Weight700
Base Size0.75rem
Line Height1
Spacing0.005em
The quick brown fox jumps over the lazy dog
eyebrow
--text-style-eyebrowFontAvenirNextLTPro,sans-serif
Weight700
Base Size0.75rem
Line Height1
Spacing0.0025em
The quick brown fox jumps over the lazy dog
h1
--text-style-h1FontAvenirNextLTPro,sans-serif
Weight700
Base Size2.5rem
Line Height1.2
Spacing-0.02em
The quick brown fox jumps over the lazy dog
h2
--text-style-h2FontAvenirNextLTPro,sans-serif
Weight700
Base Size2rem
Line Height1.2
Spacing-0.03em
The quick brown fox jumps over the lazy dog
h3
--text-style-h3FontAvenirNextLTPro,sans-serif
Weight700
Base Size1.75rem
Line Height1.3
Spacing-0.0125em
The quick brown fox jumps over the lazy dog
h4
--text-style-h4FontAvenirNextLTPro,sans-serif
Weight400
Base Size1.5rem
Line Height1.3
Spacing-0.0075em
The quick brown fox jumps over the lazy dog
h5
--text-style-h5FontAvenirNextLTPro,sans-serif
Weight700
Base Size1.25rem
Line Height1.3
Spacing-0.005em
The quick brown fox jumps over the lazy dog
h6
--text-style-h6FontAvenirNextLTPro,sans-serif
Weight700
Base Size1rem
Line Height1.4
Spacing0.015em
The quick brown fox jumps over the lazy dog
h7
--text-style-h7FontAvenirNextLTPro,sans-serif
Weight700
Base Size1rem
Line Height1.4
Spacing0.015em
The quick brown fox jumps over the lazy dog
button
--text-style-buttonFontAvenirNextLTPro,sans-serif
Weight700
Base Size0.875rem
Line Height1
Spacing0.005em
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
--typography-font-size-button0.875remButton label. 14 / 14 / 16 / 16 across sm/md/lg/xl.The 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 (700)700 weight - the Demi face. Numbered to match the loaded font, not the CSS keyword: AvenirNextLTPro ships Demi at 700 and Bold at 800, so the keyword's 600 had no face behind it and fell up to Demi anyway.The quick brown fox
--typography-font-weight-mediummedium (500)500 weightThe quick brown fox
--typography-font-weight-boldbold (800)800 weight - the Bold face, which the loaded font ships at 800.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%)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-buttonbutton (100%)Button label. Always 100%.Letter Spacings
Aa Bb Cc
--typography-letter-spacing-h1h1 (-0.02em)Drawn as -1.6px on the 80px H1. Held in em so it stays proportional as the heading halves toward small.Aa Bb Cc
--typography-letter-spacing-h2h2 (-0.03em)Drawn as -1.92px on the 64px H2.Aa Bb Cc
--typography-letter-spacing-h3h3 (-0.0125em)Drawn as -0.6px on the 48px H3.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-capsAa Bb Cc
--typography-letter-spacing-h4h4 (-0.0075em)Drawn as -0.3px on the 40px H4.Aa Bb Cc
--typography-letter-spacing-h5h5 (-0.005em)Drawn as -0.16px on the 32px H5.Aa Bb Cc
--typography-letter-spacing-h6h6 (0.015em)Drawn as 0.36px on the 24px H6. Positive — tracking turns open here, and H7 carries the same ratio.Aa Bb Cc
--typography-letter-spacing-h7h7 (0.015em)Drawn as 0.3px on the 20px H7. Positive — the ramp opens up once the heading is near body size.Aa Bb Cc
--typography-letter-spacing-bodybody (-0.0025em)Drawn as -0.06px on the 24px body. Applied to <body>, so any text that declares no tracking of its own inherits it.Aa Bb Cc
--typography-letter-spacing-eyebroweyebrow (0.0025em)Drawn as 0.035px on the 14px eyebrow. Positive — the same magnitude as body, opening rather than tightening.Aa Bb Cc
--typography-letter-spacing-captioncaption (0.005em)Drawn as 0.06px on the 12px caption.Aa Bb Cc
--typography-letter-spacing-buttonbutton (0.005em)Drawn as 0.08px on the 16px button. Same em as the caption; kept separate so tuning one never moves the other.Borders
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
#f3f3f8Dark
#1e1f28--theme-surface-22Raised surface - cards, panelsLight
#d8d8e8Dark
#3c3c48--theme-surface-33Overlay surface - modals, popoversLight
#f3f3f8Dark
#1e1f28--theme-surface-defaultdefaultLight
#f3f3f8Dark
#181921--theme-surface-alternativealternativeLight
#13141c80Dark
#13141c80--theme-surface-navnavSite header chrome at rest - translucent, pairs with an 8px backdrop blur. Constant across modes: the header is always dark glass.Light
#13141cDark
#13141c--theme-surface-nav-opennav-openSite header chrome once a menu is open - opaque, no blur. Constant across modes.Light
#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-primaryprimaryFull-contrast text color applied to headings via layout.css. Black on light, white on dark.Light
#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