Cobalt Tide Trattoria Classicism

/cobaltTideTrattoriaClassicism
A cinematic design system evoking coastal Italian dining—editorial serifs, immersive maritime photography, and tactile, dusk-inspired color, marrying print heritage with fluid, refined digital interactions for upscale culinary interfaces.
0 likes
0 bookmarks
Jun 26, 2026
Design System Content
# Cobalt Tide Trattoria Classicism

A design language for sophisticated coastal culinary interfaces.

---

## Philosophy

> "The ocean dictates the rhythm; the layout frames the craft."

This system creates interfaces that feel like an evening at a premium coastal Italian restaurant—immersive, elegantly paced, and structurally cinematic. The design relies on dramatic photography, classic editorial typography, and a subdued maritime evening mood. It blends the heritage of print magazines with the fluid, tactile interactions of modern web polish.

### Core Beliefs

1. **Editorial elegance** — A strict division between expressive serif display typography and utilitarian sans-serif navigation creates a timeless magazine quality.
2. **Atmospheric immersion** — Full-width imagery and tall, cinematic aspect ratios anchor the layout, making the interface a window into the physical space.
3. **Tactile culinary polish** — Unlike brutalist or ultra-flat systems, this aesthetic embraces soft, high-quality shadows to lift image-led menu cards off warm parchment backgrounds.
4. **Subdued maritime evening** — The color palette avoids harsh pure whites and blacks, relying instead on deep ink navies and warm stones to evoke a dining room at dusk.
5. **Calm high-contrast** — Call-to-action elements command attention through stark value contrast (e.g., ink navy on warm parchment) rather than aggressive saturation.

### Strict Rules

* **No Pure Black or White** — Backgrounds must carry the warmth of parchment or pale stone; text must carry the depth of ink navy or glazed cobalt.
* **Strict Typeface Roles** — Serifs are exclusively for emotion (Hero headlines, dish names). Sans-serifs are exclusively for utility (nav, prices, CTAs). 
* **Soft Shadows Only on Photography** — UI structural elements remain flat; only image-led elements (like menu carousel cards) receive soft, cinematic drop shadows to indicate physical depth.
* **Asymmetric Storytelling** — Location and editorial sections must balance dense, atmospheric columns of text against tall, expansive photography.

---

## Color Palette

### The Maritime Evening Scale

The palette replaces stark tech-neutrals with organic, environmental hues. The canvas is warm and inviting, while the structural and text elements are deep and oceanic.

```css
/* Backgrounds & Canvases */
bg-parchment          /* Main canvas background, warm and inviting (#F5F2EB) */
bg-stone-100          /* Secondary panels, subtle section shifts (Pale Stone) */
bg-seafoam-50         /* Hover states for secondary items, ultra-light coastal tint */
bg-seafoam-100        /* Muted active states, subtle borders (Seafoam Gray) */
bg-ink-navy           /* Dark evening canvases, footer backgrounds (#0F172A) */

/* Structural Borders & Dividers */
border-champagne      /* Elegant, muted champagne dividers for menu sections */
border-stone-200      /* Default structural borders */
border-ink-navy/10    /* Ultra-subtle structural lines on light canvases */

/* The Accents (Culinary & Maritime) */
text-cobalt-600       /* Glazed Cobalt: Interactive focus, text links (#2563EB) */
bg-cobalt-600         /* Primary active states, key layout indicators */
text-tomato-700       /* Burnt Tomato: Warmth, special menu highlights, alerts (#B91C1C) */
text-olive-600        /* Basil Olive: Vegetarian tags, subtle organic metadata (#4D7C0F) */

/* Text Hierarchy */
text-ink-navy         /* Primary display text, hero headlines, dish names */
text-ink-navy/80      /* Secondary text, atmospheric body paragraphs */
text-ink-navy/60      /* Descriptive text, ingredients lists */
text-stone-500        /* Muted metadata, subtle UI labels */
text-parchment        /* Inverted text on dark ink navy buttons/backgrounds */
```

---

## Typography

The typographic system is a strict pairing of classic Italian editorial serifs (Canela, GT Sectra, Ivar Display, Tiempos, or Signifier) with highly legible, modern sans-serifs (ABC Favorit, Graphik, or Suisse Int’l). 

### Font Families

