Salt-Air Italian Gallery

/saltairItalianGallery
A premium design system evoking art galleries, using editorial typography, natural palettes, and cinematic pacing to elevate culinary digital experiences with Italian coastal restraint and luxurious space.
Jul 10, 2026
Design System Content
# Salt-Air Italian Gallery Design System

A design language for premium, gallery-like culinary interfaces.

---

## Philosophy

> "Ingredients breathe. Interfaces should too."

This system treats the digital restaurant experience as an immersive, high-end art gallery. Food, coastal imagery, and typography are composed with museum-level restraint. By marrying the raw, natural beauty of the coastline with precise, elegant structure, the interface feels expansive, curated, and undeniably premium.

### Core Beliefs

1. **Editorial Scale** — Expansive whitespace and dramatic typographic sizing transform standard web pages into editorial spreads.
2. **Food as Curated Art** — Menu items are not merely listed; they are displayed like sculptures on a plinth, demanding individual attention and respect.
3. **High-Contrast Harmony** — The tension between expressive, high-contrast serifs and strictly functional, understated sans-serifs drives the visual rhythm.
4. **Cinematic Pacing** — Motion is never rushed. Elements reveal themselves slowly and fluidly, emulating the steady roll of an ocean wave or a tracking shot in a film.
5. **Elemental Color** — The palette avoids synthetic hues entirely, relying exclusively on colors drawn from the physical environment: warm sand, deep ocean, stone, clay, and sage.

### Strict Rules

* **No Cluttered Grids** — Menu items and images require massive breathing room. Elements should never fight for attention.
* **Serifs for Emotion, Sans for Function** — High-contrast serifs are strictly for storytelling, headers, and hero moments. Sans-serifs handle all functional UI, data, and reservations.
* **Strict Palette Adherence** — Terracotta is the sole color for calls-to-action. Sage green is exclusively for micro-accents. No exceptions.
* **No Pure White or Pure Black** — Backgrounds must carry the warmth of off-white paper or stone. Typography anchors in deep charcoal to reduce digital harshness.
* **Full-Bleed Commitment** — Hero imagery must span the entire viewport to establish the environmental context immediately.

---

## Color Palette

### The Coastal Scale

The palette transitions from warm gallery walls to the deep abyss of the marine coastline. UI elements use natural, earthy accents.

```css
/* Backgrounds (Lightest to Darkest) */
bg-warm-white         /* Main canvas, gallery walls (#FAF9F6) */
bg-stone-50           /* Secondary subtle panels (#F4F4F0) */
bg-stone-100          /* Image placeholders, muted reservation cards (#EBEBE8) */
bg-marine-800         /* Secondary dark sections, footer (#162A3B) */
bg-marine-900         /* Deep storytelling panels, high-contrast backdrops (#0B1622) */

/* Borders */
border-stone-200      /* Pale stone dividers, delicate structural lines */
border-stone-300      /* Hover states for interactive gallery cards */
border-marine-700     /* Borders on dark marine panels */

/* The Anchors: Terracotta & Sage (Accents) */
bg-terracotta-600     /* Primary action buttons, reservation CTAs (#C15B3D) */
text-terracotta-600   /* Text-based primary actions, critical links */
hover:bg-terracotta-700 /* Hover state for primary buttons */
text-sage-500         /* Small accents, dietary tags, subtle highlights (#788B76) */
bg-sage-50            /* Ultra-subtle background for highlighted items */

/* Text Hierarchy */
text-charcoal-900     /* Primary typography, headlines, serif titles (#2C2C2C) */
text-charcoal-700     /* Secondary body copy, storytelling paragraphs */
text-charcoal-500     /* Functional captions, menu item descriptions */
text-stone-400        /* Muted metadata, timestamps, subtle borders */
text-warm-white       /* Typography on deep marine blue panels */

```

### Unavailable / Sold Out States

```css
bg-stone-100
text-stone-400
line-through
opacity-60

```

---

## Typography

The typographic system relies on a strict dichotomy: expressive elegance for display (Playfair Display, Roslindale, or Freight Display) and quiet utility for data/actions (Geist or IBM Plex Sans).

### Font Families

```css
font-serif       /* Playfair Display, Roslindale, or Freight Display */
font-sans        /* Geist or IBM Plex Sans */

```

### Font Weights

```css
font-light       /* Massive serif headlines, cinematic hero text */
font-normal      /* Standard body copy, menu descriptions, quotes */
font-medium      /* Sans-serif action buttons, clear price tags */
font-semibold    /* Small sans-serif overlines, localized metadata */

```

### Font Size Scale

```css
text-xs          /* Form descriptions, dietary tags, precise captions (12px) */
text-sm          /* Body text for dense areas, standard UI labels (14px) */
text-base        /* Menu descriptions, standard storytelling (16px) */
text-lg          /* Subtitles, secondary menu categories (18px) */
text-2xl         /* Highlighted item names, chef quotes (24px) */
text-4xl         /* Standard section headers (36px) */
text-6xl         /* Editorial layout headers (60px) */
text-8xl-9xl     /* Hero panoramic headlines (Fluid/Responsive) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large serif headlines to maintain tension */
tracking-normal  /* Default paragraph flow text */
tracking-widest  /* Tiny sans-serif overlines, structural labels */

uppercase        /* Small category headers, buttons, reservation UI */
italic           /* Serif captions, chef signatures, wine pairings */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Serif | 8xl | light | charcoal-900 | none |
| Story Subtitle | Serif | 2xl | normal | charcoal-700 | italic |
| Section Overline | Sans | xs | semibold | sage-500 | uppercase |
| Menu Item Name | Serif | 2xl | normal | charcoal-900 | none |
| Menu Price | Sans | base | medium | charcoal-900 | none |
| Body Text | Sans | base | normal | charcoal-700 | none |
| CTA Button | Sans | sm | medium | warm-white | uppercase |

---

## Animation System

### Core Philosophy: Cinematic & Slow

Motion is used to dictate pacing. Elements transition with the slow, inevitable gravity of the tide. Fast, snappy web animations are strictly prohibited.

### Page Transitions (The Long Fade)

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}

```

