Fresh Mozzarella Market Kitchen Design System

/freshMozzarellaMarketKitchenDesignSystem
A culinary UI design system inspired by bright, premium market kitchens, featuring editorial food photography, soft textures, generous spacing, appetizing color accents, and elegant tactile interactions.
0 likes
0 bookmarks
Jun 26, 2026
Design System Content
# Fresh Mozzarella Market Kitchen Design System

A design language for fresh, ingredient-led, and highly polished culinary interfaces.

---

## Philosophy

> "Ingredients speak loudest when the canvas is clean."

This system creates interfaces that feel like a modern, sunlit market kitchen—bright, appetizing, and structurally pristine without ever tipping into unrefined rusticity. The design feels organic yet highly polished, relying on airy whitespace, soft physical depth, and striking editorial food photography to create an environment that is welcoming and premium.

### Core Beliefs

1. **Hierarchy through imagery and air** — Large, crisp editorial food photography serves as the anchor, surrounded by vast, generous spacing that lets the ingredients breathe.
2. **Tactile but polished** — Soft, generous shadows, rounded corners, and a micro-subtle paper grain texture evoke a physical menu or fresh parchment without looking distressed.
3. **Appetizing color balance** — Neutral, creamy backdrops allow Basil Green and Tomato Red to act as organic, flavorful focal points.
4. **Friendly legibility** — Typography remains highly readable, utilizing premium, welcoming sans-serifs that bridge the gap between high-end dining and casual accessibility.
5. **Elegant motion** — Interactions mimic the gentle placement of a plate on a table—soft, upward fade-ins and smooth, fluid carousel scrolling.

### Strict Rules

* **No Distressed Elements** — Textures must be micro-subtle (like fine paper grain). No grunge, rough edges, or overt rusticity.
* **No Pure Black** — All heavy text and dark elements must use Ink Charcoal to maintain a soft, organic contrast.
* **Photography is Editorial** — Food imagery must be crisp, vividly lit, and cleanly isolated or beautifully staged. No dimly lit or heavily filtered photos.
* **Rounded Geometry Only** — Sharp corners are forbidden. Cards, buttons, and imagery containers must utilize smooth, generous border radii.
* **Restrained Accents** — Lemon Zest and Tomato Red are reserved strictly for tiny, appetizing highlights or specific dietary warnings, never as large background fills.

---

## Color Palette

### Organic Neutrals & Flavor Accents

The palette is rooted in soft, dairy-inspired neutrals and warm stones, contrasting against deep charcoal text. Interactive and highlight colors are drawn directly from fresh kitchen ingredients.

```css
/* Backgrounds (Lightest to Darkest) */
bg-mozzarella         /* Main canvas background, purest bright white (#ffffff) */
bg-cream-50           /* Secondary panels, subtle menu card backgrounds (#fdfbf7) */
bg-pistachio-50/50    /* Ultra-subtle hover states for interactive rows */
bg-stone-100          /* Muted container zones, opening hours blocks (#f3f1ec) */
bg-stone-200          /* Solid structural pills, inactive tabs, dividers */

/* Borders & Shadows */
border-cream-100      /* Ultra-subtle divider lines for story and location sections */
border-stone-200      /* Default structural borders for menu carousels */
border-green-200      /* Hover state boundaries for interactive elements */
shadow-soft-sm        /* Extremely diffuse, light gray-brown shadow for buttons */
shadow-soft-lg        /* Large, airy shadow for hero imagery and floating reservation blocks */

/* The Fresh Ingredients (Accents) */
text-basil-600        /* Primary interactive focus, main headlines (#2d6a4f) */
bg-basil-600          /* Primary call-to-action buttons (Reservations) */
border-basil-600      /* Focused input rings in reservation forms */
bg-basil-50           /* Subtle basil hover backdrops */

text-tomato-500       /* Highlights, special menu items, urgent UI tags (#e63946) */
bg-tomato-50          /* Warning or critical alert backgrounds */

text-lemon-400        /* Occasional micro-accents, star ratings, subtle flair (#f4d35e) */

/* Text Hierarchy */
text-charcoal-900     /* Primary hero text, main menu item names (#1a1c1a) */
text-charcoal-700     /* Secondary text, story body copy, supporting details */
text-stone-500        /* Descriptive text, ingredient lists, opening hours */
text-stone-400        /* Muted metadata, location hints, secondary icons */
```

