Guides
How to use
Use this guide as a starting point for turning the design system into product UI, not just static documentation.
Workflow
1
Choose a pattern
Start with the component page closest to the product job: plan comparison, account action, navigation, or form input.
2
Use tokens
Prefer tw-navy, tw-red, tw-teal, and tw-gray classes. Avoid generic Tailwind colors in product UI.
3
Install from registry
Use the generated JSON under /r/ for shadcn-compatible installation.
4
Compose screens
Use existing primitives first. Add a new component only when repeated product behavior emerges.
Install example
npx shadcn add http://localhost:3000/r/button.json
npx shadcn add http://localhost:3000/r/plan-card.json
npx shadcn add http://localhost:3000/r/line-counter.json