### The Panoramic Pan (Image Motion)

Hero images and full-bleed location shots slowly scale and pan to create subtle, continuous life.

```tsx
animate={{ scale: [1, 1.05], x: [0, -10] }}
transition={{ duration: 20, repeat: Infinity, repeatType: "reverse", ease: "linear" }}

```

### Museum Carousel Advance

When scrolling through the menu carousel, items glide into view smoothly with a delayed caption reveal.

```tsx
transition={{ duration: 0.8, ease: [0.33, 1, 0.68, 1] }}

```

---

## UI Components

### The Editorial Hero

A spacious, full-bleed seaside or wave crop. The typography is precise and overlays the imagery with massive contrast. Action buttons sit elegantly at the bottom edge.

```tsx
<header className="relative w-full h-screen overflow-hidden bg-marine-900">
  <img className="absolute inset-0 w-full h-full object-cover opacity-80" />
  <div className="absolute inset-0 flex flex-col justify-center items-center text-center">
    <h1 className="font-serif text-8xl font-light text-warm-white tracking-tight">Il Mare</h1>
    <button className="absolute bottom-12 px-8 py-3 bg-terracotta-600 text-warm-white font-sans text-sm uppercase tracking-widest">
      Reserve a Table
    </button>
  </div>
</header>

```

### Museum Carousel Plinth

Used immediately below the hero. Treats menu items as curated art objects. 

```tsx
<div className="flex flex-col items-center space-y-6 w-[400px]">
  <div className="w-full aspect-[4/5] bg-stone-100 overflow-hidden border border-stone-200">
    <img className="w-full h-full object-cover transition-transform duration-1000 hover:scale-105" />
  </div>
  <div className="text-center">
    <h3 className="font-serif text-2xl text-charcoal-900">Branzino al Sale</h3>
    <p className="font-serif italic text-charcoal-500 mt-2">Wild-caught, infused with coastal rosemary</p>
    <p className="font-sans font-medium text-charcoal-900 mt-4">$48</p>
  </div>
</div>

```

### Alternating Storytelling Panels

Sections alternate gracefully between `bg-warm-white` with `text-charcoal-900` and `bg-marine-900` with `text-warm-white`, creating a rhythmic, physical layout like walking through different gallery rooms.

---

## Component Catalog

### Cards (Menu Highlights & Reviews)

Cards lack heavy borders or shadows. They rely on pale stone borders and vast internal padding to define their shape.

```tsx
// Menu Highlight Card
"bg-warm-white border border-stone-200 p-12 flex flex-col items-center text-center hover:border-stone-300 transition-colors duration-500"

// Review/Quote Block
"bg-marine-900 text-warm-white p-16 w-full flex flex-col justify-center"
```

### Buttons

```tsx
// Primary CTA (Reservation)
"bg-terracotta-600 text-warm-white font-sans font-medium text-sm uppercase tracking-widest px-8 py-4 hover:bg-terracotta-700 transition-colors duration-300"

// Secondary Action (Explore Menu)
"border border-charcoal-900 text-charcoal-900 font-sans font-medium text-sm uppercase tracking-widest px-8 py-4 hover:bg-charcoal-900 hover:text-warm-white transition-colors duration-300"
```

### Inputs (Reservation Form)

Minimalist, architectural inputs. No heavy boxes, just elegant underlines or pale borders.

```tsx
// Standard Form Input
"w-full bg-transparent border-b border-stone-300 py-4 font-sans text-base text-charcoal-900 placeholder-charcoal-400 focus:outline-none focus:border-terracotta-600 transition-colors"
```

### Badges & Accents

```tsx
// Dietary/Sourcing Marker (Sage Green Accent)
"flex items-center space-x-2 text-xs font-sans uppercase tracking-widest text-sage-500"
```

---

## Quality Checklist

* [ ] Are all headlines using the designated high-contrast serif font in `font-light` or `font-normal`?
* [ ] Are all calls-to-action exclusively using the Terracotta accent color?
* [ ] Is the hero section completely full-bleed with a slow, cinematic reveal?
* [ ] Are the menu items in the carousel treated individually with refined, italicized captions and clear sans-serif prices?
* [ ] Have you entirely avoided pure white (`#FFFFFF`), pure black (`#000000`), and heavy drop shadows?
* [ ] Are motion curves set to durations longer than 0.8s to maintain the slow, gallery-like pacing?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast mixing of elegant serifs and clean sans-serifs.
* Expansive padding and massive margins (e.g., `py-32`, `px-12`).
* Subtle, slow image scaling on hover (e.g., 1000ms duration).
* Alternating full-width sections of Warm White and Deep Marine Blue.
* Small, deliberate touches of Sage Green for secondary data.

### ✗ Not Allowed

* Fast, spring-based animations or rapid UI snaps.
* Colorful status badges (no red for errors, no bright green for success).
* Thick, dark borders or any form of box-shadow.
* Tight, dense grids where images touch or text lacks breathing room.
* The use of standard web fonts like Arial, Roboto, or standard system fonts for display typography.
Preview