shadcn

name	shadcn
description	shadcn/ui under the ONE 6-token design system — CSS var tokens only, no hex, add components via the CLI. Invoke when editing src/components/ui/ or adding a primitive.

shadcn/ui in the ONE design system

The 33 primitives in src/components/ui/ are vendored shadcn. They are styled by the 6-token system — they reference CSS vars, never literal colors.

The token rule

Components use bg-background, text-font, border-border, bg-primary text-on-primary, etc. These map to --color-* declared in Layout.astro. Never a hex literal, raw hsl(), or a Tailwind palette utility (bg-zinc-500) — the design-check hook blocks them.

Muted text: text-font/60. Faint: text-font/40. Borders: border-font/10.

Adding a component

bunx shadcn@latest add dialog

Then sweep the generated file: replace any bg-zinc-* / hardcoded colors with the 6-token equivalents before committing. The design-check hook will flag what you miss.

Don't

• Don't add ONE/SDK imports into ui/ — primitives stay pure and portable.
• Don't introduce a 7th color token — compose from the 6 + invariants (white/black/transparent/destructive/success).