Flour & Fire Editorial Counter

/flourFireEditorialCounter
A modern, minimal design system for culinary brands, inspired by high-end magazines. It features cinematic photography, calm Manrope typography, and a palette echoing artisan kitchens, rejecting rustic or textured UI conventions.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Flour & Fire Editorial Counter

A design language for refined, editorial-grade culinary interfaces.

---

## Philosophy

> "Precision in the ingredients; poetry in the presentation."

This system creates digital experiences that mirror high-end contemporary food magazines and artisan kitchens. The interface should feel incredibly curated, relying on cinematic photography and precise, calm typography rather than rustic tropes. It rejects the heavy, textured, "chalkboard and reclaimed wood" aesthetic of traditional pizzerias in favor of modern, immaculate minimalism.

### Core Beliefs

1. **Hierarchy through cinematic scale** — Vast, full-width photography anchors the experience, juxtaposed with meticulously spaced, large-scale typography.
2. **Solid, quiet warmth** — Backgrounds remain untextured, relying on precise shifts between crisp white and warm off-white panels to create structure.
3. **Typography as architecture** — Using Manrope exclusively, the soft geometric precision of the letterforms provides all necessary decoration.
4. **Focused storytelling** — Content sits centrally in immersive, breathing layouts. If a page feels like a crowded menu board, it fails the aesthetic.
5. **Restrained accents** — Color serves the ingredients first. UI accents in red or green are used sparingly to call out critical details or conversions.

### Strict Rules

* **No Rustic Textures** — No wood grains, no chalkboard scribbles, no distressed borders. Backgrounds must be solid and light.
* **Manrope Exclusively** — Only the Manrope typeface is permitted to maintain the balance of geometric clarity and soft warmth.
* **Minimal Call-to-Actions** — Buttons should not scream for attention. They must be elegant, minimal, and integrated into the editorial flow.
* **No Heavy Drop Shadows** — Depth is created through full-bleed imagery and soft panel color transitions, never muddy shadows.
* **Photography is Paramount** — Images must be overhead compositions, oven-side action shots, or macro ingredient details, professionally lit and cinematic.

---

## Color Palette

### The Artisan Scale

The palette is built from natural, kitchen-inspired tones but applied with digital crispness. Backgrounds bounce between pristine flour white and warm parchment, while text relies on the deep, grounded tone of charred olive.

```css
/* Backgrounds (The Canvas) */
bg-flour-white          /* Main canvas background (#ffffff or #fdfdfc) */
bg-parchment-100        /* Off-white storytelling panels, centered blocks (#f7f4ee) */
bg-parchment-200        /* Subtle hover states, secondary menu zones (#ebe5da) */

/* Structural & Dividers */
border-parchment-300    /* Hairline dividers, menu grid borders (#dcd6cb) */
border-olive-200        /* Emphasized structural lines (#a3a79c) */

/* Typography & Core UI (Charred Olive) */
text-olive-900          /* Primary hero text, section headers, bold UI (#2a2e26) */
text-olive-800          /* Generous body copy, menu descriptions (#3d4237) */
text-olive-600          /* Editorial captions, metadata, subtle quotes (#606659) */
text-olive-400          /* Disabled states, ingredient callout lines (#8a9182) */

/* The Accents: Tomato & Basil */
text-tomato-600         /* Primary conversion hooks, highlight prices, hover states (#d9381e) */
bg-tomato-600           /* High-priority CTAs (Order Now), notification badges */
text-basil-600          /* Secondary highlights, vegan/vegetarian tags, subtle icons (#5b7053) */
bg-basil-50             /* Super subtle basil backgrounds for specific dietary callouts */

```

---

## Typography

Manrope is used exclusively. The scale is designed to mimic physical print magazines, with massive, calm headlines and generous, readable body copy.

### Font Weights

```css
font-light       /* 78-100px Hero headlines - conveys calm, confident editorial presence */
font-normal      /* 18-20px Generous body copy, immersive storytelling paragraphs */
font-medium      /* Menu item names, minimal CTA buttons, location block titles */
font-semibold    /* Section titles (34-46px), uppercase category labels, prices */

```

### Font Size Scale

```css
text-xs          /* Fine print, dietary footnotes (12px) */
text-sm          /* Editorial image captions, secondary ingredient lists (14px) */
text-base        /* Standard UI elements, navigation links (16px) */
text-lg-xl       /* Primary body copy, storytelling text (18px - 20px) */
text-2xl         /* Large customer quotes, menu sub-categories (24px) */
text-4xl-5xl     /* Section titles, centered narrative headers (34px - 46px) */
text-7xl-9xl     /* Hero headlines, primary brand statements (78px - 100px) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Hero headlines, pulling the geometric forms of Manrope together */
tracking-normal  /* Generous body copy for optimal reading flow */
tracking-widest  /* Elegant uppercase category labels, navigation elements */

uppercase        /* Category labels (e.g., "WOOD-FIRED", "ANTIPASTI"), menu headers */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 78-100px | light | olive-900 | tight | none |
| Section Title | 34-46px | semibold | olive-900 | tight | none |
| Category Label| 14-16px | semibold | olive-600 | widest | uppercase |
| Body Copy | 18-20px | normal | olive-800 | normal | none |
| Menu Item | 20px | medium | olive-900 | normal | none |

---

## Animation System

### Core Philosophy: Cinematic Stillness

Movements should emulate turning the glossy page of a magazine or the slow pan of a high-end food documentary. 

### Image Reveal (The Slow Breathe)

Full-width photography slowly scales down from a slight zoom while fading in, creating a cinematic settling effect.

```tsx
initial={{ opacity: 0, scale: 1.05 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 1.2, ease: [0.33, 1, 0.68, 1] }}

