Coastal Market Trattoria Design System

/coastalMarketTrattoriaDesignSystem
A Mediterranean-inspired UI system evoking a breezy, ingredient-led seaside market with warm palettes, tactile textures, confident typography, and polished, editorial photography-focused layouts.
0 likes
0 bookmarks
Jun 26, 2026
Design System Content
# Coastal Market Trattoria Design System

A design language for ingredient-led, Mediterranean-inspired culinary interfaces.

---

## Philosophy

> "Ingredients speak louder than ornament; warmth builds appetite."

This system creates interfaces that evoke a bustling seaside produce market or a sun-drenched coastal cafe—breezy, appetizing, and structurally inviting. The design balances world-class elegance with approachable warmth, relying on friendly typography, rich editorial photography, and tactile surfaces like subtle tile grids and woven linen over heavy or sterile digital motifs.

### Core Beliefs

1. **Hierarchy through scale and warmth** — Deep contrast between espresso-black typography and expansive market-cream canvases creates an inviting, premium feel. 
2. **The ingredient is the hero** — Layouts serve to frame large, editorial food photography. Design elements never compete with the produce.
3. **Tactile foundations** — Interfaces hint at physical spaces: subtle tile counters, striped awnings, and woven linen textures ground the digital experience in reality.
4. **Confident, airy structure** — High-end casual dining requires breathing room. Layouts remain breezy with staggered reveals that feel like opening a window to the coast.
5. **Polished interactions** — Hover states mimic the care of fine hospitality—smooth, deliberate image scaling and bright accent underlines that guide without rushing.

### Strict Rules

* **No Harsh Angles** — UI modules must be rounded to maintain an approachable, friendly proportion. 
* **Organic Palette Only** — Colors must be pulled strictly from the natural produce scale. No synthetic neons or default digital blues.
* **No Heavy Opaque Black** — True black is forbidden. Typography and deep shadows use "Espresso" to maintain warmth.
* **Disciplined Text Blocks** — Descriptive copy remains deeply compact to contrast with oversized, confident headlines.

---

## Color Palette

### Market Base & Produce Scale

The palette replaces stark digital whites and grays with warm, textural bases. Accents are drawn directly from fresh Mediterranean ingredients.

```css
/* Backgrounds (Canvas & Texture) */
bg-market-cream       /* Main canvas background, bright but warm (#FCFAF6) */
bg-flour-beige        /* Secondary panels, soft structural zones (#F2EFE8) */
bg-flour-beige/60     /* Subtle hover states for list items and tabs */
bg-terracotta-50      /* Warm tint for specialized ingredient callouts */

/* Borders & Lines */
border-flour-beige    /* Ultra-subtle divider lines, fine rule lines */
border-espresso/10    /* Default structural card borders */
border-terracotta/30  /* Hover states for secondary cards */
border-seafoam/40     /* Soft active boundaries */

/* Produce Accents (Used for buttons, underlines, and tags) */
text-tomato           /* Ripe Tomato: Primary interactive focus, main CTAs (#DE4A35) */
bg-tomato             /* Primary solid buttons, notification dots */
border-tomato         /* Bright accent underlines, active tab indicators */

text-basil            /* Basil Green: Secondary highlights, fresh tags (#456A49) */
bg-basil              /* Secondary solid pills, success states */

text-seafoam          /* Seafoam Blue: Location tags, coastal atmospheric elements (#7CAEB4) */
bg-seafoam            /* Atmospheric accents, striped awning motifs */

text-terracotta       /* Terracotta Clay: Warm accents, secondary buttons (#C86F54) */
bg-terracotta         /* Tertiary actions, structural highlights */

/* Text Hierarchy (Warm Espresso Scale) */
text-espresso-950     /* Primary text, oversized confident headlines (#2A221E) */
text-espresso-800     /* Secondary text, compact descriptive copy */
text-espresso-600     /* Tertiary info, ingredient lists, dietary tags */
text-espresso-400     /* Muted metadata, timestamps, subtle captions */

```

### Alert Actions (Allergens & Warnings)

```css
bg-tomato/10
text-tomato
border-tomato/30

```

---

## Typography

