Design system
Components
Every visual atom hamburg uses. Reuse these — don't invent new ones.
Color
--brand-500
--accent-500
--highlight-500
--page
Type
.eyebrow
Section pre-header
.h1 · Fraunces 52
Cook. Learn. Remember.
.h2 · Fraunces 32
Milk becomes paneer
.h3 · Fraunces 20
Bring it to a slow boil
Buttons
Chips
Ingredient tile
The primary navigation atom on the home page.
Journey card
Horizontal card for a transformation journey.
Step card
Big number, minimal text, optional meta chips. Used on all journey pages and recipes.
Boil the milk 🔥
Medium heat. Big lazy bubbles = ready.
Kill the heat, wait 30 seconds ⏸
The "shivering point." Hot but not raging.
Stat tile
Ingredient hero
Dairy · fresh cheese
Paneer
Also: chhena
Pros / cons
Good for
- ✓ High-protein vegetarian meals
- ✓ Grilling, tikka, curries
Watch out
- ✗ Squeaky if boiled > 3 min
- ✗ Not vegan
Gradients
Category-tinted backgrounds for heroes and card headers.
.grad-dairy
.grad-vegetable
.grad-legume
.grad-grain
.grad-spice
.grad-herb
.grad-fruit
.grad-cream