Design system

Agents build to your design system, not around it.

Building with AI gave us front ends that never quite matched — every product, and every corner of a product, drifting a little further from the last.

The built-in design system settles what the product looks like. Build one with agents, or import one from Figma or the other design tools you already use.

Once it is configured, every agent builds against it and checks its work against it — and you can add build-time checks, so drift fails the build instead of shipping.

fernhollow

fernhollow

~/fernhollow/design-system
Foundations2
foundations/tokens.tokens.jsonfoundations/principles.md
Components4
Dark
Create workspace
Cancel
button
4 variants · 4 states
Dark
Workspace name *
my-project
Shown in the sidebar and the switcher.
input
1 variant · 4 states
Dark
Dark — the same three panes.
Marketplace — focused
Featured 2 ready to launch
list-row
3 variants
Dark
SK-1487Inventory epic
SK-1450Loot tables honour rarity
SK-1465Save-game predicates
task-card
3 variants · 4 states
Patterns1
Selection

Selection answers “what did I pick?”. Focus answers “where am I typing?”. They are different questions and never share a treatment. Selection is a neutral fill in the row; focus is a ring on the control.