Moonlit Marina Trattoria Editorial Design System

/moonlitMarinaTrattoriaEditorialDesignSystem
A cinematic, editorial design language for premium, dusk-lit culinary interfaces, inspired by exclusive seaside pizzerias. Focused on dramatic typography, rich contrasts, and evocative, tactile hospitality experiences.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Moonlit Marina Trattoria Editorial Design System

A design language for premium, dusk-lit culinary interfaces and cinematic dining experiences.

---

## Philosophy

> "Warmth in the hearth; calm in the tide."

This system creates interfaces that feel like stepping into an exclusive, low-light artisan pizzeria situated on a dramatic coastline. The design balances the roaring, inviting heat of a wood-fired oven with the serene, cool ambiance of the evening sea. It relies on monumental serif typography, rich but restrained colors, and immaculate editorial spacing to exude high-end hospitality.

### Core Beliefs

1. **Hierarchy through typographic tension** — The juxtaposition of oversized, deeply traditional serifs against razor-sharp, modern sans-serifs creates a timeless editorial feel.
2. **Cinematic contrast is structural** — Deep, light-absorbing navies and charcoals are punctuated by the soft glow of warm ivory and metallic brass, mirroring moonlight on the water and candlelight on tables.
3. **Motion is physical and deliberate** — Carousels snap with satisfying, weighted precision. Hover states evoke the gentle dimming of a lamp rather than a harsh digital flash.
4. **Photography is architecture** — High-end imagery (wood-fired crusts, low-light waves) dictates the spatial layout, particularly in dramatic split-compositions.

### Strict Rules

* **No True White** — Pure white `#FFFFFF` destroys the evening atmosphere. The lightest canvas shade must always be a warm, textural ivory.
* **Restrained Calls to Action** — Buttons never shout. They use refined outlines or subtle brass-gold fills, trusting the user's intent rather than demanding their attention.
* **No Artificial Shadows** — Depth is achieved through color blocking, image vignettes, and contrast rather than heavy, blurred drop shadows.
* **Oversized Hero Typography** — The primary focal point of the introduction must be massive serif lettering, acting as art rather than just text.

---

## Color Palette

### The Dusk-Lit Scale

The palette bridges the cool, deep tones of a seaside evening with the earthy, rich warmth of an Italian kitchen.

```css
/* Backgrounds & Canvas (Evening & Canvas) */
bg-marina-navy        /* Main evening canvas backdrop (#0A1118) */
bg-charcoal           /* Secondary dark panels, footer backgrounds (#1C1F24) */
bg-ivory              /* Primary light canvas for menus and reading areas (#F4F1EB) */
bg-ivory-muted        /* Subtle container zones on light canvas (#EAE5DC) */
bg-sea-salt           /* Cool, structural gray for borders and inactive states (#8F9BA8) */

/* Structural & Dividers */
border-marina-navy/20 /* Ultra-subtle dividers on ivory backgrounds */
border-sea-salt/30    /* Borders for dark mode / evening components */
border-brass/40       /* Elegant hairline separators for premium components */

/* Accents (The Hearth & The Candle) */
text-brass            /* Primary elegant highlight, star ratings, small accents (#C5A059) */
bg-brass              /* Primary call-to-action buttons (restrained usage) */
text-tomato           /* Warm culinary highlights, active dish indicators (#C15B46) */
bg-olive              /* Freshness tags, vegetarian badges, success states (#6B7554) */

/* Text Hierarchy - Evening/Dark Backgrounds */
text-ivory            /* Primary headings, hero text on navy */
text-ivory/80         /* Body copy, chef notes on navy */
text-sea-salt         /* Metadata, opening hours, muted details */

/* Text Hierarchy - Daylight/Ivory Backgrounds */
text-marina-navy      /* Primary headings, menu item names */
text-charcoal         /* Menu descriptions, review body copy */
text-charcoal/60      /* Ingredient lists, subtle form labels */

```

---

## Typography

The typography couples the romantic, editorial elegance of traditional serifs with the crisp, flawless utility of modern grotesques. 

**Primary Serif:** Canela, Cormorant Garamond, or Editorial New (for Display/Headings)
**Secondary Sans:** Satoshi or Figtree (for UI, Navigation, Forms, Data)

