Cherry Cream Neo-Trattoria Design System

/cherryCreamNeo-trattoriaDesignSystem
A pop-minimal culinary interface system blending bold food photography, tactile warmth, and Swiss-inspired typography to evoke the modern, energetic charm of a reimagined trattoria.
0 likes
0 bookmarks
Jun 26, 2026
Design System Content
# Cherry Cream Neo-Trattoria Design System

A design language for polished, pop-minimal culinary interfaces.

---

## Philosophy

> "Classic warmth served with contemporary energy."

This system creates interfaces that feel like a modern reimagining of a neighborhood trattoria—bold, appetizing, and tactile, yet distinctly uncluttered. The design relies on the tension between massive, mouth-watering photography and hyper-clean, Swiss-inspired neo-grotesque typography. It rejects the sterile minimalism of pure white tech interfaces, opting instead for a rich, dough-toned foundation punctuated by vibrant culinary accents.

### Core Beliefs

1. **Hierarchy through appetite and scale** — Oversized hero typography and edge-to-edge product photography command attention. The food is the anchor.
2. **Tactile digital warmth** — Interfaces should feel physical. Warm natural shadows, glossy interactive states, and subtle napkin-like textures replace flat, lifeless screens.
3. **Pop-minimal precision** — The canvas remains uncluttered. Navigation is reduced to the essentials to let the sensory elements—color, typography, and imagery—dominate.
4. **The Cherry Accent is the heartbeat** — Red is the color of appetite and urgency. It is used deliberately for primary actions (reservations) and focal points.
5. **Organic elegance in motion** — Transitions are fluid. Scrolling reveals content elegantly, and micro-interactions feature delicate, illustrative surprises.

### Strict Rules

