Claude Design cards

Every card from the Claude Design project "Nondominium Design System", rendered here on this repo's own static/tokens.css and its own ndo-* custom elements (registry/) rather than on the original's React bundle. Grouped and sized exactly as Claude Design groups and sizes them. Each card's name links to its isolated frame — the same URL scripts/compare/pairs/ds.ts screenshots against the original.

Brand

nondominium_logo.png — mark + wordmark

Default SvelteKit favicon shipped in ui/

Three visual layers

How badge shape encodes the data layer

Colors

Gray scale — the whole UI chrome

Action & feedback

Primary blue, error red, warning amber

Lifecycle stages

Layer 0 · LifecycleStage — 10 stages

Resource nature

Layer 0 · ResourceNature

Property regime

Layer 0 · PropertyRegime — dashed outlines

Semantic tokens

Surfaces, borders, text roles

Type

system-ui · 12 → 24px

Uppercase tracked section labels

ui-monospace for agent keys & action hashes

Spacing

rem-based, Tailwind steps

4 · 6 · 8 · 12px

Barely-there elevation; hover lifts sm → md

13rem sidebar + fluid main on gray-100

Components

Layer 0 / 1 / 2 domain badges

primary · ghost · destructive · disabled

NDO card in browser grid

active · inactive · pending · coming-soon