Foundation

Every component reads these tokens from registry/foundation.css. Swatches render live, so they follow the theme and accent you pick in the sidebar.

Color

--background

--surface

--surface-raised

--surface-muted

--foreground

--border

--border-subtle

--border-strong

--accent

--accent-strong

--accent-subtle

--accent-foreground

--primary

--primary-foreground

--avatar-radius

--avatar-corner-shape

--control-on

--control-glyph

--control-track

--control-track-hover

--control-thumb

--control-thumb-on

--control-on-subtle

--control-fill

--success

--warning

--danger

--scrim

--scrim-soft

--shade

--media-scrim

--on-media

--edge-inset

--glow

--syntax-string

--syntax-number

--syntax-keyword

--syntax-type

--syntax-function

--syntax-property

--file-typescript

--file-stylesheet

--file-markdown

--file-json

--color-black

--color-white

--silicon-gradient-from

--silicon-gradient-to

--silicon-gradient-foreground

--stagger-item

Neutral scale

0

1

2

3

4

5

6

7

8

9

10

11

Gradients

--silicon-gradient

--silicon-gradient-soft

--silicon-gradient-line

--silicon-gradient-ink

Chart series

--series-1

--series-2

--series-3

--series-4

Radius, corners and shadow

--radius-detail

--radius-control

--radius-container

--radius-overlay

--radius-full

Corner shape

Squircle is the default. Set data-corners="round" on <html>, or on any element, for round corners. Browsers without corner-shape draw round corners either way. A squircle feels about half as round as a circle at the same radius, so squircle mode uses radii of 4 / 11 / 14 / 21 to feel like round 2 / 6 / 8 / 12. Circles and capsules always stay round.

squircle

round

Shadow

--shadow-resting

--shadow-raised

--shadow-floating

--shadow-hairline

--shadow-knob

--shadow-thumb

--shadow-drop

--shadow-showcase

--shadow-showcase-lg

Type

--text-5xlA team of AI employees

--text-4xlA team of AI employees

--text-3xlA team of AI employees

--text-2xlA team of AI employees

--text-xlA team of AI employees

--text-lgA team of AI employees

--text-baseA team of AI employees

--text-smA team of AI employees

--text-xsA team of AI employees

Space

--space-hair

--space-tight

--space-related

--space-group

--space-inset

--space-comfort

--space-section

--space-block

--space-page

--space-stage

--space-screen

Motion

Durations and easings for CSS transitions. Springs for Motion live in lib/motion-tokens.ts.

--ease-enter
--ease-standard
--ease-exit
--ease-in-out
--ease-spring
--duration-instant
--duration-fast
--duration-standard
--duration-considered
--duration-spring