Ember Cream Pizzeria Modernism Design System

/emberCreamPizzeriaModernismDesignSystem
A refined UI system for premium hospitality, blending minimalist structure with rich culinary warmth. Heroic food imagery reigns, supported by soft palettes, bold typography, exquisite motion, and immaculate detail.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Ember Cream Pizzeria Modernism Design System

A design language for premium, modern hospitality interfaces driven by visual warmth, culinary elegance, and absolute structural clarity.

---

## Philosophy

> "Appetite is awakened by visual warmth; trust is secured through structural refinement."

This system creates digital environments that feel like stepping into a Michelin-recognized modern pizzeria—rich in atmosphere, immaculately clean, and effortlessly inviting. The design balances intense, mouth-watering photography against a minimalist, highly structured interface that stays entirely out of the way.

### Core Beliefs

1. **Image-led Impact** — High-fidelity culinary photography is the true hero. The interface exists solely to frame and elevate the imagery.
2. **Minimalist Hierarchy** — Contrast is created through extreme scale. Massive, confident headlines pair with highly compact, meticulously set body copy. 
3. **Warm Hospitality Polish** — Every element must feel deeply human and inviting. Hard blacks and stark whites are banned in favor of rich espressos and warm creams.
4. **Architectural Restraint** — Despite the warmth of the palette, the grid remains strict and spacious. Thin, precise dividers guide the eye without cluttering the canvas.
5. **Fluid Elegance** — Motion should feel like high-end editorial reveals—graceful fade-ups that exude confidence and luxury.

### Strict Rules

* **Photography Reigns Supreme** — Interface elements must never compete with food photography. Overlays must enhance, never muddy.
* **No Pure Blacks or Whites** — True black `#000000` and true white `#FFFFFF` are strictly forbidden. Depth and lightness are achieved through espresso and whipped cream tones.
* **Rounded and Softened Boundaries** — Sharp 90-degree angles are removed. All containers utilize soft, calculated border radii.
* **Tasteful Grain Only** — Texture is applied sparingly as a subtle visual noise to break digital sterility, never to simulate grunge.
* **Compact Body Copy** — Paragraphs remain small, dense, and perfectly leaded to allow headlines and photography maximum breathing room.

---

## Color Palette

### Base, Canvas & Accents

The palette moves away from tech-minimalism into organic, culinary warmth. "Whipped Cream" serves as the foundational canvas, grounded by "Espresso" typography. Bursts of "Roasted Tomato" and "Basil Green" provide essential culinary cues.

```css
/* Backgrounds (Lightest to Darkest) */
bg-whipped-cream      /* Main canvas background (#FDFBF7) */
bg-warm-stone-50      /* Secondary panels, subtle menu zones (#F4F2EC) */
bg-warm-stone-100     /* Default card containers, inactive states (#EBE9E4) */
bg-warm-stone-200     /* Hover states for secondary cards, UI backdrops (#DCDAD4) */

/* Borders & Dividers */
border-warm-stone-100 /* Ultra-thin section dividers (1px) */
border-warm-stone-200 /* Standard card borders, structural grids */
border-espresso/10    /* Elevated showcase borders */

/* Culinary Accents */
bg-roasted-tomato     /* Primary CTAs, active highlights, reservations (#C64127) */
text-roasted-tomato   /* Key interactive focus, primary branding hooks */
bg-ember-orange       /* Hover states, warm secondary highlights (#D97746) */
text-basil-green      /* Subtle fresh accents, dietary tags, success states (#3E5C46) */
bg-basil-green-50     /* Micro-backdrop for success/dietary badges */

/* Text Hierarchy (Warm Tonality) */
text-espresso-900     /* Primary hero headlines, key data (#2B221E) */
text-espresso-800     /* Secondary text, menu item names, buttons */
text-espresso-600     /* Body copy, story text, review paragraphs */
text-espresso-400     /* Muted metadata, hours, location hints, fine print */

```

### Gradients & Overlays

```css
/* Hero Gradient Overlay */
bg-gradient-to-b from-whipped-cream/10 to-espresso/80

/* Subtle Image Vignette */
bg-gradient-to-t from-espresso/40 to-transparent
```

---

## Typography

Typography pairs a sweeping, generous headline scale with ultra-compact, tightly leaded body copy. Refined sans families (*Theinhardt, Plain, Avenir Next, Switzer, Moderat,* or *Diatype*) are exclusively utilized.

### Font Weights

```css
font-normal      /* Core body copy, story paragraphs, review text */
font-medium      /* Navigation, standard CTAs, menu item names */
font-semibold    /* Hero headlines, primary section titles, confident pricing — MANDATORY for primary impact */

```

### Font Size Scale