```css
font-serif       /* Display headlines, dish names, atmospheric pull-quotes */
font-sans        /* Small uppercase nav labels, buttons, prices, UI metadata */
```

### Font Weights

```css
font-light       /* Generous serif display headlines */
font-normal      /* Core body copy, sans-serif descriptions */
font-medium      /* Sans-serif CTAs, small uppercase nav labels */
font-serif-bold  /* Reserved strictly for emphasized dish names or bold pull-quotes */
```

### Font Size Scale

```css
text-xs          /* Small uppercase nav labels, dietary tags (12px) */
text-sm          /* Ingredient lists, refined price alignment, UI notes (14px) */
text-base        /* Atmospheric body paragraphs, standard UI text (16px) */
text-lg          /* Subheadings, secondary menu categories (18px) */
text-xl          /* Elegant dish names (20px) */
text-3xl         /* Standard editorial section headers */
text-5xl-7xl     /* Dramatic full-width hero display headlines */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large serif display headlines (brings characters into elegant tension) */
tracking-normal  /* Default reading text */
tracking-wider   /* Small uppercase nav labels and buttons */

uppercase        /* Navigation links, button labels, price currency, UI tags */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Hero Headline | Serif | 6xl | light | parchment (on img) | tight | none |
| Nav Labels | Sans | xs | medium | ink-navy | wider | uppercase |
| Dish Name | Serif | xl | normal | ink-navy | normal | none |
| Price | Sans | sm | medium | cobalt-600 | normal | none |
| CTA Button | Sans | xs | medium | parchment | wider | uppercase |

---

## Animation System

### Core Philosophy: The Coastal Tide

Animations should feel fluid, unhurried, and continuous, mimicking the gentle ebb and flow of evening tides. 

### Page & Image Reveals (Slow Fade & Rise)

Photography and large typographic elements ease in with a luxurious, slow-paced reveal.

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.33, 1, 0.68, 1] }} // Smooth, lingering ease
```

### Carousel Mechanics (Fluid Snap)

The horizontal menu carousel uses a frictionless scroll with a soft, magnetic snap to align image-led cards perfectly within the viewport.

```tsx
className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth hide-scrollbar"
// Child cards:
className="snap-start shrink-0 transition-transform duration-500 hover:scale-[1.02]"
```

---

## UI Components & Layouts

### The Hero Composition

A dramatic full-width location or dining image acting as the primary anchor. 

```tsx
<header className="relative w-full h-[85vh] bg-ink-navy flex flex-col justify-between">
  {/* Full-width Image Background */}
  <img src="/harbor-dusk.jpg" className="absolute inset-0 w-full h-full object-cover opacity-80 mix-blend-overlay" />
  
  {/* Small Uppercase Nav */}
  <nav className="relative z-10 flex justify-between p-8 text-parchment font-sans text-xs uppercase tracking-wider font-medium">
    <span>Cobalt Tide</span>
    <div className="flex gap-8">
      <a href="#menu">Menu</a>
      <a href="#reservations">Reservations</a>
    </div>
  </nav>

  {/* Generous Serif Display & Calm CTA */}
  <div className="relative z-10 p-8 pb-16 md:p-16 max-w-4xl">
    <h1 className="font-serif text-5xl md:text-7xl text-parchment font-light tracking-tight leading-tight mb-8">
      Coastal classicism, <br/>served by the harbor.
    </h1>
    <button className="bg-parchment text-ink-navy font-sans text-xs font-medium uppercase tracking-wider px-8 py-4 hover:bg-stone-100 transition-colors">
      Book a Table
    </button>
  </div>
</header>
```

### The Horizontal Menu Carousel

Directly beneath the hero. Image-led cards, soft shadows, elegant dish names, and refined price alignment.

```tsx
<section className="py-24 bg-parchment overflow-hidden">
  <div className="flex gap-8 px-8 md:px-16 overflow-x-auto snap-x pb-12">
    
    {/* Image-Led Card */}
    <article className="min-w-[320px] snap-start group cursor-pointer">
      <div className="aspect-[4/5] w-full overflow-hidden mb-6 shadow-xl shadow-ink-navy/5 bg-stone-100">
        <img src="/dish.jpg" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" />
      </div>
      <div className="flex justify-between items-baseline mb-2">
        <h3 className="font-serif text-xl text-ink-navy">Bucatini al Mare</h3>
        {/* Refined Price Alignment */}
        <div className="flex-grow border-b border-dotted border-stone-300 mx-4 opacity-50 relative top-[-4px]"></div>
        <span className="font-sans text-sm font-medium text-cobalt-600">$32</span>
      </div>
      <p className="font-sans text-sm text-ink-navy/60 line-clamp-2">
        Squid ink pasta, confit garlic, local clams, and a hint of burnt tomato.
      </p>
    </article>

  </div>
</section>
```

