Complete reference for all CSS custom properties (variables) available in the design system
Using shadcn/ui + Tailwind? These CSS variables are primarily for projects using the legacy @strongtie/design-system package or @strongtie/styles for non-React frameworks. For new projects, we recommend the ShadCN + Tailwind approach which uses Tailwind's built-in design tokens.
Font Size Tokens
Typography scale for consistent text sizing throughout the application.
Variable
Value
Purpose
--font-size-50
0.625rem (10px)
Smallest text size for fine print or legal text
--font-size-75
0.75rem (12px)
Small text, captions, or helper text
--font-size-100
0.875rem (14px)
Body text (small), labels, default size
--font-size-200
1rem (16px)
Default body text size
--font-size-300
1.125rem (18px)
Large body text, small headings
--font-size-400
1.25rem (20px)
Subheadings
--font-size-500
1.375rem (22px)
Medium headings (H3)
--font-size-600
1.875rem (30px)
Large headings (H2)
--font-size-700
2.5rem (40px)
Extra large headings (H1)
--font-size-800
3.375rem (54px)
Display text (large)
--font-size-900
4.5rem (72px)
Display text (extra large)
--font-size-1000
6rem (96px)
Hero text, largest display size
Font Weight Tokens
Font weight scale for typography hierarchy.
Variable
Value
Purpose
--font-weight-light
300
Light text weight for decorative or large text
--font-weight-regular
400
Regular text weight for body copy
--font-weight-medium
500
Medium text weight for labels and emphasis
--font-weight-bold
700
Bold text weight for headings and strong emphasis
Spacing Tokens
Consistent spacing scale for margins, padding, and gaps.
Variable
Value
Purpose
--space-00
0rem (0px)
No spacing
--space-50
0.125rem (2px)
Minimum spacing, subtle separations
--space-75
0.25rem (4px)
Extra small spacing
--space-90
0.375rem (6px)
Small spacing variant
--space-100
0.5rem (8px)
Small spacing (base unit)
--space-200
0.75rem (12px)
Small-medium spacing
--space-250
0.875rem (14px)
Medium spacing variant
--space-300
1rem (16px)
Medium spacing (1 unit)
--space-350
1.25rem (20px)
Medium-large spacing
--space-400
1.5rem (24px)
Large spacing
--space-500
2rem (32px)
Extra large spacing
--space-550
2.25rem (36px)
Extra large spacing variant
--space-600
2.5rem (40px)
Double extra large spacing
--space-700
3rem (48px)
Section spacing (small)
--space-800
4rem (64px)
Section spacing (medium)
--space-900
5rem (80px)
Section spacing (large)
--space-1000
6rem (96px)
Section spacing (extra large)
Corner Radius Tokens
Border radius values for consistent rounded corners.
Variable
Value
Purpose
--corner-radius-00
0rem (0px)
No rounding (square corners)
--corner-radius-50
0.03125rem (0.5px)
Minimal rounding
--corner-radius-75
0.25rem (4px)
Small rounding for buttons, inputs
--corner-radius-100
0.375rem (6px)
Medium rounding
--corner-radius-200
0.5rem (8px)
Standard rounding for cards, containers
--corner-radius-300
0.625rem (10px)
Large rounding
--corner-radius-400
0.75rem (12px)
Extra large rounding
--corner-radius-500
1rem (16px)
Maximum standard rounding
--corner-radius-9999
100vh
Pill shape (fully rounded)
Line Height Tokens
Line height values for optimal text readability.
Variable
Value
Purpose
--line-height-100
1.2
Tight line height for headings
--line-height-200
1.3
Compact line height for UI text
--line-height-300
1.5
Default line height for body text
--line-height-400
1.7
Loose line height for enhanced readability
Border Width Tokens
Border width scale for consistent stroke weights.
Variable
Value
Purpose
--border-width-100
1px
Thin border (default)
--border-width-200
2px
Medium border
--border-width-300
3px
Thick border (focus states)
--border-width-400
4px
Extra thick border
Opacity Tokens
Opacity scale for transparency effects.
Variable
Value
Purpose
--opacity-00
0
Fully transparent
--opacity-10
0.1
10% opacity
--opacity-20
0.2
20% opacity
--opacity-30
0.3
30% opacity
--opacity-40
0.4
40% opacity
--opacity-50
0.5
50% opacity (half transparent)
--opacity-60
0.6
60% opacity (disabled state)
--opacity-70
0.7
70% opacity
--opacity-80
0.8
80% opacity
--opacity-90
0.9
90% opacity
--opacity-100
1
Fully opaque
Tint Tokens
White overlay colors with varying opacity levels for creating lighter variants.
Variable
Color
Purpose
--tint-100
rgba(255, 255, 255, 0.9)
Lightest tint (90% white)
--tint-200
rgba(255, 255, 255, 0.8)
Very light tint (80% white)
--tint-300
rgba(255, 255, 255, 0.7)
Light tint (70% white)
--tint-400
rgba(255, 255, 255, 0.6)
Medium-light tint (60% white)
--tint-500
rgba(255, 255, 255, 0.5)
Medium tint (50% white)
--tint-600
rgba(255, 255, 255, 0.4)
Medium-dark tint (40% white)
--tint-700
rgba(255, 255, 255, 0.3)
Dark tint (30% white)
--tint-800
rgba(255, 255, 255, 0.2)
Very dark tint (20% white)
--tint-900
rgba(255, 255, 255, 0.1)
Darkest tint (10% white)
--tint-1000
rgba(255, 255, 255, 0)
Transparent
Shade Tokens
Black overlay colors with varying opacity levels for creating darker variants.
Variable
Color
Purpose
--shade-100
rgba(0, 0, 0, 0.9)
Darkest shade (90% black)
--shade-200
rgba(0, 0, 0, 0.8)
Very dark shade (80% black) - used for modal backgrounds
--shade-300
rgba(0, 0, 0, 0.7)
Dark shade (70% black)
--shade-400
rgba(0, 0, 0, 0.6)
Medium-dark shade (60% black)
--shade-500
rgba(0, 0, 0, 0.5)
Medium shade (50% black)
--shade-600
rgba(0, 0, 0, 0.4)
Medium-light shade (40% black)
--shade-700
rgba(0, 0, 0, 0.3)
Light shade (30% black)
--shade-800
rgba(0, 0, 0, 0.2)
Very light shade (20% black)
--shade-900
rgba(0, 0, 0, 0.1)
Lightest shade (10% black)
--shade-1000
rgba(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-999
Various 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-350
Various
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-999
Various
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-100
Various
Light yellows
--sst-color-yellow-150
#ffd040
Warning yellow background
--sst-color-yellow-200 to --sst-color-yellow-700
Various
Yellow scale
--sst-color-yellow-750
#493a0b
Warning yellow foreground
--sst-color-yellow-800 to --sst-color-yellow-999
Various
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-450
Various
Light to medium blues
--sst-color-blue-500
#206eec
Info/link blue, focus color
--sst-color-blue-550 to --sst-color-blue-999
Various
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-450
Various
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-999
Various
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-450
Various
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-999
Various
Darker green variants
Purple Colors
Variable
Hex Value
Purpose
--sst-color-purple-000
#ffffff
Pure white
--sst-color-purple-025 to --sst-color-purple-999
Various 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-999
Various 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-foreground
var(--surface-primary-background)
Text on auxiliary surfaces
--surface-auxiliary-border
#d4d4d4 (gray-150)
Borders on auxiliary surfaces
Modal Surface
Variable
Color
Purpose
--surface-modal-background
rgba(0, 0, 0, 0.8)
Modal overlay/backdrop color
Action Tokens
Semantic tokens for interactive elements like buttons and links.
Default Actions (Primary Buttons)
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-foreground
var(--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-foreground
var(--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-foreground
var(--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-focus
var(--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-focus
var(--surface-primary-foreground)
Default feedback focus
Secondary Feedback
Variable
Color
Purpose
--feedback-secondary-background
#f5f5f5 (gray-050)
Secondary feedback background
--feedback-secondary-foreground
var(--surface-primary-foreground)
Secondary feedback text
Outline Feedback
Variable
Color
Purpose
--feedback-outline-background
#ffffff (gray-000)
Outline feedback background
--feedback-outline-foreground
var(--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.
Short transition duration (0s if prefers-reduced-motion)
--tx-m
varies
Medium transition duration (0s if prefers-reduced-motion)
--tx-l
varies
Long transition duration (0s if prefers-reduced-motion)
--tx-x
varies
Extra long transition duration (0s if prefers-reduced-motion)
--tx-xx
varies
Extra extra long transition duration (0s if prefers-reduced-motion)
--interactive-feedback
translateY(-.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
/* ✅ 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.