* **No Pure White or Pure Black** — Pure white (#FFFFFF) is too harsh; always use Cream White. Pure black (#000000) is too digital; use Deep Espresso.
* **Rounded Geometry** — Sharp brutalist corners are strictly forbidden. All containers, buttons, and images utilize generous, friendly border radii.
* **Hero Photography is Unobstructed** — Never place heavy, opaque overlays over food photography. Let the imagery speak for itself.
* **Secondary Colors are Supporting Actors** — Olive Green and Parmesan Yellow exist only for ingredient notes, tags, and subtle micro-moments. They never compete with Cherry Tomato.
* **Centered or Offset Deliberation** — Hero typography must be either perfectly centered for classic symmetry or deliberately offset for modern editorial tension.

---

## Color Palette

### The Culinary Scale

The palette replaces traditional grays with toasted, earthy neutrals. Pure blacks are replaced by Deep Espresso, and pure whites by Cream White. The accents are rich and appetizing.

```css
/* Backgrounds (The Foundation) */
bg-cream-50           /* Main canvas background (#FDFBF7) */
bg-blush-50           /* Secondary sections, soft alternating bands (#FDF6F5) */
bg-dough-100          /* Default card containers, menu carousels (#F4EBE1) */
bg-dough-200          /* Hover states for cards, tactile active zones (#EADDCE) */

/* Borders & Dividers */
border-dough-200      /* Ultra-subtle divider lines */
border-dough-300      /* Structural borders for oversized product cards */
border-espresso-900/10 /* Hover boundaries, ingredient list separators */

/* The Primary Accent: Cherry Tomato */
text-cherry-600       /* Hero emphasis, active status hooks (#E63946) */
bg-cherry-600         /* Primary call-to-action (Reservation buttons) */
border-cherry-600     /* Focused inputs, critical selections */
bg-cherry-50          /* Subtle accent hover backdrops */

/* The Secondary Accents (Tags & Micro-Details) */
bg-olive-500          /* Vegetarian tags, fresh ingredient highlights (#6A7B53) */
text-olive-700        /* Ingredient list micro-typography */
bg-parmesan-400       /* Star ratings, premium callouts, special badges (#F4D35E) */

/* Text Hierarchy (Deep Espresso Scale) */
text-espresso-950     /* Primary hero typography, massive menu titles (#2B1D14) */
text-espresso-800     /* Standard body copy, ingredient descriptions (#4A3B32) */
text-espresso-600     /* Secondary text, elegant price styling (#6B5A4E) */
text-espresso-400     /* Muted metadata, footer links, placeholders (#9C8C7F) */
```

---

## Typography

Typography anchors the pop-minimal aesthetic. We utilize strong, contemporary neo-grotesques (Söhne, GT America, Graphik, Haffer, or Beausite Classic Sans). Headlines are massive and tightly tracked; micro-typography is highly refined.

### Font Weights

```css
font-medium      /* Primary body copy, menu descriptions, ingredient lists */
font-semibold    /* Action buttons, elegant price styling, small section labels */
font-bold        /* Large oversized product card titles */
font-black       /* Primary hero text, massive offset numbers */
/* font-light is avoided to maintain a punchy, contemporary brand energy */
```

### Font Size Scale

```css
text-xs          /* Refined microtypography, ingredient origin notes (12px) */
text-sm          /* Navigation links, secondary metadata (14px) */
text-base        /* Main menu descriptions, body copy (16px) */
text-xl          /* Clean price styling, tertiary subheads (20px) */
text-3xl         /* Oversized product card titles (30px) */
text-5xl         /* Carousel section headers (48px) */
text-7xl-9xl     /* Bold hero typography, perfectly centered or deliberately offset */
```

### Letter Spacing & Transforms

```css
tracking-tighter /* Hero typography, creating dense, impactful wordmarks */
tracking-tight   /* Product titles, carousel headers */
tracking-normal  /* Main body copy for maximum legibility */
tracking-widest  /* Refined microtypography, ingredient tags */

uppercase        /* Small tags, dietary badges, tertiary navigation */
capitalize       /* Menu items, primary buttons */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 8xl | black | espresso-950 | tighter | none |
| Menu Card Title | 3xl | bold | espresso-950 | tight | capitalize |
| Price Styling | xl | semibold | espresso-600 | normal | none |
| Body Copy | base | medium | espresso-800 | normal | none |
| Ingredient Tag | xs | semibold | olive-700 | widest | uppercase |

---

## Animation System

### Core Philosophy: Organic & Appetizing

Motion should feel tactile and human. Elements slide into place with elegant ease, avoiding robotic linearity. Small illustrative details bring the culinary experience to life.

### Elegant Scroll Transitions (Image Reveal)

Images and large type scale up subtly while fading in, mimicking the experience of a dish being placed on a table.

```tsx
initial={{ opacity: 0, y: 40, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }} // Custom spring-like cubic bezier
```

### Sliding Carousel Captions

When sliding through the menu carousel, the oversized card images snap into place while the ingredient notes and prices slide in with a slight delay.

```tsx
// Image Container
transition={{ type: "spring", stiffness: 300, damping: 25 }}

// Caption/Price Stagger
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.15, duration: 0.4, ease: "easeOut" }}
```

### Micro-Animated Ingredient Drawings

Hovering over an ingredient note triggers a subtle draw-in effect of a small, organic line drawing (e.g., a sprig of basil or a tomato).

```tsx
<motion.path
  initial={{ pathLength: 0 }}
  whileHover={{ pathLength: 1 }}
  transition={{ duration: 0.4, ease: "easeInOut" }}
/>
```

---

## UI Components

### Subtle Napkin Texture (The Canvas)

A noise overlay applied at a microscopic opacity to the main background, ensuring the Cream White feels like high-quality paper or linen rather than a digital void.

```tsx
<div className="pointer-events-none absolute inset-0 mix-blend-multiply opacity-[0.03]">
  <img src="/assets/textures/fine-linen-noise.png" alt="" className="object-cover w-full h-full" />