```

### Storytelling Scroll (Fade & Drift)

Centered storytelling panels drift upward softly as they enter the viewport.

```tsx
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.8, ease: "easeOut" }}

```

---

## UI Components

### Immersive Hero Layout

Pairs large calm typography with a cinematic image. The text floats with high contrast over flour white, with the image taking up the adjacent space or full-bleed backdrop.

```tsx
<header className="w-full min-h-[85vh] bg-flour-white flex flex-col justify-center px-8 lg:px-24">
  <h1 className="font-manrope font-light text-[78px] md:text-[100px] text-olive-900 leading-[0.9] tracking-tight">
    Handmade dough.<br/>Artisan fire.
  </h1>
  <div className="mt-12 w-full h-[60vh] overflow-hidden">
    <img src="overhead-pizza.jpg" className="w-full h-full object-cover" />
  </div>
</header>

```

### Centered Storytelling Panel

Off-white panels used to break up the flour-white canvas, housing generous 18-20px body copy.

```tsx
<section className="w-full bg-parchment-100 py-32 px-6 flex justify-center">
  <div className="max-w-3xl text-center space-y-8">
    <h2 className="font-manrope font-semibold text-[34px] md:text-[46px] text-olive-900">
      The Oven's Pulse
    </h2>
    <p className="font-manrope font-normal text-[18px] md:text-[20px] text-olive-800 leading-relaxed">
      // Story content here
    </p>
  </div>
</section>

```

### Editorial Hairline Divider

Used to separate menu categories or storytelling sections without creating heavy boxes.

```tsx
<hr className="w-full border-t border-parchment-300 my-16" />
<hr className="w-12 border-t-2 border-tomato-600 mx-auto my-8" /> /* Accent divider */

```

---

## Component Catalog

### Menu Grids

Clean, aligned, entirely devoid of card borders. Focuses on the typographic relationship between item, ingredients, and price.

```tsx
// Single Menu Item Row
<div className="flex items-baseline justify-between py-4 border-b border-parchment-300/50 group hover:bg-parchment-100/50 transition-colors">
  <div className="flex flex-col">
    <span className="font-manrope font-medium text-xl text-olive-900 group-hover:text-tomato-600 transition-colors">Margherita</span>
    <span className="font-manrope font-normal text-sm text-olive-600 mt-1">San Marzano DOP, fresh mozzarella, basil, olive oil</span>
  </div>
  <span className="font-manrope font-semibold text-lg text-olive-900 ml-8">$18</span>
</div>

```

### Minimal CTAs & Navigation

```tsx
// Primary Conversion (Polished Closing Section)
"inline-block bg-tomato-600 text-flour-white font-manrope font-medium text-base tracking-wide px-8 py-4 hover:bg-tomato-700 transition-colors"

// Secondary Navigation Link
"font-manrope font-medium text-base text-olive-900 uppercase tracking-widest hover:text-tomato-600 transition-colors pb-1 border-b border-transparent hover:border-tomato-600"

```

### Editorial Captions & Callouts

```tsx
// Image Caption
"font-manrope text-sm text-olive-600 italic mt-4 border-l border-parchment-300 pl-4"

// Ingredient Callout (Absolute positioned over imagery)
"absolute px-3 py-1 bg-flour-white/90 backdrop-blur-sm font-manrope text-xs font-semibold uppercase tracking-widest text-olive-900 shadow-sm"

```

### Customer Quotes

```tsx
// Large Editorial Quote Block
<blockquote className="max-w-4xl mx-auto text-center my-24">
  <p className="font-manrope font-light text-3xl md:text-5xl text-olive-900 leading-tight">
    "The most perfectly charred crust I have experienced outside of Napoli."
  </p>
  <cite className="block mt-8 font-manrope font-semibold text-sm uppercase tracking-widest text-olive-600 not-italic">
    — The Culinary Review
  </cite>
</blockquote>

```

---

## Quality Checklist

* [ ] Is the primary hero headline sized between `78px` and `100px`?
* [ ] Is the body copy a generous `18px` to `20px` for optimal readability?
* [ ] Are all backgrounds strictly solid (`flour-white` or `parchment-100`) without any rustic textures or noise overlays?
* [ ] Is the entire interface using the Manrope typeface?
* [ ] Are category labels elegantly styled with `uppercase` and `tracking-widest`?
* [ ] Does the page flow from full-width cinematic photography to centered storytelling on off-white panels?
* [ ] Are the dividers razor-thin (`border-parchment-300`) rather than thick structural blocks?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Immersive, edge-to-edge overhead pizza and oven photography.
* Vast areas of empty flour-white space surrounding text blocks.
* Hairline dividers to separate menu sections.
* Off-white (`parchment-100`) backgrounds for centered storytelling panels.
* Tomato red or muted basil used exclusively for critical prices, dietary tags, or primary conversion buttons.

### ✗ Not Allowed

* Distressed textures, wood grains, or chalkboard backgrounds.
* Multiple typefaces (strictly Manrope only).
* Heavy drop shadows or lifted card UI elements (menus should be flat and typographical).
* Crowded, multi-column text layouts (keep reading experiences central and wide).
* Bright, synthetic colors (e.g., neon green or electric blue).