CSS Variables Reference

This document provides a comprehensive reference for all CSS custom properties (CSS variables) available in the design system.

Font Size Tokens
Font Weight Tokens
Spacing Tokens
Corner Radius Tokens
Line Height Tokens
Border Width Tokens
Opacity Tokens
Tint Tokens
Shade Tokens
Color Ramp Tokens
Surface Tokens
Action Tokens
Control Tokens
Feedback Tokens
Shadow Tokens
Other 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
`--lineHeight-100`	1.2	Tight line height for headings
`--lineHeight-200`	1.3	Compact line height for UI text
`--lineHeight-300`	1.5	Default line height for body text
`--lineHeight-400`	1.7	Loose line height for enhanced readability

Border Width Tokens

Border width scale for consistent stroke weights.

Variable	Value	Purpose
`--borderWidth-100`	1px	Thin border (default)
`--borderWidth-200`	2px	Medium border
`--borderWidth-300`	3px	Thick border (focus states)
`--borderWidth-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
`--color-neutral-000`	#ffffff	Pure white
`--color-neutral-025`	#f7f7f7	Near white
`--color-neutral-050`	#f5f5f5	Background, very light gray
`--color-neutral-075`	#e9e9e9	Light border color
`--color-neutral-100`	#e3e3e3	Border color
`--color-neutral-150`	#d4d4d4	Subtle border
`--color-neutral-200`	#c6c6c6	Light gray
`--color-neutral-250`	#b9b9b9	Gray variant
`--color-neutral-300`	#ababab	Medium-light gray
`--color-neutral-350`	#9d9d9d	Gray variant
`--color-neutral-400`	#909090	Medium gray
`--color-neutral-450`	#848484	Gray variant
`--color-neutral-500`	#777777	Mid-tone gray, muted text
`--color-neutral-550`	#6a6a6a	Dark-medium gray
`--color-neutral-600`	#5e5e5e	Secondary text color
`--color-neutral-650`	#525252	Gray variant
`--color-neutral-700`	#474747	Dark gray
`--color-neutral-750`	#3b3b3b	Very dark gray
`--color-neutral-800`	#303030	Near black gray
`--color-neutral-850`	#262626	Gray variant
`--color-neutral-900`	#1c1c1c	Almost black
`--color-neutral-950`	#111111	Near pure black, primary text
`--color-neutral-999`	#000000	Pure black

Neutral Warm (Gray Warm) Colors

Variable	Hex Value	Purpose
`--color-neutral-warm-000`	#ffffff	Pure white
`--color-neutral-warm-025`	#f9f7f6	Warm near white
`--color-neutral-warm-050`	#f6f4f2	Warm background
`--color-neutral-warm-075`	#ece9e5	Warm light gray
`--color-neutral-warm-100`	#e6e2dd	Warm border
`--color-neutral-warm-150` to `--color-neutral-warm-999`	Various warm grays	Warm-toned neutral scale

Orange Colors (Brand Primary)

Variable	Hex Value	Purpose
`--color-orange-000`	#ffffff	Pure white
`--color-orange-025`	#fff5f2	Lightest orange tint
`--color-orange-050`	#ffece5	Very light orange
`--color-orange-075`	#ffe2d8	Light orange background
`--color-orange-100`	#ffd9cb	Light orange
`--color-orange-150` to `--color-orange-350`	Various	Orange scale variants
`--color-orange-400`	#ff5308	Brand orange (primary)
`--color-orange-450`	#ec4c07	Brand orange hover
`--color-orange-500`	#d64405	Brand orange active
`--color-orange-550` to `--color-orange-999`	Various	Darker orange variants

Yellow Colors

Variable	Hex Value	Purpose
`--color-yellow-000`	#ffffff	Pure white
`--color-yellow-025`	#fff8e3	Lightest yellow
`--color-yellow-050` to `--color-yellow-100`	Various	Light yellows
`--color-yellow-150`	#ffd040	Warning yellow background
`--color-yellow-200` to `--color-yellow-700`	Various	Yellow scale
`--color-yellow-750`	#493a0b	Warning yellow foreground
`--color-yellow-800` to `--color-yellow-999`	Various	Dark yellow/gold variants

Blue Colors

Variable	Hex Value	Purpose
`--color-blue-000`	#ffffff	Pure white
`--color-blue-025`	#f4f8ff	Lightest blue
`--color-blue-050` to `--color-blue-450`	Various	Light to medium blues
`--color-blue-500`	#206eec	Info/link blue, focus color
`--color-blue-550` to `--color-blue-999`	Various	Darker blue variants

Red Colors

Variable	Hex Value	Purpose
`--color-red-000`	#ffffff	Pure white
`--color-red-025`	#fff5f4	Lightest red
`--color-red-050` to `--color-red-450`	Various	Light to medium reds
`--color-red-500`	#ef0028	Error/destructive red
`--color-red-550`	#d70023	Destructive red (active)
`--color-red-600` to `--color-red-999`	Various	Darker red variants

Green Colors

Variable	Hex Value	Purpose
`--color-green-000`	#ffffff	Pure white
`--color-green-025`	#f2faef	Lightest green
`--color-green-050` to `--color-green-450`	Various	Light to medium greens
`--color-green-500`	#368813	Success green (secondary)
`--color-green-550`	#2f7a10	Success green (active)
`--color-green-600` to `--color-green-999`	Various	Darker green variants

Purple Colors

Variable	Hex Value	Purpose
`--color-purple-000`	#ffffff	Pure white
`--color-purple-025` to `--color-purple-999`	Various purples	Complete purple scale for decorative use

Pink Colors

Variable	Hex Value	Purpose
`--color-pink-000`	#ffffff	Pure white
`--color-pink-025` to `--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

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.

