Product Update: ValYouRise Design System: One Source of Truth for Every Pixel

We built a comprehensive design system from the ground up — 50+ design tokens, 32 reusable components, and eliminated 7 dependencies. Every button, card, and status indicator now speaks the same visual language.

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.

Why a Design System?

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:

• 4 different button styles scattered across CSS classes
• 3 separate footer implementations doing the same thing
• 15+ card patterns repeated as inline Tailwind strings
• HeroUI and react-icons adding ~180KB to the bundle for components we barely used

Every new feature meant copy-pasting styling patterns and hoping dark mode still worked. It was time to fix this systematically.

What Changed

Token-Based Theming

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.

32 Reusable Components

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.

Dependency Cleanup

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.

Private Space Migration

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.

By the Numbers

What's Next

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. The DS is documented in CLAUDE.md and ready for any contributor to use.