Mobile App
Theme System
Cookest brand design tokens and how they are applied in Flutter
The entire Cookest visual language is defined in lib/src/shared/theme/shadcn_theme.dart.
| Token | Hex | Usage |
|---|
sage | #7A9A65 | Primary actions, active nav, selected states, checkmarks |
darkGreen | #1C3A2A | Headings, screen titles, primary text |
background | #F8F8F6 | Every screen background |
surface | #FFFFFF | Cards, bottom sheets, dialogs |
textMuted | #6B7280 | Secondary text, metadata (times, ratings) |
textCaption | #9CA3AF | Captions, nav labels (inactive), placeholders |
amber | #D97706 | Expiry warnings, pantry alerts |
amberLight | #FFF8E7 | Alert strip background |
border | #E5E7EB | Input borders, dividers |
divider | #F0F0EE | Bottom nav separator, section dividers |
| Style | Font | Size | Weight | Usage |
|---|
| Display / Greeting | Playfair Display | 26px | Regular | Home screen greeting |
| Section header | Playfair Display | 18px | Regular | "What's cooking right now?" |
| App bar title | Playfair Display | 22px | Bold | Screen titles |
| Recipe title (card) | Playfair Display | 16–18px | Regular | Recipe names on cards |
| Body / List items | Inter | 14px | Regular | Ingredients, pantry items |
| Metadata | Inter | 13px | Regular | Cook times, ratings, categories |
| Caption | Inter | 12px | Regular | Empty states, helper text, nav labels |
| Button label | Inter | 14px | Medium | All buttons |
| Section header | Inter | 15px | SemiBold | "Breakfast", "Dairy", etc. |
Rule: Playfair Display appears only in the contexts listed above. All other text uses Inter.
BoxShadow(
color: Color(0x09000000), // rgba(0,0,0,0.035)
blurRadius: 12,
offset: Offset(0, 2),
)
Applied to: recipe cards, home screen feature card, modal bottom sheets. Nothing else.
ThemeData(
colorScheme: ColorScheme.light(
primary: Color(0xFF7A9A65), // sage
surface: Color(0xFFFFFFFF),
background: Color(0xFFF8F8F6),
onSurface: Color(0xFF1C3A2A),
),
cardTheme: CardTheme(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
appBarTheme: AppBarTheme(
elevation: 0,
backgroundColor: Color(0xFFF8F8F6),
),
)
| Interaction | Implementation | Duration |
|---|
| Card press | ScaleTransition to 0.97 | 80ms |
| Heart toggle | Scale animation + fill | 150ms |
| Nav icon switch | AnimatedSwitcher crossfade | 150ms |
| Nav label color | AnimatedDefaultTextStyle | 150ms |
| Delete swipe | Progressive opacity reveal | Drag-proportional |
| Meal plan generation | Staggered fade-in per slot | 80ms between slots |
| Snackbar confirmations | ScaffoldMessenger | Standard |
| Property | Value |
|---|
| Bar height | 64px + device safe area inset |
| Icon size | 22px (Lucide) |
| Label font | Inter 10px, below icon |
| Active state | Sage green filled icon + sage green label (#7A9A65) |
| Inactive state | #9CA3AF for both icon and label |
| Top separator | 1px #F0F0EE line |
| Bar shadow | None |
| Icon transition | AnimatedSwitcher crossfade 150ms |
| Label transition | AnimatedDefaultTextStyle 150ms |
| Context | Value |
|---|
| Horizontal screen padding | 20px (standard), 16px (list items) |
| Card padding | 12–16px |
| Section header top spacing | 16px |
| Section header bottom spacing | 8px |
| Border radius — pill chips | 20px |
| Border radius — cards | 16px |
| Border radius — smaller containers | 12px |
| Border radius — list item thumbnails | 10px |
| Input field border | 1px #E5E7EB, 10px radius |
| Input field focus outline | 1.5px sage green |
| State | Appearance |
|---|
| Active tab / day selector | 2px sage green underline — no filled background |
| Active category chip | Sage green fill + white text |
| Inactive category chip | White background + 1px #E5E7EB border + #6B7280 text |
| Interaction | Implementation | Duration |
|---|
| Button press | ScaleTransition to 0.97 | 80ms |
| Swipe-to-delete | Delete background opacity grows proportionally to swipe distance; reaches full colour at commit threshold | Drag-proportional |
| Heart / favourite toggle | Scale animation + fill transition | 150ms |
| Meal plan slot generation | Staggered fade-in, 80ms delay between each slot | Per slot |
| Cooking mode step transition | Slide + fade | — |