Ocupop Design System
Brand guidelines & components
Everything you need to build consistent Ocupop products — color, type, spacing, and a full component library.
What's here
The Ocupop design system.
A living reference for how Ocupop products look and feel.
Color Palette
5-stop accent scales, unified warm neutrals, and expanded green/yellow families — all values in oklch with hex fallbacks.
Type System
Five font families, weight aliases, and a full type scale. Tokens mirror ocupop-type.css.
Components
50+ production-ready Astro + React components, branded to match Ocupop and ready to drop into any project.