DORMANT — future redesign plan for GroceryGenius using the Bright Kitchen design system. Do NOT invoke for routine UI changes. Only invoke if the user explicitly says they are ready to implement the full Bright Kitchen redesign.
⚠️ DORMANT — NOT IMPLEMENTED
The Bright Kitchen design system described below is a future redesign plan that has never been applied to the live app.
The actual live app uses:
- Background:
linear-gradient(135deg, #667eea 0%, #764ba2 100%)(purple-blue gradient)- Cards:
rgba(255, 255, 255, 0.95)white- Font:
system-ui, -apple-system, sans-serif- Accent:
#8b5cf6(purple),#10b981/#059669(green CTA),#ef4444(red/error)Do not apply any Bright Kitchen styles (CSS variables, Bricolage Grotesque, tomato/parchment palette) unless the user explicitly says they want the full redesign.
For routine UI work, match the live app's existing hex colors and
system-uifont stack.
When the user explicitly asks to begin the Bright Kitchen redesign, work through the checklist below in order. For each component: implement desktop styles, then immediately handle mobile overrides.
GroceryGenius is a smart grocery and meal planning app that feels like a beloved, dog-eared cookbook crossed with a modern food startup: warm, food-credible, confident, and genuinely useful.
Set these CSS custom properties in frontend/src/index.css. They are the single source of truth — every component uses them via var(--gg-*).
:root {
/* Primary */
--gg-tomato: #e8391a;
--gg-tomato-hover: #c42f14;
--gg-tomato-subtle: rgba(232, 57, 26, 0.08);
/* Backgrounds */
--gg-parchment: #fdf6ec;
--gg-cream: #fff8f0;
/* Text */
--gg-espresso: #1c1208;
--gg-taupe: #7a6652;
/* Borders */
--gg-border: #eddecb;
--gg-border-strong: #d4b896;
/* Semantic */
--gg-forest: #2d6a4f;
--gg-forest-light: #e8f5ee;
--gg-amber: #e8962a;
--gg-amber-light: #fef3dc;
--gg-red: #c0392b;
--gg-red-light: #fde8e6;
/* Depth */
--gg-radius-sm: 6px;
--gg-radius-md: 10px;
--gg-radius-lg: 14px;
--gg-radius-xl: 20px;
--gg-shadow-sm: 0 2px 8px rgba(28, 18, 8, 0.06);
--gg-shadow-md: 0 4px 16px rgba(28, 18, 8, 0.10);
--gg-shadow-lg: 0 8px 32px rgba(28, 18, 8, 0.14);
}
Replace all occurrences of these old values with the tokens above:
| Old value | Replace with |
|---|---|
#10b981, #059669 | var(--gg-forest) or var(--gg-tomato) depending on context |
#ED8B00, #f59e0b, #d97706 | var(--gg-amber) |
#667eea, #764ba2, purple gradients | var(--gg-parchment) background |
rgba(16, 185, 129, ...) | equivalent with --gg-tomato or --gg-forest |
#EF3340, #ef4444 | var(--gg-tomato) (heart/favorite) or var(--gg-red) (error) |
#3b82f6, #2563eb (info blue) | var(--gg-espresso) for info toasts |
Add to frontend/index.html <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],400;12..96,600;12..96,700;12..96,800&family=Lato:wght@400;700&display=swap" rel="stylesheet">
| Role | Font | Weight | Use |
|---|---|---|---|
| Display | Bricolage Grotesque | 800 | Page titles, recipe names, hero text |
| Heading | Bricolage Grotesque | 700 | Card titles, section headers, nav items |
| UI label | Bricolage Grotesque | 600 | Buttons, badges, tab labels, tags |
| Body | Lato | 400 | Descriptions, metadata, input text |
| Bold body | Lato | 700 | Nutrition values, stats, emphasized data |
Replace all system font stacks (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) with:
'Bricolage Grotesque', sans-serif — headings, buttons, nav, badges, tabs'Lato', sans-serif — body, captions, inputs, metadataSet in index.css:
body {
font-family: 'Lato', sans-serif;
background-color: var(--gg-parchment);
color: var(--gg-espresso);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Bricolage Grotesque', sans-serif;
color: var(--gg-espresso);
}
Work through each item in this exact order. Check it off as you go. Do not skip ahead.
frontend/src/index.css — paste full :root CSS variables block above; update body and h1-h6 defaultsfrontend/index.html — add Google Fonts <link> tagsfrontend/src/App.css — replace any hardcoded color values with tokensDesktop Navigation / Sidebar
var(--gg-espresso) — dark sidebar anchors the warm parchment pagergba(255,255,255,0.65); active item: var(--gg-tomato) 3px left border + full white textrgba(255,255,255,0.08) backgroundrgba(255,255,255,0.1)Mobile Header
var(--gg-espresso)Mobile Drawer
var(--gg-espresso) background as desktop sidebarFloating Action Button (mobile)
var(--gg-tomato), hover var(--gg-tomato-hover)var(--gg-shadow-lg) with tomato tint: 0 8px 24px rgba(232,57,26,0.35)For each component below — complete desktop styles, then immediately add mobile overrides.
frontend/src/components/Auth.tsx)Desktop:
var(--gg-parchment) — remove purple gradient entirelybackground-image: url("data:image/svg+xml,...") or opacity: 0.03 grain) for tactile warmthvar(--gg-radius-xl), var(--gg-shadow-lg), 1.5px solid var(--gg-border)var(--gg-espresso), large (2.5rem+)var(--gg-taupe)var(--gg-espresso), small (0.8rem)var(--gg-cream) background, 1.5px solid var(--gg-border), var(--gg-radius-md), Lato 400, var(--gg-espresso) textvar(--gg-tomato), box-shadow 0 0 0 3px var(--gg-tomato-subtle)references/attract-button-adapted.mdvar(--gg-tomato) text, Lato 700, underline on hoverMobile:
frontend/src/components/RecipeCard.tsx)Desktop:
var(--gg-cream) background, 1.5px solid var(--gg-border), var(--gg-radius-lg), var(--gg-shadow-sm)var(--gg-shadow-md), border var(--gg-border-strong), lift translateY(-2px)var(--gg-espresso), 1.3rem, letter-spacing -0.5pxvar(--gg-espresso), 0.85rem, with thin var(--gg-border) bottom border, letter-spacing 0.5px, text-transform uppercasevar(--gg-taupe), 0.85remvar(--gg-tomato) border + text, var(--gg-tomato-subtle) background, var(--gg-radius-xl)var(--gg-espresso); labels: Lato 400, var(--gg-taupe)var(--gg-forest) background, white textvar(--gg-forest) at 80% opacityvar(--gg-amber) background, white textvar(--gg-red) background, white textvar(--gg-forest-light) or var(--gg-amber-light) background tintvar(--gg-tomato)Mobile:
frontend/src/components/RecipeList.tsx)Desktop:
var(--gg-espresso), 2remvar(--gg-taupe)var(--gg-taupe) body, Bricolage Grotesque 700 headingreferences/particle-button-adapted.md
var(--gg-tomato), white text, Bricolage Grotesque 600Sparkles or ChefHat from lucide-react (remove MousePointerClick)Mobile:
frontend/src/components/IngredientInput.tsx)Desktop:
var(--gg-cream) background, 1.5px solid var(--gg-border), var(--gg-radius-md), Lato 400, var(--gg-espresso) text, font-size 16pxvar(--gg-tomato) border, var(--gg-tomato-subtle) background glowlinear-gradient(135deg, var(--gg-tomato), var(--gg-tomato-hover)), white text, Bricolage Grotesque 600, var(--gg-radius-xl)rgba(255,255,255,0.6) on hovervar(--gg-taupe)Mobile:
frontend/src/components/IngredientSubstitution.tsx)Desktop:
var(--gg-cream) card, 1.5px solid var(--gg-border), var(--gg-radius-lg)var(--gg-espresso)var(--gg-forest) textvar(--gg-taupe)Mobile: Full-width, stacked layout, same spacing as desktop but 16px padding
frontend/src/components/MealPlanCalendar.tsx)Desktop:
var(--gg-cream) background, var(--gg-border) border, var(--gg-radius-lg)var(--gg-espresso)var(--gg-taupe), letter-spacing 1px, uppercasevar(--gg-border) bordervar(--gg-tomato) 2px border, var(--gg-tomato-subtle) backgroundvar(--gg-parchment) background, var(--gg-border) border, var(--gg-radius-md)var(--gg-espresso), 0.8remvar(--gg-tomato) text + 1.5px border, var(--gg-radius-md), Bricolage Grotesque 600; hover: fills tomato, white textvar(--gg-tomato) dashed border, var(--gg-tomato-subtle) backgroundvar(--gg-taupe), hover var(--gg-tomato)Mobile:
frontend/src/components/SmoothTab.tsx)Desktop only — hide on mobile: add @media (max-width: 768px) { .smooth-tab-root { display: none; } }
See references/smooth-tab-adapted.md for the full adapted implementation to replace the current file with.
Key changes from the KokonutUI original:
var(--gg-cream), border var(--gg-border)var(--gg-espresso) background (dark pill on cream toolbar — high contrast)var(--gg-taupe), hover var(--gg-espresso)var(--gg-cream) background, var(--gg-border) bordervar(--gg-tomato) (all tabs use tomato wave)color props: use --gg-espresso for the active pill (not blue/purple/emerald/amber)frontend/src/components/ParticleButton.tsx)See references/particle-button-adapted.md for the adapted implementation.
Key changes:
#e8391a (tomato), #2d6a4f (forest), #e8962a (amber), #eddecb (border/cream)h-1.5 w-1.5 for visibility on parchment backgroundsvar(--gg-tomato) background, white text, Bricolage Grotesque 600, var(--gg-radius-md)var(--gg-tomato-hover) backgroundMousePointerClick icon with Sparkles or ChefHat from lucide-reactPlacement: Wrap these buttons with ParticleButton:
frontend/src/components/AttractButton.tsx)See references/attract-button-adapted.md for the adapted implementation.
Key changes:
violet-* Tailwind classesvar(--gg-tomato) background, white text, border var(--gg-tomato-hover)#fdf6ec (parchment — visible against tomato background)Magnet with LogIn from lucide-reactAuth.tsxfrontend/src/components/Toast.tsx)linear-gradient(135deg, var(--gg-forest), #1e4d38), white textlinear-gradient(135deg, var(--gg-red), #96271f), white textlinear-gradient(135deg, var(--gg-amber), #c47a1e), white textlinear-gradient(135deg, var(--gg-espresso), #3a2a1a), white textrgba(255,255,255,0.85)var(--gg-radius-lg)var(--gg-shadow-lg)frontend/src/components/FavoriteHeartButton.tsx)var(--gg-border-strong), transparent fillvar(--gg-tomato) (replaces #EF3340)var(--gg-tomato), var(--gg-amber), var(--gg-forest)var(--gg-tomato) at 60% opacity, subtle scale 1.1frontend/src/components/SlideTextButton.tsx)var(--gg-espresso) text, 1.5px solid var(--gg-espresso) border, transparent backgroundvar(--gg-tomato) fills from left, white textvar(--gg-radius-md)frontend/src/components/MouseEffectCard.tsx)var(--gg-cream)1.5px solid var(--gg-border)var(--gg-radius-lg)rgba(232, 57, 26, 0.06) (tomato)var(--gg-shadow-md)var(--gg-shadow-sm)frontend/src/components/LanguageSwitcher.tsx)var(--gg-cream) background, var(--gg-border) border, var(--gg-radius-md), Lato 700, var(--gg-espresso) textvar(--gg-cream) background, var(--gg-border) border, var(--gg-shadow-md), var(--gg-radius-md)var(--gg-tomato) text, Bricolage Grotesque 600var(--gg-parchment) backgroundfrontend/src/mobile.css
background: var(--gg-tomato), shadow with tomato tintvar(--gg-cream) background, var(--gg-espresso) drag handle dotfrontend/src/mobile-responsive.css
#10b981, #ED8B00, #667eea values → replace with tokensRun this grep — it should return zero results when the redesign is complete:
grep -rn "#10b981\|#059669\|#ED8B00\|#f59e0b\|#667eea\|#764ba2\|BlinkMacSystemFont\|'Segoe UI'\|Roboto\b" frontend/src/
Visual checklist:
These aren't rules to follow mechanically — they're the reasoning behind why the design looks good. Understanding them lets you make better decisions on edge cases:
Parchment ≠ white. The page background is warm and papery. Cards (--gg-cream) are slightly lighter so they lift off the page. Don't use pure #ffffff as a page background.
Tomato is for action, not decoration. It's a strong, warm red. Reserve it for: primary CTAs, active tab states, focus rings, health badges, and the heart button. Scattering it everywhere cheapens it.
Bricolage Grotesque earns its weight at 800. Use 800 for the most important text on screen (recipe names, page titles). Use 700 for section headers. Use 600 for UI labels. Don't use 800 everywhere — it loses impact.
Forest green is deeper and more culinary than emerald. The old #10b981 reads as "tech success." #2d6a4f reads as "fresh basil." Use forest for health grades, success states, and "healthy" tags — not for general CTAs.
Espresso sidebar is the anchor. The dark navigation against the warm parchment body creates the visual identity. It's the boldest design decision — don't lighten it.
Every mobile component is a first-class citizen. Check: fonts ≥ 16px in inputs, touch targets ≥ 44px, no horizontal overflow, hover states don't break on touch.
references/design-tokens.md — complete CSS variables block, ready to pastereferences/smooth-tab-adapted.md — full GroceryGenius-adapted SmoothTab implementationreferences/particle-button-adapted.md — full GroceryGenius-adapted ParticleButton implementationreferences/attract-button-adapted.md — full GroceryGenius-adapted AttractButton implementation