### The Immersive Location Section

Asymmetric layout balancing dense atmosphere with tall imagery.

```tsx
<section className="py-24 bg-stone-100 flex flex-col md:flex-row items-center gap-16 px-8 md:px-16">
  {/* Atmospheric Left Column */}
  <div className="flex-1 max-w-lg">
    <h2 className="font-serif text-3xl md:text-5xl text-ink-navy font-light mb-6">
      Where the tide meets the terrace.
    </h2>
    <p className="font-sans text-base text-ink-navy/80 leading-relaxed mb-8">
      {/* Immersive copy goes here */}
    </p>
    <button className="border border-champagne text-ink-navy font-sans text-xs uppercase tracking-wider px-8 py-4 hover:bg-champagne/10 transition-colors">
      View Directions
    </button>
  </div>

  {/* Tall Right-Aligned Photograph */}
  <div className="flex-1 w-full">
    <div className="aspect-[3/4] w-full md:w-4/5 ml-auto shadow-2xl shadow-ink-navy/10 overflow-hidden">
      <img src="/harbor-lights.jpg" className="w-full h-full object-cover" />
    </div>
  </div>
</section>
```

---

## Component Catalog

### CTAs & Buttons

Calm, high-contrast, strictly sans-serif and uppercase.

```tsx
// Primary High-Contrast CTA
"bg-ink-navy text-parchment font-sans text-xs font-medium uppercase tracking-wider px-8 py-4 hover:bg-cobalt-600 transition-colors"

// Secondary Muted CTA
"bg-transparent border border-champagne text-ink-navy font-sans text-xs font-medium uppercase tracking-wider px-8 py-4 hover:bg-seafoam-50 transition-colors"
```

### Culinary Badges

Subtle tags for dietary preferences or menu highlights.

```tsx
// Olive Vegetarian/Organic Tag
"font-sans text-[10px] uppercase tracking-wider px-2 py-1 bg-olive-600/10 text-olive-600 rounded-sm"

// Tomato Highlight/Special Tag
"font-sans text-[10px] uppercase tracking-wider px-2 py-1 bg-tomato-700/10 text-tomato-700 rounded-sm"
```

### Inputs & Reservations

Refined, editorial form fields mimicking print lines.

```tsx
// Elegant Bottom-Border Input
"w-full bg-transparent border-b border-champagne py-3 font-sans text-base text-ink-navy placeholder-stone-400 focus:outline-none focus:border-cobalt-600 focus:ring-0 transition-colors rounded-none"
```

---

## Quality Checklist

* [ ] Is the Hero section full-width with a generous, light-weight Serif display headline?
* [ ] Are all navigation links and buttons strictly small, medium-weight, uppercase Sans-Serif?
* [ ] Do image-led cards in the horizontal carousel utilize soft, cinematic drop shadows?
* [ ] Is price alignment handled gracefully (e.g., using a subtle dotted leader or strict right-alignment)?
* [ ] Does the Location section feature a tall, vertically-oriented (e.g., 3:4 aspect ratio) photograph on the right?
* [ ] Are the background colors exclusively warm (parchment, pale stone) or deep (ink navy), avoiding pure white/black?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Classic editorial serif and modern sans-serif typeface pairings.
* Deep ink navies and warm parchment backgrounds.
* Glazed cobalt and muted champagne for accents and borders.
* Soft, realistic drop shadows on photography and image cards.
* Dotted leader lines for menu pricing.
* Immersive, edge-to-edge photography in the hero.

### ✗ Not Allowed

* Pure #000000 black or pure #FFFFFF white.
* Sans-serif fonts for main display headlines or dish names.
* Serif fonts for small functional UI, prices, or navigation.
* Flat, unstyled imagery (images must have architectural framing or soft depth).
* Aggressive, high-velocity animations or bouncy spring physics.
* Heavy border-radius/rounded corners on major structural elements (keep containers crisp and editorial).