Typography relies on friendly proportions and disciplined hierarchy. Typefaces like Neue Montreal, Gabarito, Aperçu, Moderat, or ABC Favorit are used to balance casual approachability with world-class editorial structure. 

### Font Weights

```css
font-regular     /* Core body copy, compact descriptive descriptions */
font-medium      /* UI text, interactive labels, menu category tabs */
font-semibold    /* Subheadings, CTA buttons, ingredient tags */
font-bold        /* Oversized confident headlines — MANDATORY for hero text */

```

### Font Size Scale

```css
text-[11px]      /* High-density dietary tags, tiny localized metadata */
text-xs          /* Captions for smaller coastal/location photography (12px) */
text-sm          /* Compact descriptive copy, standard menu descriptions (14px) */
text-base        /* Standard category headers, button labels (16px) */
text-lg          /* Active menu item titles, sub-headlines (18px) */
text-2xl         /* Section breaks, localized location names */
text-4xl         /* Secondary page headlines */
text-5xl-7xl     /* Oversized confident hero headlines (Responsive) */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Oversized confident headlines, bringing characters closely together */
tracking-normal  /* Compact descriptive paragraph text */
tracking-wide    /* Simple category tabs, button labels */
tracking-widest  /* Ingredient callouts, micro dietary labels */

uppercase        /* Simple category tabs, tags, button labels */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Confident Hero Title | 6xl | bold | espresso-950 | tighter | none |
| Menu Item Title | lg | medium | espresso-950 | normal | none |
| Descriptive Copy | sm | regular | espresso-800 | normal | none |
| Category Tabs | base | medium | espresso-600 | wide | uppercase |
| Dietary Badges | [11px] | semibold | terracotta | widest | uppercase |

---

## Animation System

### Core Philosophy: The Coastal Breeze

Elements load sequentially, flowing upward like a gentle breeze off the water. Hover states feel polished, tactile, and deliberately smooth.

### Page Transitions (Staggered Scroll Reveals)

```tsx
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.6, ease: [0.33, 1, 0.68, 1], staggerChildren: 0.1 }}

```

### Micro-Interactions (Polished Image Hover)

When a user hovers over a menu carousel item, the dish photography softly scales up within its rounded module, while shadows deepen slightly.

```tsx
className="group overflow-hidden rounded-2xl"

// Image behavior inside the container
className="transition-transform duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:scale-105"

```

---

## UI Components

### The Split Hero Layout

A signature layout combining a massive headline, compact copy, and a dual-image architectural split (one large food editorial, one smaller coastal vibe shot).

```tsx
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-center min-h-[80vh]">
  <div className="col-span-5 space-y-6">
    <h1 className="text-7xl font-bold text-espresso-950 tracking-tighter leading-tight">
      Fresh from the market.
    </h1>
    <p className="text-sm text-espresso-800 max-w-sm">
      Hand-rolled pasta and wood-fired seasonal vegetables, sourced daily from the coastal farmers.
    </p>
    <Button className="bg-tomato text-market-cream">Reserve a Table</Button>
  </div>
  <div className="col-span-7 relative h-full w-full">
    {/* Large Editorial Food Image */}
    <div className="absolute top-0 right-0 w-4/5 h-[90%] rounded-3xl overflow-hidden shadow-soft">
       <Image src="/editorial-dish.jpg" fill className="object-cover" />
    </div>
    {/* Smaller Coastal Photograph */}
    <div className="absolute bottom-10 left-0 w-1/2 h-[45%] rounded-2xl overflow-hidden shadow-soft border-4 border-market-cream z-10">
       <Image src="/coastal-market.jpg" fill className="object-cover" />
    </div>
  </div>
</div>

```

### Menu Carousel

A horizontally scrollable lane of rounded modules featuring cropped dish photography and soft drop shadows. 

```tsx
<div className="flex gap-6 overflow-x-auto snap-x snap-mandatory py-8 px-4 hide-scrollbar">
  {menuItems.map(item => (
    <div className="min-w-[280px] snap-center bg-market-cream rounded-2xl p-4 shadow-[0_8px_30px_rgb(42,34,30,0.06)] border border-flour-beige hover:shadow-[0_12px_40px_rgb(42,34,30,0.1)] transition-shadow duration-300">
      <div className="aspect-square rounded-xl overflow-hidden mb-4">
        <img src={item.image} className="w-full h-full object-cover hover:scale-105 transition-transform duration-700" />
      </div>
      <h3 className="text-lg font-medium text-espresso-950">{item.name}</h3>
      <p className="text-sm text-espresso-600 mt-1">{item.ingredients}</p>
    </div>
  ))}
