All modules
MODULE 02 · MAKING IT NOT LOOK LIKE A TEMPLATE
UI design system
Decide the brand once. Every screen inherits it.
shadcn/ui gives you components you own; a small token file — one accent color, one font, one radius — makes them yours. Without this card, every AI-built app looks like the same demo.
WHEN YOU NEED IT
Every tier, right after the frontend shell exists.
THE CHOICE, PER TIER
- T1shadcn/ui + Tailwind, one accent color
- T2+ brand tokens and a dark/light toggle
- T3+ per-role accent theming
SAY THIS TO YOUR AGENT
"Install shadcn/ui. Define brand tokens in globals.css — one accent, one font, one radius — and rebuild the sample page using only tokens. No raw hex values inside components."
DONE WHEN
- All colors come from tokens, none are hardcoded
- Dark and light mode both look intentional
- A stranger couldn't name the template it came from