### Font Weights

```css
font-light       /* Massive hero typography, elegant dish names (Serif) */
font-normal      /* Storytelling paragraphs, reviews (Sans or Serif) */
font-medium      /* Navigation links, reservation inputs, menu prices (Sans) */
font-medium      /* Chef notes signatures, location headers (Serif italic) */
/* Bold weights are highly restricted, relying instead on font-size scaling */
```

### Font Size Scale

```css
text-xs          /* Form descriptions, dietary tags, ingredient lists (12px) */
text-sm          /* Body copy, navigation links, button labels (14px) */
text-base        /* Menu descriptions, review text (16px) */
text-lg          /* Menu item titles, standard section headers (18px) */
text-2xl         /* Sub-section headers, pull quotes from chef (24px) */
text-4xl         /* Primary section titles (Menu, Location, Reservations) */
text-6xl-8xl     /* Dramatic Hero Typography (Responsive, heavily scaled) */
```

### Letter Spacing & Transforms

```css
tracking-tighter /* Exclusively for massive Serif hero typography to create tension */
tracking-normal  /* Reading copy, menu descriptions */
tracking-wide    /* Navigation items, form labels */
tracking-widest  /* Tiny brass accent headers (e.g., "CHEF'S SELECTION") */

uppercase        /* Navigation labels, dietary badges, tiny accent headers */
italic           /* Serif exclusively: for romantic storytelling and chef signatures */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Title | Serif | 7xl | light | ivory | tighter |
| Accent Header | Sans | xs | medium | brass | widest |
| Menu Item | Serif | lg | normal | marina-navy | normal |
| Dish Price | Sans | sm | medium | brass | normal |
| Body Text | Sans | sm | normal | charcoal/80 | normal |

---

## Animation System

### Core Philosophy: The Cinematic Drift & Snap

Motion should mimic the dual nature of the restaurant: the slow, rolling drift of the tide, contrasted with the precise, tactile snap of high-end service.

### Page Transitions (The Cinematic Fade)

Elements emerge from the shadows smoothly, akin to eyes adjusting to a candlelit room.

```tsx
initial={{ opacity: 0, filter: 'brightness(0.5)' }}
animate={{ opacity: 1, filter: 'brightness(1)' }}
transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
```

### Carousel Motion (The Tactile Snap)

Horizontal menu carousels require satisfying physical friction. They do not glide endlessly; they snap to the next dish with intent.

```tsx
drag="x"
dragConstraints={{ right: 0, left: -width }}
dragElastic={0.1}
transition={{ type: "spring", mass: 0.8, stiffness: 250, damping: 25 }}
```

---

## UI Components

### The Split-Hero Layout

The definitive introduction to the experience. An asymmetrical split-screen framing the oversized serif typography. 

```tsx
<section className="flex flex-col md:flex-row h-screen bg-marina-navy">
  {/* Left: Low-light seaside atmosphere */}
  <div className="w-full md:w-1/2 relative overflow-hidden flex items-center justify-center p-12">
    <div className="absolute inset-0 bg-[url('/waves.jpg')] bg-cover opacity-40 mix-blend-luminosity" />
    <h1 className="font-serif text-7xl text-ivory tracking-tighter relative z-10">
      Moonlit<br/><span className="italic text-brass">Marina</span>
    </h1>
  </div>
  {/* Right: Wood-fired artisan photography */}
  <div className="w-full md:w-1/2 bg-[url('/pizza-oven.jpg')] bg-cover bg-center" />
</section>
```

### Horizontal Menu Carousel

Placed directly beneath the hero. It utilizes rounded image cards for dishes, elegant typography, and snapping behavior.

```tsx
<motion.div className="flex gap-6 overflow-x-hidden cursor-grab active:cursor-grabbing snap-x snap-mandatory px-8 py-12 bg-ivory">
  {/* Dish Card */}
  <div className="min-w-[300px] snap-center flex flex-col gap-4">
    <div className="w-full aspect-[4/5] rounded-2xl bg-charcoal overflow-hidden relative">
       <img src="/margherita.jpg" className="object-cover w-full h-full hover:scale-105 transition-transform duration-700" />
    </div>
    <div className="flex justify-between items-baseline px-2">
      <h3 className="font-serif text-lg text-marina-navy">Artisan Margherita</h3>
      <span className="font-sans font-medium text-sm text-brass">$22</span>
    </div>
    <p className="font-sans text-xs text-charcoal/60 px-2 line-clamp-2">San Marzano DOP, fresh mozzarella, torn basil, sea salt.</p>
  </div>
