Materials

The surfaces the system is built from: three fills, two strokes, one radius scale. Depth comes from fill steps and hairlines — not shadows.

Fills

Surfaces step bg-primary → bg-surface → bg-elevated. Don't skip levels.

bg-primary

Page canvas

bg-surface

Cards, panels

bg-elevated

Raised, hover

Strokes

border

Controls: inputs, buttons, framed media

separator

Hairline dividers between content

Radii

Base radius --radius: 0.375rem (6px). Small controls use the small end; large surfaces — cards, previews, media — use --radius-card (12px) and --radius-card-lg (16px).

sm 2px

md 4px

lg 6px

xl 10px

2xl 14px

3xl 18px

4xl 22px

--radius-card (12px) — cards

--radius-card-lg (16px) — hero surfaces

Layout

— Max content width 1200px (--max-w-content).
— Spare grids, wide gutters, one idea per section.
— No drop shadows; depth is fills and strokes.

Markdown for agents: /design/materials.md · spec: /design.md