Design system

Bevel looks like one set because every component reads the same few dozen tokens. They live in one stylesheet, bevel.css, which arrives with your first component.

Three layers

1. Foundation (bevel.css): light, depth, materials, motion and shape. The only place raw values live.
2. Component stylesheet (wallet.css, annunciator.css…): the component's own palette and geometry, mapped onto the foundation's variables by data-slot, data-variant and data-status.
3. Component (.tsx): Tailwind classes that only read tokens.

Each layer reads only from the one below it. In practice:

:root {
  --annunciator-amber: oklch(0.8 0.16 75); /* a palette value, named once */
}
[data-slot="annunciator-tile"] {
  --annunciator-lamp: var(--annunciator-amber);
}

<span className="bg-(--annunciator-lamp) rounded-(--bevel-radius-xs)
  transition-opacity duration-(--bevel-duration-small)" />

Utilities

The foundation turns tokens into a few utilities, so components describe objects, not shadows.

• Depth: bevel-recessed, bevel-flush, bevel-raised, bevel-pressed, bevel-object.
• Materials: bevel-leather, bevel-plastic, bevel-metal, bevel-paper. Each reads --bevel-material and --bevel-material-edge, so one utility makes walnut, brass or steel.
• Details: bevel-deboss, bevel-stitch, bevel-fill, bevel-led, bevel-ink, bevel-glass, bevel-ruled.

Rules

• One light source, from above. Highlights on upper edges, shadows below.
• Nested radii are concentric: an inner radius is the outer radius minus the inset between them.
• If a value doesn't exist, add a named token with a comment, not an arbitrary value.
• Don't add --text-* theme keys: Tailwind's class merging reads unknown text-* classes as colours.

Foundation tokens

Read straight from bevel.css, light mode. Dark mode redefines the light and paper tokens.