Written by
We built a design system from the ground up — 50+ design tokens, 32 reusable components, and eliminated 7 dependencies. Every UI element now speaks the same visual language.

Image: @medbadrc
Written by
Building a product is fast. Building a product that stays maintainable is hard. With v0.6.0, we took a step back from feature work to invest in the foundation: a dedicated Design System that governs every visual element across ValYouRise.
As ValYouRise grew from MVP to a multi-org OKR platform with AI features, demo mode, and a public marketing site, our UI accumulated technical debt:
Every new feature meant copy-pasting styling patterns and hoping dark mode still worked. It was time to fix this systematically.
Every color, spacing value, radius, shadow, and animation timing is now a CSS custom property. Light and dark themes switch instantly — no conditional classes, no runtime calculations.
From atomic Icon (50+ Lucide-style SVGs) and Button (7 variants) to composed Card, Toast, Modal, and InlineAlert — every UI pattern has a single canonical implementation. Board-specific components like OkrCard and TypePill share the same token foundation.
We removed 7 npm packages including the entire HeroUI component library and react-icons. The cookie consent dialog was rewritten using native <dialog> and our own Switch component. The public navigation replaced HeroUI's Dropdown with a lightweight custom solution.
The dashboard, user settings, org settings, workspace views, and token management now use DS components instead of inline Tailwind patterns. Status messages use <InlineAlert>, cards use <Card>, buttons use <Button> — consistently, everywhere.
| Metric | Before | After |
|---|---|---|
| npm packages | 41 | 34 (-7) |
| HeroUI imports | 14 files | 0 |
| react-icons imports | 18 files | 0 |
| Design tokens | ~12 | 50+ |
| DS components | 0 | 32 |
| Inline card patterns | 15+ | 0 (use Card) |
The design system foundation is in place. Next steps include decomposing the 2,600-line board client into DS board components, and extending the token system for more granular theming.