byronwade/ui · design system

One design system for every surface.

A calm, content-first component library published as a namespaced shadcn registry. Token-driven primitives, composites, and full-page layouts — all built around a single warm-green accent you re-skin from one CSS variable. Install with the shadcn CLI and you own the code.

$npx shadcn@latest add @byronwade/all

One command installs the entire catalog.

components
59
layout archetypes
10
brand variable
1

Token-driven

Every primitive is built on one foundation of CSS variables. No hardcoded colors, ever.

Re-skin from one variable

Override --brand and rings, charts, active states, and status all follow in light and dark.

Whole pages, not just parts

Ships opinionated, full-page layout archetypes — each built around one signature centerpiece.

Design rules for AI

@byronwade/design-rules

A drop-in rule you install from this registry — the same way you add a button or card. One command writes .cursor/rules/byronwade-ui.mdc into your project (or paste the file into Claude, Copilot, Codex, Windsurf…). After that, your AI agent knows the design system's laws on every edit: which components to reach for, which tokens to use, and how re-skinning works — so you never have to re-explain the system when you ship new features.

  • Use installed @byronwade/ui components — add missing ones with shadcn, don't rebuild from scratch.
  • Style with semantic tokens only (bg-brand, text-muted-foreground) — never hardcode hex or Tailwind colors.
  • Re-skin through --brand only — rings, charts, and success states follow automatically.
$ npx shadcn@latest add @byronwade/design-rules
Full setup guide