A design system
that proves itself.
Cedar is a token-based design system with a Figma source of truth, a React component library, and a real-world PWA built on top of it. This site is itself a Cedar artifact — every color, space, and radius you see is a Cedar token.
Tokens
One source of truth, everywhere
Every value in Cedar lives as a Figma variable first, then surfaces as a CSS custom property. Primitives → Semantic → Component. The chain is never broken.
brand/primary
Color / Semantic
Space / Scale
Radius
Components
Live examples, not screenshots
Every component on this site is the actual React implementation. Token-driven, typed, accessible. Hover the buttons. They work.
Button · color × variant × size
Badge · color × style
Alert · all variants
Spinner · sizes
Built with Cedar
Cedar Ops & DayLog — real-world apps
Cedar isn't a demo system. Cedar Ops and DayLog are production apps built entirely on Cedar tokens and components — proving the system holds up under real product requirements.
Cedar Ops
A design system adoption dashboard — component tables, detail pages, and settings, built to exercise nearly every Cedar component in production.
DayLog
A personal productivity tool built with Cedar components. Shipping tokens, spacing, color semantics, and component patterns from day one.