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.
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.
Preview