</div>
```

### Warm Natural Shadows

Shadows must look like physical objects lit by ambient restaurant lighting. They are diffused, tinted with Espresso, and never harsh.

```tsx
className="shadow-[0_20px_40px_-15px_rgba(43,29,20,0.15)]"
```

### The Glossy Reservation CTA

The primary button looks juicy and tactile, combining Cherry Tomato, a subtle inner glow, and a soft outer shadow.

```tsx
className="bg-cherry-600 text-cream-50 rounded-full px-8 py-4 font-semibold text-base shadow-[0_8px_20px_-6px_rgba(230,57,70,0.4)] ring-1 ring-inset ring-white/20 hover:scale-[1.02] hover:bg-cherry-500 transition-all active:scale-[0.98]"
```

---

## Component Catalog

### Oversized Menu Carousel Cards

Massive, edge-to-edge product photography housed within rounded rectangles. The bottom third contains the caption and clean price styling.

```tsx
<div className="relative overflow-hidden rounded-[32px] bg-dough-100 shadow-[0_20px_40px_-15px_rgba(43,29,20,0.1)] group">
  <img src="/pasta.jpg" className="w-full h-[400px] object-cover transition-transform duration-700 group-hover:scale-105" />
  <div className="absolute bottom-0 w-full p-6 bg-gradient-to-t from-dough-100 via-dough-100/90 to-transparent flex justify-between items-end">
    <div>
      <h3 className="text-3xl font-bold text-espresso-950 tracking-tight">Spicy Rigatoni</h3>
      <p className="text-sm font-medium text-espresso-600 mt-1">Calabrian chili, vodka, parmesan</p>
    </div>
    <span className="text-xl font-semibold text-espresso-950">$24</span>
  </div>
</div>
```

### Inputs & Forms

Forms feel like premium stationery. No floating labels, just bold, clear typography inside tactile inputs.

```tsx
// Reservation Input Field
"w-full px-5 py-4 rounded-2xl bg-cream-50 border-2 border-dough-200 text-espresso-950 font-medium placeholder-espresso-400 focus:outline-none focus:border-cherry-600 transition-colors shadow-sm"
```

### Ingredient Notes & Tags

Pill-shaped badges that utilize the secondary palette to break up the espresso text.

```tsx
// Dietary Badge (e.g., Vegetarian)
"px-3 py-1 text-xs font-semibold uppercase tracking-widest rounded-full bg-olive-500 text-cream-50"

// Ingredient Highlight (e.g., "House-made")
"px-3 py-1 text-xs font-semibold uppercase tracking-widest rounded-full bg-parmesan-400 text-espresso-950"
```

---

## Quality Checklist

* [ ] Is the primary background strictly `bg-cream-50` rather than pure white?
* [ ] Does the hero typography use extremely tight letter-spacing (`tracking-tighter`)?
* [ ] Are all primary buttons using the glossy Cherry Tomato treatment with a subtle `ring-inset`?
* [ ] Do all product cards feature large, generous border radii (minimum `rounded-2xl` or `rounded-[32px]`)?
* [ ] Are the drop shadows tinted with warm Espresso (`rgba(43,29,20,...)`) rather than default muddy grays/blacks?
* [ ] Is the navigation minimal enough that the food photography is the absolute focal point of the page?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Cream, dough, and soft blush backgrounds to build warmth.
* Massive, uncropped lifestyle and food photography.
* Smooth, spring-based scroll transitions and carousel slides.
* Delicate, hand-drawn ingredient line graphics integrated into hover states.
* Deliberately offset, asymmetrical layouts for large typography.

### ✗ Not Allowed

* Pure digital white (`#FFFFFF`) or pure hex black (`#000000`).
* Sharp, 0px border-radius corners on cards or buttons.
* Flat, dead primary buttons with no hover state or shadow.
* Heavy text overlays that obscure the food photography.
* A cluttered, multi-layered primary navigation bar (keep it hidden or extremely minimal).