```css
text-[11px]      /* Micro metadata, dietary tags, footer copyright */
text-xs          /* Location hints, hours of operation subtext (12px) */
text-sm          /* Compact body copy, menu descriptions, review quotes (14px) */
text-base        /* Standard navigation links, primary buttons (16px) */
text-lg          /* Menu item names, standard subheadings (18px) */
text-xl          /* Signature item callouts (20px) */
text-3xl         /* Secondary section headers (Story, Menu, Reviews) */
text-5xl-8xl     /* Clear, confident, premium hero headlines */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large hero headlines, confident large copy */
tracking-normal  /* Compact body copy */
tracking-wide    /* Navigational elements, CTAs */
tracking-widest  /* Tiny section pre-headers ("OUR STORY", "MENU") */

uppercase        /* Dietary badges, small pre-headers, micro-labels */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 7xl | semibold | whipped-cream | tight | none |
| Pre-Header | xs | medium | espresso-400 | widest | uppercase |
| Menu Item | lg | medium | espresso-900 | normal | none |
| Menu Desc. | sm | normal | espresso-600 | normal | none |
| Dietary Tag | [11px] | medium | basil-green | wide | uppercase |

---

## Animation System

### Core Philosophy: Framer-Level Fade-Up

Motion mimics the graceful opening of a physical menu or the unveiling of a dish. Elements do not pop or bounce; they rise smoothly from below, fading into clarity with precise easing.

### Page Sections & Content Reveal

```tsx
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}

```

### Image Hover States (Elegant Zoom)

Showcase imagery slightly scales up within its rounded container to simulate depth and interactivity without distorting the interface grid.

```tsx
className="transition-transform duration-700 ease-out hover:scale-105"

```

---

## UI Components

### Tasteful Grain Overlay

A deeply subtle SVG noise layer applied across the main whipped-cream canvas to provide tactile, print-like warmth without distracting from the content.

```tsx
<div className="pointer-events-none absolute inset-0 opacity-[0.03] mix-blend-multiply bg-[url('/noise.png')]" />

```

### Hero Gradient Mask

Allows the full-bleed hero photograph to strike an immediate impact while ensuring the clear, confident semibold headline remains perfectly legible.

```tsx
<div className="absolute inset-0 bg-gradient-to-b from-whipped-cream/20 via-transparent to-espresso/90 mix-blend-overlay" />

```

### The Horizontal Showcase Card

A signature structural element placed just beneath the hero section. Houses a wide horizontal feature image.

```tsx
<div className="w-full rounded-2xl border border-espresso/5 shadow-[0_8px_30px_rgb(43,34,30,0.04)] overflow-hidden bg-whipped-cream p-2">
  <img src="showcase.jpg" className="w-full h-auto rounded-xl object-cover" />
</div>

```

---

## Component Catalog

### Cards

Warm, perfectly rounded containers designed to frame culinary photography and story elements with subtle elegance.

```tsx
// Menu Preview Card
"bg-whipped-cream border border-warm-stone-100 rounded-2xl p-6 hover:shadow-lg hover:shadow-espresso/5 transition-all duration-500 ease-out"

// Review Card
"bg-warm-stone-50 rounded-xl p-8 border border-warm-stone-100/50 relative overflow-hidden"

```

### Buttons & CTAs

Simple pills or softened rectangles with elegant hover states that utilize the culinary accent colors.

```tsx
// Primary Booking Prompt (Pill)
"bg-roasted-tomato text-whipped-cream font-medium text-base rounded-full px-8 py-3.5 hover:bg-ember-orange hover:-translate-y-0.5 transition-all duration-300 shadow-sm"

// Secondary Action (Soft Rectangle)
"bg-whipped-cream border border-warm-stone-200 text-espresso-900 font-medium text-sm rounded-xl px-6 py-3 hover:border-espresso-900 transition-colors"

```

### Inputs

```tsx
// Reservation Input Field
"w-full px-5 py-3.5 rounded-xl bg-warm-stone-50 border border-warm-stone-100 text-espresso-900 placeholder-espresso-400 focus:outline-none focus:bg-whipped-cream focus:border-roasted-tomato focus:ring-1 focus:ring-roasted-tomato/20 transition-all"

```

### Badges & Dietary Indicators

```tsx
// Signature Item Highlight
"px-2.5 py-1 text-[11px] font-medium uppercase tracking-wide rounded-full bg-ember-orange/10 text-roasted-tomato"

// Dietary Tag (e.g., Vegan, Gluten-Free)
"px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide rounded bg-basil-green/10 text-basil-green border border-basil-green/20"

```

### Layout Structures

```tsx
// Thin Divider Grid
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8 divide-y md:divide-y-0 md:divide-x divide-warm-stone-100">
  {/* Content blocks */}
</div>

```

---

## Quality Checklist

* [ ] Is the hero image full-bleed with a correct cream-to-charcoal (espresso) gradient overlay?
* [ ] Are the main headlines huge, confident, and strictly using a `semibold` weight?
* [ ] Is the body copy compact (`text-sm`) to maximize contrast against the massive headlines?
* [ ] Are all pure blacks replaced with rich `espresso` values?
* [ ] Do all containers feature softened geometry (e.g., `rounded-xl`, `rounded-2xl`)?
* [ ] Are section dividers razor-thin (`border-warm-stone-100`)?
* [ ] Does the motion rely entirely on Framer-style fade-up reveals (`y: 24` to `y: 0`)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast, beautifully lit culinary photography taking up massive screen real estate.
* Warm "whipped cream" and "stone" backgrounds.
* Large semibold typography for confident brand positioning.
* Tasteful, highly transparent grain textures.
* Extremely spacious grids with minimal visual clutter.

### ✗ Not Allowed

* Harsh geometric corners or un-rounded squares.
* Heavy, opaque drop shadows (must be soft, low-opacity espresso blends).
* True black `#000000` text or backgrounds.
* Bright neon or tech-oriented accent colors (no electric blues, magentas, or bright yellows).
* Cramped text leading or oversized body paragraphs.