### Destructive Actions (Cancellations)

```css
hover:bg-tomato-50
hover:text-tomato-600
hover:border-tomato-200
```

---

## Typography

The system utilizes premium, friendly geometric or grotesque sans-serifs (Moderat, ABC Favorit, Aperçu, Circular, or Basis Grotesque). Headlines are welcoming and smooth, while body copy prioritizes exceptional readability.

### Font Weights

```css
font-normal      /* Core body copy, story paragraphs, location details */
font-medium      /* Menu item titles, button actions, highlights */
font-semibold    /* Section headers (Menu Preview, Opening Hours), reservation labels */
font-bold        /* Strictly reserved for prices and critical dietary tags */
/* font-light is avoided to maintain a welcoming, accessible weight in the UI */
```

### Font Size Scale

```css
text-[11px]      /* Tiny dietary metadata (VG, GF), micro-labels */
text-xs          /* Ingredient sub-text, form helper notes (12px) */
text-sm          /* Standard supporting copy, opening hours table rows (14px) */
text-base        /* Main menu descriptions, story body copy (16px) */
text-lg          /* Card headlines, menu category headers (18px) */
text-xl          /* Sub-section titles (Highlights, Location) */
text-3xl         /* Standard page headers, reservation block titles */
text-5xl-7xl     /* Airy hero headlines (responsive) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large hero headlines to keep them friendly and cohesive */
tracking-normal  /* Default paragraph flow text for story and descriptions */
tracking-wide    /* Menu category headers, navigation links */
tracking-widest  /* Micro dietary tags and section eyebrow headers */

uppercase        /* Dietary tags, eyebrow headers, small reservation buttons */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6xl | medium | charcoal-900 | tight | none |
| Section Eyebrow| text-xs| semibold | basil-600 | widest | uppercase |
| Menu Item Name | text-lg| medium | charcoal-900 | normal | none |
| Ingredient List| text-sm| normal | stone-500 | normal | none |
| Item Price | text-base| bold | charcoal-900 | normal | none |

---

## Animation System

### Core Philosophy: The Elegant Unveil

Motion should feel like a perfectly plated dish being set gently on the table—smooth, deliberate, and settling softly into place.

### Page Transitions (Fade-Up Motion)

```tsx
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
```

### Micro-Interactions (Menu Carousel Snap & Card Lift)

When hovering over a menu card, it lifts gently with a soft shadow expansion. The menu carousel snaps fluidly to ensure crisp alignment of photography.

```tsx
// Card Hover Lift
whileHover={{ y: -4, scale: 1.01 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}

// Carousel Drag/Snap
drag="x"
dragConstraints={{ left: -1000, right: 0 }}
dragElastic={0.1}
```

---

## UI Components

### Subtle Paper Grain Texture

Applied globally to the main canvas to provide a high-end, tactile dining feel without looking rustic or dirty.

```css
.bg-paper-grain {
  background-color: var(--mozzarella);
  background-image: url('/assets/textures/micro-grain.png');
  background-blend-mode: multiply;
  opacity: 0.98;
}
```

### Menu Carousel Edge Mask

Prevents crisp photography from clipping harshly at the edge of the viewport, fading smoothly into the Mozzarella White background.

```tsx
<div 
  className="pointer-events-none absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-mozzarella to-transparent z-10"
/>
```

### Fine-Line Ingredient Illustrations

Delicate, single-weight line drawings used sparingly as watermarks in the "Story" or "Highlights" sections.

```tsx
<svg className="stroke-stone-300 stroke-[1px] fill-transparent w-48 h-48 opacity-50">
  <use href="#icon-basil-leaf" />
</svg>
```

---

## Component Catalog

### Cards

Rounded, friendly, and elevated by highly diffuse shadows. Used heavily in Menu Previews and Highlights.

```tsx
// Standard Menu Card (Crisp photo on top, content below)
"bg-cream-50 rounded-2xl overflow-hidden shadow-soft-sm border border-stone-100 hover:shadow-soft-lg transition-all duration-300"

// Reservation Block Card (Floating, highly polished)
"bg-mozzarella rounded-3xl p-8 shadow-soft-lg border border-stone-200 relative overflow-hidden"
```

### Buttons (The Simple CTA Pair)

```tsx
// Primary CTA (Reservation / Order - Basil Green)
"bg-basil-600 text-mozzarella font-medium text-base rounded-full px-8 py-3.5 hover:bg-basil-700 hover:shadow-md transition-all"

// Secondary CTA (View Menu / Location - Soft Cream)
"bg-cream-50 text-charcoal-900 font-medium text-base rounded-full px-8 py-3.5 border border-stone-200 hover:bg-stone-100 hover:border-stone-300 transition-all"
```

### Inputs & Reservation Form

```tsx
// Generous, rounded inputs for time/date/guest selection
"w-full px-5 py-3.5 rounded-xl bg-cream-50 border border-stone-200 text-charcoal-900 placeholder-stone-400 focus:outline-none focus:bg-mozzarella focus:border-basil-600 focus:ring-2 focus:ring-basil-600/20 transition-all"
```

### Badges & Dietary Tags

```tsx
// Standard Dietary Tag (Vegan, Gluten-Free)
"px-2.5 py-1 text-[11px] font-bold uppercase tracking-widest rounded-full bg-pistachio-50 text-basil-600 border border-green-200/50"

// Special Highlight (Chef's Special / New)
"px-2.5 py-1 text-[11px] font-bold uppercase tracking-widest rounded-full bg-tomato-50 text-tomato-500 border border-tomato-100"
```

### Opening Hours & Location Layouts

Clean structural alignment for logistical information.

```tsx
// Opening Hours Row
<div className="flex justify-between items-center py-3 border-b border-cream-100 last:border-0">
  <span className="font-medium text-charcoal-700">Tuesday - Friday</span>
  <span className="text-stone-500">11:00 AM — 10:00 PM</span>
</div>
```

---

## Quality Checklist

* [ ] Does the hero section feature a large, airy editorial food image with massive generous spacing?
* [ ] Is the primary typography utilizing a friendly, refined sans-serif (Moderat, Aperçu, etc.) instead of aggressive serifs or ultra-lights?
* [ ] Are all dark text elements utilizing `charcoal-900` or `charcoal-700` instead of pure `#000000`?
* [ ] Do all cards, buttons, and imagery containers have generous border radii (no sharp corners)?
* [ ] Are hover states utilizing soft, diffuse shadow lifts (`shadow-soft-lg`) rather than harsh, dark drop shadows?
* [ ] Is the paper grain texture kept micro-subtle so the UI still feels highly polished?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Mozzarella white and soft cream as dominant canvas backgrounds.
* Crisp, highly lit, meticulously styled editorial food photography.
* Basil green and pale pistachio for primary interactions and gentle row highlighting.
* Generous, airy padding inside the story, highlights, and reservation blocks.
* Delicate, single-weight line illustrations of ingredients.

### ✗ Not Allowed

* Distressed wood textures, chalkboard fonts, or overly rustic cafe tropes.
* Pure black backgrounds or text colors.
* Sharp, 0px border radii on buttons, inputs, or menu cards.
* Dense, cramped copy blocks without adequate line-height and padding.
* Large solid blocks of Tomato Red or Lemon Zest (use only for tiny accents/tags).