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.
0 likes
0 bookmarks
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.