Font Size Tokens
Typography scale for consistent text sizing throughout the application.
Variable Value Purpose --font-size-500.625rem (10px) Smallest text size for fine print or legal text --font-size-750.75rem (12px) Small text, captions, or helper text --font-size-1000.875rem (14px) Body text (small), labels, default size --font-size-2001rem (16px) Default body text size --font-size-3001.125rem (18px) Large body text, small headings --font-size-4001.25rem (20px) Subheadings --font-size-5001.375rem (22px) Medium headings (H3) --font-size-6001.875rem (30px) Large headings (H2) --font-size-7002.5rem (40px) Extra large headings (H1) --font-size-8003.375rem (54px) Display text (large) --font-size-9004.5rem (72px) Display text (extra large) --font-size-10006rem (96px) Hero text, largest display size
Font Weight Tokens
Font weight scale for typography hierarchy.
Variable Value Purpose --font-weight-light300 Light text weight for decorative or large text --font-weight-regular400 Regular text weight for body copy --font-weight-medium500 Medium text weight for labels and emphasis --font-weight-bold700 Bold text weight for headings and strong emphasis
Spacing Tokens
Consistent spacing scale for margins, padding, and gaps.
Variable Value Purpose --space-000rem (0px) No spacing --space-500.125rem (2px) Minimum spacing, subtle separations --space-750.25rem (4px) Extra small spacing --space-900.375rem (6px) Small spacing variant --space-1000.5rem (8px) Small spacing (base unit) --space-2000.75rem (12px) Small-medium spacing --space-2500.875rem (14px) Medium spacing variant --space-3001rem (16px) Medium spacing (1 unit) --space-3501.25rem (20px) Medium-large spacing --space-4001.5rem (24px) Large spacing --space-5002rem (32px) Extra large spacing --space-5502.25rem (36px) Extra large spacing variant --space-6002.5rem (40px) Double extra large spacing --space-7003rem (48px) Section spacing (small) --space-8004rem (64px) Section spacing (medium) --space-9005rem (80px) Section spacing (large) --space-10006rem (96px) Section spacing (extra large)
Corner Radius Tokens
Border radius values for consistent rounded corners.
Variable Value Purpose --corner-radius-000rem (0px) No rounding (square corners) --corner-radius-500.03125rem (0.5px) Minimal rounding --corner-radius-750.25rem (4px) Small rounding for buttons, inputs --corner-radius-1000.375rem (6px) Medium rounding --corner-radius-2000.5rem (8px) Standard rounding for cards, containers --corner-radius-3000.625rem (10px) Large rounding --corner-radius-4000.75rem (12px) Extra large rounding --corner-radius-5001rem (16px) Maximum standard rounding --corner-radius-9999100vh Pill shape (fully rounded)
Line Height Tokens
Line height values for optimal text readability.
Variable Value Purpose --line-height-1001.2 Tight line height for headings --line-height-2001.3 Compact line height for UI text --line-height-3001.5 Default line height for body text --line-height-4001.7 Loose line height for enhanced readability
Border Width Tokens
Border width scale for consistent stroke weights.
Variable Value Purpose --border-width-1001px Thin border (default) --border-width-2002px Medium border --border-width-3003px Thick border (focus states) --border-width-4004px Extra thick border
Opacity Tokens
Opacity scale for transparency effects.
Variable Value Purpose --opacity-000 Fully transparent --opacity-100.1 10% opacity --opacity-200.2 20% opacity --opacity-300.3 30% opacity --opacity-400.4 40% opacity --opacity-500.5 50% opacity (half transparent) --opacity-600.6 60% opacity (disabled state) --opacity-700.7 70% opacity --opacity-800.8 80% opacity --opacity-900.9 90% opacity --opacity-1001 Fully opaque
Tint Tokens
White overlay colors with varying opacity levels for creating lighter variants.
Variable Color Purpose --tint-100rgba(255, 255, 255, 0.9) Lightest tint (90% white) --tint-200rgba(255, 255, 255, 0.8) Very light tint (80% white) --tint-300rgba(255, 255, 255, 0.7) Light tint (70% white) --tint-400rgba(255, 255, 255, 0.6) Medium-light tint (60% white) --tint-500rgba(255, 255, 255, 0.5) Medium tint (50% white) --tint-600rgba(255, 255, 255, 0.4) Medium-dark tint (40% white) --tint-700rgba(255, 255, 255, 0.3) Dark tint (30% white) --tint-800rgba(255, 255, 255, 0.2) Very dark tint (20% white) --tint-900rgba(255, 255, 255, 0.1) Darkest tint (10% white) --tint-1000rgba(255, 255, 255, 0) Transparent
Shade Tokens
Black overlay colors with varying opacity levels for creating darker variants.
Variable Color Purpose --shade-100rgba(0, 0, 0, 0.9) Darkest shade (90% black) --shade-200rgba(0, 0, 0, 0.8) Very dark shade (80% black) - used for modal backgrounds --shade-300rgba(0, 0, 0, 0.7) Dark shade (70% black) --shade-400rgba(0, 0, 0, 0.6) Medium-dark shade (60% black) --shade-500rgba(0, 0, 0, 0.5) Medium shade (50% black) --shade-600rgba(0, 0, 0, 0.4) Medium-light shade (40% black) --shade-700rgba(0, 0, 0, 0.3) Light shade (30% black) --shade-800rgba(0, 0, 0, 0.2) Very light shade (20% black) --shade-900rgba(0, 0, 0, 0.1) Lightest shade (10% black) --shade-1000rgba(0, 0, 0, 0) Transparent
Color Ramp Tokens
Full color palette with granular shades. Each color family has values from 000 (lightest) to 999 (darkest).
Neutral (Gray) Colors
Variable Hex Value Purpose --sst-color-neutral-000#ffffff Pure white --sst-color-neutral-025#f7f7f7 Near white --sst-color-neutral-050#f5f5f5 Background, very light gray --sst-color-neutral-075#e9e9e9 Light border color --sst-color-neutral-100#e3e3e3 Border color --sst-color-neutral-150#d4d4d4 Subtle border --sst-color-neutral-200#c6c6c6 Light gray --sst-color-neutral-250#b9b9b9 Gray variant --sst-color-neutral-300#ababab Medium-light gray --sst-color-neutral-350#9d9d9d Gray variant --sst-color-neutral-400#909090 Medium gray --sst-color-neutral-450#848484 Gray variant --sst-color-neutral-500#777777 Mid-tone gray, muted text --sst-color-neutral-550#6a6a6a Dark-medium gray --sst-color-neutral-600#5e5e5e Secondary text color --sst-color-neutral-650#525252 Gray variant --sst-color-neutral-700#474747 Dark gray --sst-color-neutral-750#3b3b3b Very dark gray --sst-color-neutral-800#303030 Near black gray --sst-color-neutral-850#262626 Gray variant --sst-color-neutral-900#1c1c1c Almost black --sst-color-neutral-950#111111 Near pure black, primary text --sst-color-neutral-999#000000 Pure black
Neutral Warm (Gray Warm) Colors
Variable Hex Value Purpose --sst-color-neutral-warm-000#ffffff Pure white --sst-color-neutral-warm-025#f9f7f6 Warm near white --sst-color-neutral-warm-050#f6f4f2 Warm background --sst-color-neutral-warm-075#ece9e5 Warm light gray --sst-color-neutral-warm-100#e6e2dd Warm border --sst-color-neutral-warm-150 to --sst-color-neutral-warm-999Various warm grays Warm-toned neutral scale
Orange Colors (Brand Primary)
Variable Hex Value Purpose --sst-color-orange-000#ffffff Pure white --sst-color-orange-025#fff5f2 Lightest orange tint --sst-color-orange-050#ffece5 Very light orange --sst-color-orange-075#ffe2d8 Light orange background --sst-color-orange-100#ffd9cb Light orange --sst-color-orange-150 to --sst-color-orange-350Various Orange scale variants --sst-color-orange-400#ff5308 Brand orange (primary) --sst-color-orange-450#ec4c07 Brand orange hover --sst-color-orange-500#d64405 Brand orange active --sst-color-orange-550 to --sst-color-orange-999Various Darker orange variants
Yellow Colors
Variable Hex Value Purpose --sst-color-yellow-000#ffffff Pure white --sst-color-yellow-025#fff8e3 Lightest yellow --sst-color-yellow-050 to --sst-color-yellow-100Various Light yellows --sst-color-yellow-150#ffd040 Warning yellow background --sst-color-yellow-200 to --sst-color-yellow-700Various Yellow scale --sst-color-yellow-750#493a0b Warning yellow foreground --sst-color-yellow-800 to --sst-color-yellow-999Various Dark yellow/gold variants
Blue Colors
Variable Hex Value Purpose --sst-color-blue-000#ffffff Pure white --sst-color-blue-025#f4f8ff Lightest blue --sst-color-blue-050 to --sst-color-blue-450Various Light to medium blues --sst-color-blue-500#206eec Info/link blue, focus color --sst-color-blue-550 to --sst-color-blue-999Various Darker blue variants
Red Colors
Variable Hex Value Purpose --sst-color-red-000#ffffff Pure white --sst-color-red-025#fff5f4 Lightest red --sst-color-red-050 to --sst-color-red-450Various Light to medium reds --sst-color-red-500#ef0028 Error/destructive red --sst-color-red-550#d70023 Destructive red (active) --sst-color-red-600 to --sst-color-red-999Various Darker red variants
Green Colors
Variable Hex Value Purpose --sst-color-green-000#ffffff Pure white --sst-color-green-025#f2faef Lightest green --sst-color-green-050 to --sst-color-green-450Various Light to medium greens --sst-color-green-500#368813 Success green (secondary) --sst-color-green-550#2f7a10 Success green (active) --sst-color-green-600 to --sst-color-green-999Various Darker green variants
Purple Colors
Variable Hex Value Purpose --sst-color-purple-000#ffffff Pure white --sst-color-purple-025 to --sst-color-purple-999Various purples Complete purple scale for decorative use
Pink Colors
Variable Hex Value Purpose --sst-color-pink-000#ffffff Pure white --sst-color-pink-025 to --sst-color-pink-999Various pinks Complete pink scale for decorative use
Surface Tokens
Semantic tokens for backgrounds, borders, and text on various surfaces.
Primary Surface
Variable Color Purpose --surface-primary-background#ffffff (gray-000) Main background color for the application --surface-primary-foreground#111111 (gray-950) Primary text color on main background --surface-primary-border#e9e9e9 (gray-075) Borders on primary surface --surface-primary-muted-foreground#777777 (gray-500) Muted/secondary text on primary surface --surface-primary-muted-background#f5f5f5 (gray-050) Muted background areas
Secondary Surface
Variable Color Purpose --surface-secondary-background#f7f7f7 (gray-025) Secondary surface background (cards, panels) --surface-secondary-foreground#5e5e5e (gray-600) Text on secondary surfaces --surface-secondary-border#e3e3e3 (gray-100) Borders on secondary surfaces
Auxiliary Surface
Variable Color Purpose --surface-auxiliary-background#f5f5f5 (gray-050) Tertiary surface background --surface-auxiliary-foregroundvar(--surface-primary-background) Text on auxiliary surfaces --surface-auxiliary-border#d4d4d4 (gray-150) Borders on auxiliary surfaces
Modal Surface
Variable Color Purpose --surface-modal-backgroundrgba(0, 0, 0, 0.8) Modal overlay/backdrop color
Action Tokens
Semantic tokens for interactive elements like buttons and links.
Variable Color Purpose --action-default-background#1c1c1c (gray-900) Default button background --action-default-foreground#ffffff (gray-000) Default button text --action-default-hover-background#474747 (gray-700) Default button hover state --action-default-hover-foreground#ffffff (gray-000) Default button hover text --action-default-active-background#303030 (gray-800) Default button active/pressed state --action-default-active-foreground#ffffff (gray-000) Default button active text
Selected State
Variable Color Purpose --action-selected-background#f5f5f5 (gray-050) Selected item background --action-focus-foreground#111111 (gray-950) Focus state text color
Secondary Actions
Variable Color Purpose --action-secondary-background#f5f5f5 (gray-050) Secondary button background --action-secondary-foregroundvar(--surface-primary-foreground) Secondary button text --action-secondary-hover-background#f7f7f7 (gray-025) Secondary button hover --action-secondary-hover-foreground#111111 (gray-950) Secondary button hover text --action-secondary-active-background#e9e9e9 (gray-075) Secondary button active state --action-secondary-active-foreground#111111 (gray-950) Secondary button active text
Destructive Actions
Variable Color Purpose --action-destructive-background#ef0028 (red-500) Destructive button background --action-destructive-foreground#ffffff (gray-000) Destructive button text --action-destructive-hover-background#ff002b (red-450) Destructive button hover --action-destructive-hover-foreground#ffffff (gray-000) Destructive button hover text --action-destructive-active-background#d70023 (red-550) Destructive button active state --action-destructive-active-foreground#ffffff (gray-000) Destructive button active text
Outline Actions
Variable Color Purpose --action-outline-background#ffffff (gray-000) Outline button background --action-outline-foregroundvar(--surface-primary-foreground) Outline button text --action-outline-hover-background#f5f5f5 (gray-050) Outline button hover --action-outline-active-foreground#e9e9e9 (gray-075) Outline button active text --action-outline-border#e3e3e3 (gray-100) Outline button border
Ghost Actions
Variable Color Purpose --action-ghost-background#ffffff (gray-000) Ghost button background --action-ghost-foregroundvar(--surface-primary-foreground) Ghost button text --action-ghost-hover-background#f5f5f5 (gray-050) Ghost button hover state
Link Actions
Variable Color Purpose --action-link-foreground#206eec (blue-500) Link text color --action-link-hover-foreground#1859c2 (blue-600) Link hover color
Control Tokens
Semantic tokens for form controls (checkboxes, radio buttons, switches, inputs).
Variable Color Purpose --control-background#ffffff (gray-000) Input/control background --control-border#e3e3e3 (gray-100) Input/control border --control-focusvar(--surface-primary-foreground) Control focus state color --control-selected-background#111111 (gray-950) Selected control background (checked) --control-selected-foreground#ffffff (gray-000) Selected control foreground (checkmark) --control-selected-border#111111 (gray-950) Selected control border --control-unselected-background#ffffff (gray-000) Unselected control background --control-unselected-border#6a6a6a (gray-550) Unselected control border --control-switch-background#e3e3e3 (gray-100) Switch toggle background (off state)
Feedback Tokens
Semantic tokens for alerts, toasts, badges, and status indicators.
Default Feedback
Variable Color Purpose --feedback-default-background#1c1c1c (gray-900) Default feedback background --feedback-default-foreground#ffffff (gray-000) Default feedback text --feedback-default-focusvar(--surface-primary-foreground) Default feedback focus
Secondary Feedback
Variable Color Purpose --feedback-secondary-background#f5f5f5 (gray-050) Secondary feedback background --feedback-secondary-foregroundvar(--surface-primary-foreground) Secondary feedback text
Outline Feedback
Variable Color Purpose --feedback-outline-background#ffffff (gray-000) Outline feedback background --feedback-outline-foregroundvar(--surface-primary-foreground) Outline feedback text --feedback-outline-border#e9e9e9 (gray-075) Outline feedback border
Info Feedback (Blue)
Variable Color Purpose --feedback-info-background#206eec (blue-500) Info alert background (filled) --feedback-info-foreground#ffffff (gray-000) Info alert text (filled) --feedback-info-secondary-background#ffffff (gray-000) Info alert background (outlined) --feedback-info-secondary-foreground#206eec (blue-500) Info alert text (outlined)
Success Feedback (Green)
Variable Color Purpose --feedback-success-background#2f7a10 (green-550) Success alert background (filled) --feedback-success-foreground#ffffff (gray-000) Success alert text (filled) --feedback-success-secondary-background#ffffff (gray-000) Success alert background (outlined) --feedback-success-secondary-foreground#368813 (green-500) Success alert text (outlined)
Warning Feedback (Yellow)
Variable Color Purpose --feedback-warning-background#ffd040 (yellow-150) Warning alert background (filled) --feedback-warning-foreground#493a0b (yellow-750) Warning alert text (filled) --feedback-warning-secondary-background#3b3b3b (gray-750) Warning alert background (dark variant) --feedback-warning-secondary-foreground#ffd040 (yellow-150) Warning alert text (dark variant)
Critical Feedback (Red)
Variable Color Purpose --feedback-critical-background#d70023 (red-550) Critical/error alert background (filled) --feedback-critical-foreground#ffffff (gray-000) Critical/error alert text (filled) --feedback-critical-secondary-background#ffffff (gray-000) Critical/error alert background (outlined) --feedback-critical-secondary-foreground#ef0028 (red-500) Critical/error alert text (outlined)
Shadow Tokens
Box shadow and drop shadow tokens for elevation and depth.
Box Shadows
Variable Value Purpose --shadow-default0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) Default shadow for cards and elevated elements --shadow-small0px 1px 2px 0px rgba(0, 0, 0, 0.05) Small shadow for subtle elevation --shadow-medium0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06) Medium shadow for dropdowns and popovers --shadow-large0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05) Large shadow for modals and prominent elements
Drop Shadows (for filter property)
Variable Value Purpose --dropshadow-defaultdrop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06)) Default drop shadow filter --dropshadow-smdrop-shadow(0px 1px 2px rgba(0, 0, 0, 0.05)) Small drop shadow filter --dropshadow-mddrop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.06)) Medium drop shadow filter --dropshadow-lrgdrop-shadow(0px 10px 15px rgba(0, 0, 0, 0.10)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)) Large drop shadow filter
Other Tokens
Focus and Disabled States
Variable Value Purpose --focus-color#c6c6c6 (gray-200) Focus ring color --focus-widthvar(--border-width-300) Focus ring width (3px) --focus-borderoklch(70.8% 0 0) Focus border color --disabledvar(--opacity-60) Opacity for disabled elements (60%)
Animation/Transition (Reduced Motion Support)
Variable Value Purpose --tx-svaries Short transition duration (0s if prefers-reduced-motion) --tx-mvaries Medium transition duration (0s if prefers-reduced-motion) --tx-lvaries Long transition duration (0s if prefers-reduced-motion) --tx-xvaries Extra long transition duration (0s if prefers-reduced-motion) --tx-xxvaries Extra extra long transition duration (0s if prefers-reduced-motion) --interactive-feedbacktranslateY(-.075em) scale(1.01) Interactive element transform (none if prefers-reduced-motion)
Usage Guidelines
Semantic Tokens vs. Color Ramp
Use semantic tokens (surface, action, control, feedback) for UI components and application styling. These tokens provide consistent meaning and adapt automatically if themes change.Use color ramp tokens (--sst-color-neutral-, --sst-color-orange- , etc.) sparingly, typically only when defining custom semantic tokens or brand-specific elements.
Example Usage
Copy /* ✅ Good - Using semantic tokens */ .button { background-color : var ( --action-default-background ); color : var ( --action-default-foreground ); border-radius : var ( --corner-radius-75 ); padding : var ( --space-200 ) var ( --space-400 ); }
/* ⚠️ Use with caution - Direct color ramp usage */ .brand-highlight { background-color : var ( --sst-color-orange-400 ); }
/* ✅ Good - Using spacing and typography tokens */ .card { padding : var ( --space-500 ); font-size : var ( --font-size-200 ); line-height : var ( --line-height-300 ); border-radius : var ( --corner-radius-200 ); box-shadow : var ( --shadow-default ); } Color Scheme Support
Currently, styles only supports light mode. The :root element uses color-scheme: only light. Dark mode support may be added in future versions.
Additional Resources