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:
#3e44fe Purple
--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:
#aa33ff Neutral
--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:
#676776 Warning
--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:
#ff9f40 Success
--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:
#33cc61 Info
--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:
#3d85f2 Error
--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:
#F23D3D Base Colors
Fundamental color values
black
#13141c white
#ffffff transparent
#00000000 Spacing
Consistent spacing scale based on a base unit. Use these tokens for margins, padding, and gaps.
--spacing-0 0px --spacing-1 8px --spacing-2 16px --spacing-3 24px --spacing-4 32px --spacing-5 40px --spacing-6 48px --spacing-8 64px --spacing-10 80px --spacing-12 96px --spacing-offset-1 0px --spacing-offset-2 0px --spacing-offset-3 0px --spacing-offset-4 0px --spacing-component-spacing 0px --spacing-column-count 4px --spacing-gutter 16px --spacing-margin 24px --spacing-top-bottom-padding 40px --spacing-2-col-offset-min-width 280px --spacing-4-col-offset-min-width 300px --spacing-1-col-offset-min-width 300px --spacing-3-col-offset-min-width 300px --spacing-min-width 340px --spacing-default-width 360px --spacing-max-width 767px Corner Radius
Border radius values for rounding corners. Applied consistently across the design system.
--corner-medium 8px --corner-full 400px --corner-large 12px --corner-small 4px Shadows
Elevation shadows create depth and hierarchy. Use sparingly - shadows are more prominent in light mode.
none
--shadow-none focus
--shadow-focus focusDanger
--shadow-focus-danger large
--shadow-large medium
--shadow-medium small
--shadow-small glow
--shadow-glow Typography
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-body Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size 16px
Line Height 1.5
Spacing 0em
The quick brown fox jumps over the lazy dog
body-1
--text-style-body-1 Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size 1rem
small 1rem
medium 1rem
large 1.25rem
xlarge 1.5rem
Line Height 1.6
Spacing normal
The quick brown fox jumps over the lazy dog
body-2
--text-style-body-2 Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size .875rem
small .875rem
medium .875rem
large 1rem
xlarge 1rem
Line Height 1.6
Spacing normal
The quick brown fox jumps over the lazy dog
body-3
--text-style-body-3 Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size .875rem
small .875rem
medium .875rem
large .875rem
xlarge .875rem
Line Height 1.6
Spacing normal
The quick brown fox jumps over the lazy dog
caption
--text-style-caption Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size .75rem
small .75rem
medium .75rem
large .75rem
xlarge .75rem
Line Height 1
Spacing normal
The quick brown fox jumps over the lazy dog
eyebrow
--text-style-eyebrow Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size .75rem
small .75rem
xlarge .875rem
large .875rem
medium .75rem
Line Height 1
Spacing normal
The quick brown fox jumps over the lazy dog
h1
--text-style-h1 Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 2.5rem
small 2.5rem
medium 3rem
large 4rem
xlarge 5rem
Line Height 1.2
Spacing normal
The quick brown fox jumps over the lazy dog
h2
--text-style-h2 Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 2rem
small 2rem
medium 2.5rem
large 3rem
xlarge 4rem
Line Height 1.2
Spacing normal
The quick brown fox jumps over the lazy dog
h3
--text-style-h3 Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 1.75rem
small 1.75rem
medium 2rem
large 2.5rem
xlarge 3rem
Line Height 1.3
Spacing normal
The quick brown fox jumps over the lazy dog
h4
--text-style-h4 Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size 1.5rem
small 1.5rem
medium 1.75rem
large 2rem
xlarge 2.5rem
Line Height 1.3
Spacing normal
The quick brown fox jumps over the lazy dog
h5
--text-style-h5 Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 1.25rem
small 1.25rem
medium 1.5rem
large 1.75rem
xlarge 2rem
Line Height 1.3
Spacing normal
The quick brown fox jumps over the lazy dog
h6
--text-style-h6 Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 1rem
small 1rem
medium 1.25rem
large 1.5rem
xlarge 1.5rem
Line Height 1.4
Spacing normal
The quick brown fox jumps over the lazy dog
h7
--text-style-h7 Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 1rem
small 1rem
medium 1rem
large 1.25rem
xlarge 1.25rem
Line Height 1.4
Spacing normal
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-base Primary font for body text and UI "AvenirNextLTPro", sans-serif
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
mono
--typography-font-family-mono "monospace", sans-serif
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
fontfamily
--typography-font-family-fontfamily "AvenirNextLTPro", sans-serif Font Sizes
--typography-font-size-x-small 0.5rem medium 0.5rem large 0.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-small 0.75rem medium 0.6875rem large 0.75rem
The quick brown fox jumps over the lazy dog
--typography-font-size-base 1.5rem Base size - body text medium 1.375rem large 1.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-large 1.5rem medium 1.25rem large 1.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-x-large 2rem medium 1.75rem large 2rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h1 2.5rem small 2.5rem medium 3rem large 4rem xlarge 5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h2 2rem small 2rem medium 2.5rem large 3rem xlarge 4rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h3 1.75rem small 1.75rem medium 2rem large 2.5rem xlarge 3rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h4 1.5rem small 1.5rem medium 1.75rem large 2rem xlarge 2.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h5 1.25rem small 1.25rem medium 1.5rem large 1.75rem xlarge 2rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h6 1rem small 1rem medium 1.25rem large 1.5rem xlarge 1.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-body 1rem Body text medium 1rem large 1rem
The quick brown fox jumps over the lazy dog
--typography-font-size-caption .75rem small .75rem medium .75rem large .75rem xlarge .75rem
The quick brown fox jumps over the lazy dog
--typography-font-size-overline 0.625rem Overline labels medium 0.625rem large 0.625rem
The quick brown fox jumps over the lazy dog
--typography-font-size-body-1 1rem small 1rem medium 1rem large 1.25rem xlarge 1.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-body-2 .875rem small .875rem medium .875rem large 1rem xlarge 1rem
The quick brown fox jumps over the lazy dog
--typography-font-size-body-3 .875rem small .875rem medium .875rem large .875rem xlarge .875rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h7 1rem small 1rem medium 1rem large 1.25rem xlarge 1.25rem
The quick brown fox jumps over the lazy dog
--typography-font-size-eyebrow .75rem small .75rem xlarge .875rem large .875rem medium .75rem
The quick brown fox jumps over the lazy dog
Font Weights
The quick brown fox
--typography-font-weight-light light (300) 300 weight - light text
The quick brown fox
--typography-font-weight-regular regular (400)
The quick brown fox
--typography-font-weight-semibold semibold (600) 600 weight - buttons, labels
The quick brown fox
--typography-font-weight-medium medium (500) 500 weight
The quick brown fox
--typography-font-weight-bold bold (700) Line Heights
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-100 100 (100%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-120 120 (120%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-130 130 (130%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-140 140 (140%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-160 160 (160%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-normal normal (150%) Normal leading - body text
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-relaxed relaxed (200%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-tight tight (100%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-body body (150%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-overline overline (120%) Letter Spacings
Aa Bb Cc
--typography-letter-spacing-normal normal (0em) Normal letter spacing Aa Bb Cc
--typography-letter-spacing-tight tight (-0.025em) Tighter - large headings Aa Bb Cc
--typography-letter-spacing-wide wide (0.05em) Wider - overlines, all-caps Borders
Composite border tokens combining width, style, and color.
--border-standard standard Standard 1px solid border --border-transparent transparent --border-error error --border-dashed dashed Opacity
Opacity levels for creating tinted variants and transparency effects.
--opacity-soft soft (15%) --opacity-muted muted (50%) Half opacity (50%) --opacity-subtle subtle (25%) Mostly transparent (25%) --opacity-strong strong (60%) Animation
Motion tokens for consistent, purposeful animations across the UI.
Duration
--duration-normal normal (200ms) Normal - button feedback, tooltips Easing
--easing-ease ease cubic-bezier(0.25, 0.1, 0.25, 1) General purpose easing Theme 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
#ffffff Dark
#13141C --theme-surface-1 1 Base canvas - the lowest layer Light
#E4E4F0 Dark
#25252E --theme-surface-2 2 Raised surface - cards, panels Light
#D8D8E8 Dark
#3C3C48 --theme-surface-3 3 Overlay surface - modals, popovers Light
#F3F3F8 Dark
#1E1F28 --theme-surface-default default Light
#F3F3F8 Dark
#181921 --theme-surface-alternative alternative Light
#C0C0D1 Dark
#3C3C48 --theme-surface-interactive-default default Light
#8B8B9E Dark
#676776 --theme-surface-interactive-hover hover Light
#F3F3F8 Dark
#3C3C48 --theme-background-subtle subtle Light
#D8D8E8 Dark
#4A4A57 --theme-background-hover hover Light
#ffffff Dark
#13141C --theme-background-site site Text Colors
Light
#13141c Dark
#ffffff --theme-text-inverse inverse Light
#3C3C48 Dark
#AAAABD --theme-text-secondary secondary Light
#4A4A57 Dark
#8B8B9E --theme-text-muted textMuted Light
#1E1F28 Dark
#F3F3F8 --theme-text-default default Border Colors
Light
#C0C0D1 Dark
#3C3C48 --theme-border border Light
#D8D8E8 Dark
#25252E --theme-border-subtle borderSubtle Feedback States
Light
#33cc61 Dark
#5eeb88 --theme-color-success success Light
#1358bf Dark
#3d85f2 --theme-color-info info Light
#f23d3d Dark
#F56262 --theme-color-error error Elevation
--theme-elevation-1 1 Subtle lift - cards Light
0px 1px 2px 0px rgba(0,0,0,0.05) Dark
0px 0px 0px 0px transparent --theme-elevation-2 2 Medium lift - dropdowns Light
0px 4px 6px 0px rgba(0,0,0,0.1) Dark
0px 0px 0px 0px transparent --theme-elevation-3 3 High lift - modals Light
0px 10px 15px 0px rgba(0,0,0,0.1) Dark
0px 10px 15px 0px rgba(0,0,0,0.1) Color
Light
#aa33ff Dark
#B752FF --theme-color-accent-default default Light
#8829CC Dark
#aa33ff --theme-color-accent-hover hover Light
#D599FF Dark
#600F99 --theme-color-accent-low-contrast lowContrast Light
#2E34E5 Dark
#5157FE --theme-color-primary-hover hover Stroke
Light
#666AFE Dark
#989CFE --theme-stroke-focus-border focusBorder Light
#AAAABD Dark
#8B8B9E --theme-stroke-high-contrast-default default Light
#8B8B9E Dark
#C0C0D1 --theme-stroke-high-contrast-hover hover Light
#1E1F28 Dark
#F3F3F8 --theme-stroke-high-contrast-active active Light
#13141c Dark
#ffffff --theme-stroke-high-contrast-inverse inverse Light
#AAAABD Dark
#8B8B9E --theme-stroke-soft-contrast-default default Light
#8B8B9E Dark
#C0C0D1 --theme-stroke-soft-contrast-hover hover Light
#8B8B9E Dark
#8B8B9E --theme-stroke-soft-contrast-active active Light
#D8D8E8 Dark
#25252E --theme-stroke-soft-contrast-divider divider Border
Light
ref
1px solid {color.neutral.600} Dark
ref
1px solid {color.neutral.200} --border-standard standard Standard 1px solid border Components
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