</div>

```

### Textured Backgrounds (Tile & Linen)

```tsx
// Subtle Tile Grid applied to structural parent containers
className="bg-market-cream bg-[url('/patterns/subtle-tile.svg')] bg-repeat"

// Woven Linen for feature cards
className="bg-flour-beige bg-[url('/patterns/linen-texture.png')] bg-cover mix-blend-multiply"

```

---

## Component Catalog

### Cards

Warm, rounded containers with fine rule lines and ultra-soft, diffused shadows.

```tsx
// Menu Category Card
"bg-market-cream border border-flour-beige rounded-2xl p-6 shadow-[0_4px_24px_rgb(42,34,30,0.04)]"

// Featured Produce Highlight (Textured)
"bg-flour-beige relative overflow-hidden rounded-2xl p-8 border border-terracotta/20"

```

### Buttons & Links

```tsx
// Primary Action Button
"bg-tomato text-market-cream font-semibold text-base rounded-full px-8 py-3 hover:bg-tomato/90 hover:scale-[1.02] transition-all active:scale-95 shadow-sm"

// Secondary Outline Button
"bg-transparent border-2 border-espresso-950 text-espresso-950 font-semibold text-base rounded-full px-8 py-3 hover:bg-espresso-950 hover:text-market-cream transition-colors"

// Inline Text Link (Bright Accent Underline)
"text-espresso-950 font-medium relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:bg-tomato hover:after:h-[4px] after:transition-all inline-block"

```

### Tabs & Navigation

```tsx
// Simple Category Tabs
<div className="flex space-x-8 border-b border-flour-beige">
  <button className="pb-4 text-base font-medium uppercase tracking-wide text-espresso-950 border-b-2 border-tomato">
    Mains
  </button>
  <button className="pb-4 text-base font-medium uppercase tracking-wide text-espresso-600 hover:text-espresso-950 transition-colors">
    Antipasti
  </button>
</div>

```

### Badges & Dietary Indicators

```tsx
// Fresh Ingredient Tag
"px-3 py-1 text-[11px] font-semibold uppercase tracking-widest rounded-full bg-basil/10 text-basil"

// Location/Coastal Tag
"px-3 py-1 text-[11px] font-semibold uppercase tracking-widest rounded-full bg-seafoam/15 text-seafoam"

```

---

## Quality Checklist

* [ ] Is the primary typography rendered in warm `espresso` rather than stark pure black?
* [ ] Are all UI containers and image masks fully rounded (`rounded-2xl` or `rounded-3xl`) to maintain friendly proportions?
* [ ] Does the hero section clearly split between an oversized confident headline and a dual-image architectural layout?
* [ ] Do text links feature bright accent underlines (Tomato/Seafoam) instead of traditional blue standard links?
* [ ] Are menu carousels utilizing cropped dish photography with polished, slow-scaling hover states?
* [ ] Did you implement staggered scroll reveals (`whileInView`) for sequential, breezy content loading?
* [ ] Is the descriptive copy highly compact, creating deliberate whitespace next to large headlines?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Market cream and flour beige backgrounds.
* Subtle, low-opacity tile grids and woven linen background textures.
* Soft, highly-diffused, warm espresso-toned shadows.
* Playful but disciplined type combinations (e.g., Neue Montreal).
* Generous use of editorial food and coastal photography.
* Striped awning motifs for loading states or feature breakpoints.

### ✗ Not Allowed

* Dark mode (interfaces should always remain bright, sunny, and cream-based).
* Sharp right-angle corners on images or containers.
* Pure black `#000000` or pure white `#FFFFFF`.
* Heavy gradients or harsh synthetic neons.
* Floating text directly over busy photography without a protective blur or linen tint.