Problem
There are only two components (brand-logo, expected-pages) and every page
hand-rolls its own markup with inline styles — for example the repeated
style={{ color: "var(--muted)" }} across the placeholder pages. As the
dashboard lands, this will fragment quickly.
What to do
Build the primitives the dashboard will need, before it needs them:
Card, Badge, Button, Table, Stat, EmptyState, Skeleton- Typed variants rather than free-form
className strings
- Every one working in both light and dark themes
- Composable and accessible by default — labelled controls, visible focus
Acceptance criteria
Notes
Do this before /operators, not after. Retrofitting a design system onto a
built dashboard is significantly more work than starting from one.
Problem
There are only two components (
brand-logo,expected-pages) and every pagehand-rolls its own markup with inline styles — for example the repeated
style={{ color: "var(--muted)" }}across the placeholder pages. As thedashboard lands, this will fragment quickly.
What to do
Build the primitives the dashboard will need, before it needs them:
Card,Badge,Button,Table,Stat,EmptyState,SkeletonclassNamestringsAcceptance criteria
styleprops left in page componentsNotes
Do this before
/operators, not after. Retrofitting a design system onto abuilt dashboard is significantly more work than starting from one.