Design Principles
The philosophy behind every color, component, and interaction in the Cookest design system. These principles guide us in creating interfaces that feel as delightful as the meals our users create.
Core Principles
Six guiding ideas that shape every decision we make — from choosing a border-radius to building an entire page layout.
Flavor First
Every component should feel warm, inviting, and appetizing. We use earthy greens, warm ambers, and creamy whites to evoke the joy of cooking.
Consistent Proportions
Like a well-balanced recipe, every component follows an 8px spacing grid and consistent border-radius scale.
Lightweight by Default
Components ship minimal CSS. No heavy dependencies. Tree-shakeable. Under 15KB gzipped.
Inclusive Design
WCAG 2.1 AA compliant. Every component is keyboard navigable, screen reader compatible, and supports reduced motion.
Cross-Platform Parity
React and Flutter components share identical design tokens, ensuring visual consistency across web and mobile.
Composable Architecture
Small, focused components that compose naturally. Build complex UIs from simple building blocks.
Color Philosophy
Our palette is drawn from the kitchen — fresh herbs, warm wood, and sun-ripened produce. Every hue is chosen for meaning, not decoration.
#7A9A65Inspired by fresh herbs and garden greens
#F5F5F0Warm cream — like parchment or flour-dusted counters
#1C3A2ADeep forest ink for clear, grounded headlines
#3D5040Soft, readable body text with natural warmth
#4CAF50Intuitive green for positive feedback
#FF9800Amber caution — like a timer about to ring
#F44336Clear red for errors and destructive actions
Spacing System
A base-8 spacing scale keeps layouts rhythmic and predictable. Multiples of 8px create natural vertical and horizontal harmony, with a 4px half-step for tighter contexts.
0.54px18px1.512px216px324px432px648px864px1296pxTypography Scale
Three typeface families — each chosen for a specific role. Playfair Display brings editorial warmth, Inter ensures effortless readability, and JetBrains Mono keeps code crisp.
5xl · 48pxThe quick brown fox4xl · 36pxThe quick brown fox3xl · 30pxThe quick brown foxlg · 18pxThe quick brown foxbase · 16pxThe quick brown foxsm · 14pxThe quick brown foxbase · 16pxThe quick brown foxsm · 14pxThe quick brown foxxs · 12pxThe quick brown foxDo’s & Don’ts
Quick guidelines to keep your Cookest interfaces consistent and accessible.
- ✓Use consistent spacing from the 8px grid
- ✓Follow the color system — use tokens, not hex codes
- ✓Compose small components into complex layouts
- ✓Test with keyboard and screen readers
- ✓Respect reduced-motion preferences
- ✗Override design tokens with arbitrary values
- ✗Nest cards more than two levels deep
- ✗Mix serif and sans-serif fonts in body text
- ✗Use color alone to convey meaning
- ✗Skip focus indicators for interactive elements