</motion.div>
```

---

## Component Catalog

### Buttons & CTAs

```tsx
// Primary Atmospheric CTA (Reservations / End of Page)
"bg-brass text-marina-navy font-sans font-medium text-sm tracking-wide uppercase px-8 py-4 rounded-none hover:bg-ivory transition-colors duration-500"

// Restrained Secondary Button (Menu Filters, Location)
"bg-transparent border border-sea-salt text-ivory font-sans font-medium text-xs tracking-wide uppercase px-6 py-3 rounded-full hover:border-brass hover:text-brass transition-all duration-300"
```

### Inputs (Reservation Flow)

Forms must feel like filling out a physical, high-stock concierge card.

```tsx
// Elegant Canvas Input
"w-full bg-transparent border-b border-marina-navy/20 text-marina-navy font-sans text-base py-3 placeholder-charcoal/40 focus:outline-none focus:border-brass transition-colors rounded-none"

// Date/Time Selector (Active)
"flex flex-col items-center justify-center border border-brass bg-brass/5 text-marina-navy rounded-lg p-3 cursor-pointer"
```

### Badges

Used strictly for culinary communication (dietary, chef recommendations).

```tsx
// Dietary Tag (Olive)
"font-sans text-[10px] uppercase tracking-widest text-olive border border-olive/30 px-2 py-1 rounded-full"

// Heat/Spice Tag (Muted Tomato)
"font-sans text-[10px] uppercase tracking-widest text-tomato border border-tomato/30 px-2 py-1 rounded-full"
```

### Content Blocks

```tsx
// Review/Testimonial Block
<div className="flex flex-col items-center text-center max-w-xl mx-auto py-16">
  <div className="flex gap-1 text-brass mb-6">★★★★★</div>
  <p className="font-serif italic text-2xl text-marina-navy leading-relaxed">"The warmth of the wood-fire juxtaposed with the salt of the sea breeze. A masterclass in atmosphere."</p>
  <span className="font-sans text-xs tracking-widest uppercase text-charcoal mt-6">— The Culinary Observer</span>
</div>
```

---

## Quality Checklist

* [ ] Is the primary hero layout an asymmetrical split featuring both wood-fired imagery and low-light coastline textures?
* [ ] Are all headlines using the approved serif fonts (Canela, Cormorant, or Editorial New) with tight tracking?
* [ ] Is the primary background canvas a warm Ivory rather than a harsh, pure white `#FFFFFF`?
* [ ] Do the menu carousels utilize strict `snap-mandatory` scroll physics?
* [ ] Are the UI buttons restrained, avoiding overly aggressive colors (using Brass or transparent outlines instead)?
* [ ] Does the reservation flow feel like a polished, high-end concierge form with minimal visual clutter?
* [ ] Are all prices and navigation items rendered in crisp, modern sans-serifs to contrast the serif headlines?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast juxtapositions of Midnight Navy and Warm Ivory.
* Mixing massive, italicized serif typography with tiny, tracked-out sans-serif labels.
* Full-bleed, edge-to-edge photography in hero and storytelling sections.
* Subtle, slow CSS scaling on image hovers to simulate breathing/drift.
* Rounded corners purely on menu/dish photography to soften the rigid grid layout.

### ✗ Not Allowed

* Pure white (`#FFFFFF`) or pure black (`#000000`).
* Drop shadows on cards or buttons (use layout and borders to define hierarchy).
* Bright, tech-focused system colors (no neon greens, bright blues, or standard warning reds).
* Center-aligned layout for the primary Hero (must be a dramatic split composition).
* Infinite, frictionless scrolling in the horizontal menu carousel (must snap).