Design Tokens
Colors
Primitives, semantic roles, and component color aliases generated from Figma. Sync via Copied! — then consume through Tailwind, CSS variables, or Copied!. Tap any swatch or path on this page to copy.
Installation
From the monorepo root: pull Figma variables, rebuild artifacts, then import the token graph (see Import cell).
Terminal
Import
Workflow
Same three steps as always — command snippets live in Installation so they are not duplicated here.
Step 1 · Pull
Fetch from Figma
Writes Copied!.
Step 2 · Build
Generate CSS & manifest
Compiles
@spring/ds-react/tokensinto generated CSS and a sync manifest.Step 3 · Use
Consume in product
Tailwind reads the token package; runtime styles use CSS variables from the build output.
Primitives
Color ramps
Literal hex values from Figma's Copied! collection. Prefer semantic roles in UI code — avoid binding directly to primitives.
violet
Copied!Blue
Copied!green
Copied!yellow
Copied!red
Copied!gray
Copied!Semantic
Color roles
Choose by intent, not hex. Previews pair text automatically; paths and resolved values copy on tap.
Backgrounds
Copied! — pick a chip to preview; paired text updates for contrast.
Brand Primary · preview
The quick brown fox jumps over the lazy dog.
Primary actions and brand fills. Paired with Copied!.
Copied!Copied!
Text · text.onBrand
Text
Copied! — each preview uses the surface that role is meant for.
Brand · preview
Aa Bb
The quick brown fox jumps over the lazy dog.
Sample · 0123456789 — sat on Copied!.
Copied!Copied!
Copied!Borders
Copied! — strokes use 2px in the system.
Border · Subtle
2px stroke
Copied!
Copied!Border · Default
2px stroke
Copied!
Copied!Border · Strong
2px stroke
Copied!
Copied!Border · Brand
2px stroke
Copied!
Copied!Border · Disabled
2px stroke
Copied!
Copied!Border · Status Success
2px stroke
Copied!
Copied!Border · Status Error
2px stroke
Copied!
Copied!Status
Pairs semantic.bg.status* with semantic.text.status*, graphic, and optional border.
Success
Confirmations, completed states, positive outcomes.
Text roleCopied!
- Copied!Copied!
Background
- Copied!Copied!
Text
- Copied!Copied!
Graphic
- Copied!Copied!
Border
Info
Neutral notices, tips, and background context.
Text roleCopied!
- Copied!Copied!
Background
- Copied!Copied!
Text
- Copied!Copied!
Graphic
Warning
Cautions and reversible risks — read before continuing.
Text roleCopied!
- Copied!Copied!
Background
- Copied!Copied!
Text
- Copied!Copied!
Graphic
Error
Validation errors, failed actions, destructive flows.
Text roleCopied!
- Copied!Copied!
Background
- Copied!Copied!
Text
- Copied!Copied!
Graphic
- Copied!Copied!
Border
Components
Component tokens
Aliases map semantic roles to buttons, inputs, overlays, and elevation so theming stays centralized.
badge
9 tokens
- Copied!Copied!
badge-error-bg
- Copied!Copied!
badge-error-icon
- Copied!Copied!
badge-error-text
- Copied!Copied!
badge-success-bg
- Copied!Copied!
badge-success-icon
- Copied!Copied!
badge-success-text
- Copied!Copied!
badge-warning-bg
- Copied!Copied!
badge-warning-icon
- Copied!Copied!
badge-warning-text
button
12 tokens
- Copied!Copied!
button-disabled-bg
- Copied!Copied!
button-disabled-text
- Copied!Copied!
button-ghost-hover
- Copied!Copied!
button-ghost-text
- Copied!Copied!
button-outline-border
- Copied!Copied!
button-outline-text
- Copied!Copied!
button-primary-bg
- Copied!Copied!
button-primary-hover
- Copied!Copied!
button-primary-text
- Copied!Copied!
button-secondary-bg
- Copied!Copied!
button-secondary-hover
- Copied!Copied!
button-secondary-text
input
7 tokens
- Copied!Copied!
input-bg
- Copied!Copied!
input-bg-active
- Copied!Copied!
input-border
- Copied!Copied!
input-border-focus
- Copied!Copied!
input-placeholder
- Copied!Copied!
input-text
- Copied!Copied!
input-text-active
overlay
7 tokens
- Copied!Copied!
overlay-bg
- Copied!Copied!
overlay-border
- Copied!Copied!
overlay-brand-bg
- Copied!Copied!
overlay-inverse-bg
- Copied!Copied!
overlay-inverse-text
- Copied!Copied!
overlay-text
- Copied!Copied!
overlay-text-secondary
surface
4 tokens
- Copied!Copied!
surface-card-bg
- Copied!Copied!
surface-card-border
- Copied!Copied!
surface-divider
- Copied!Copied!
surface-dock-bg