Box Shadows

Variable	Value	Purpose
`--shadow-default`	0px 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-sm`	0px 1px 2px 0px rgba(0, 0, 0, 0.05)	Small shadow for subtle elevation
`--shadow-md`	0px 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-lrg`	0px 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-default`	drop-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-sm`	drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.05))	Small drop shadow filter
`--dropshadow-md`	drop-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-lrg`	drop-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-width`	var(—borderWidth-300)	Focus ring width (3px)
`--disabled`	var(—opacity-60)	Opacity for disabled elements (60%)

Animation/Transition (Reduced Motion Support)

Variable	Value	Purpose
`--tx-s`	varies	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 (—color-neutral-, —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(--color-orange-400);
}

/* ✅ Good - Using spacing and typography tokens */
.card {
  padding: var(--space-500);
  font-size: var(--font-size-200);
  line-height: var(--lineHeight-300);
  border-radius: var(--corner-radius-200);
  box-shadow: var(--shadow-default);
}

Color Scheme Support

Currently, studs-styles only supports light mode. The :root element uses color-scheme: only light. Dark mode support may be added in future versions.

Getting Started

Foundations

Components

Integration Guides

Content

​CSS Variables Reference

​Table of Contents

​Font Size Tokens

​Font Weight Tokens

​Spacing Tokens

​Corner Radius Tokens

​Line Height Tokens

​Border Width Tokens

​Opacity Tokens

​Tint Tokens

​Shade Tokens

​Color Ramp Tokens

​Neutral (Gray) Colors

​Neutral Warm (Gray Warm) Colors

​Orange Colors (Brand Primary)

​Yellow Colors

​Blue Colors

​Red Colors

​Green Colors

​Purple Colors

​Pink Colors

​Surface Tokens

​Primary Surface

​Secondary Surface

​Auxiliary Surface

​Modal Surface

​Action Tokens

​Default Actions (Primary Buttons)

​Selected State

​Secondary Actions

​Destructive Actions

​Outline Actions

​Ghost Actions

​Link Actions

​Control Tokens

​Feedback Tokens

​Default Feedback

​Secondary Feedback

​Outline Feedback

​Info Feedback (Blue)

​Success Feedback (Green)

​Warning Feedback (Yellow)

​Critical Feedback (Red)

​Shadow Tokens

​Box Shadows

​Drop Shadows (for filter property)

​Other Tokens

​Focus and Disabled States

​Animation/Transition (Reduced Motion Support)

​Usage Guidelines

​Semantic Tokens vs. Color Ramp

​Example Usage

​Color Scheme Support

​Additional Resources