Sepia Trattoria Editorial Classic Design System

/sepiaTrattoriaEditorialClassicDesignSystem
A tactile, editorial design system for hospitality, blending warm sepia colors, classic serif typography, and elegant photographic layouts inspired by luxury food magazines.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Sepia Trattoria Editorial Classic Design System

A design language for refined, warm, and highly tactile hospitality interfaces.

---

## Philosophy

> "Hospitality begins in the eyes; warmth is felt before the first course is served."

This system revives the golden era of 2016–2018 editorial web design. It creates digital environments that feel like leafing through a high-end culinary magazine—steeped in warm photographic depth, anchored by sophisticated serif typography, and driven by a restrained, elegant conversion structure. The design should feel inviting but impeccably curated, relying on tactile color palettes and polished spacing rather than aggressive UI elements.

### Core Beliefs

1. **Photography is the atmosphere** — Full-bleed, richly toned imagery acts as the primary architectural element. UI exists to frame it, never to compete with it.
2. **Serif-led hierarchy** — Trust and culinary heritage are established through classic, high-contrast serif headlines. 
3. **Restrained conversion** — Calls to action are polite, understated, and seamlessly integrated into the editorial flow.
4. **Tactile warmth** — Stark contrasts are eliminated. Pure white and pure black are replaced with sepia cream, warm ivory, and espresso to mimic physical, natural materials.
5. **Classic framing** — Content blocks and images are anchored using delicate hairline borders and subtle, realistic shadows, grounding the interface in physical reality.

### Strict Rules

* **No Pure White or Pure Black** — All backgrounds must carry a warm ivory or cream undertone; all primary text must be a deep espresso.
* **Dual-Type Family Only** — Strict adherence to pairing a classic Serif for display and a clean Sans-Serif for interface and body text.
* **No Pill Buttons** — Buttons must be simple, sharp-cornered rectangles with thin borders. Highly rounded corners break the editorial aesthetic.
* **No Aggressive Shadows** — Shadows are used exclusively to gently lift horizontal panels, mimicking a physical menu resting on a table.
* **No Flat Flat-Color Heroes** — The hero section must feature a rich, full-bleed photograph with a meticulously calibrated gradient overlay to preserve legibility.

---

## Color Palette

### Base & Canvas Scale

The foundation relies on organic, paper-like warmth. The palette eschews digital grays for sepia-tinted creams and grounded earth tones.

```css
/* Backgrounds (Lightest to Darkest) */
bg-warm-ivory         /* Main canvas background (#FAF8F5) */
bg-sepia-cream        /* Secondary panels, menu background (#F4EFE6) */
bg-sepia-100          /* Subtle hover states, form backgrounds (#EAE3D6) */
bg-olive-50           /* Soft contrasting sections, review backdrops (#F0F1EB) */

/* Borders & Dividers */
border-sepia-200      /* Ultra-subtle divider lines, inner framing */
border-espresso/20    /* Standard card and panel borders */
border-espresso/40    /* Focused input borders, hover states */
border-brass          /* Elegant thematic dividers, premium highlights */

/* Text & Ink (The Espresso Scale) */
text-espresso-900     /* Primary headlines, body text (#2B221E) */
text-espresso-700     /* Secondary text, supporting copy, subtitles (#4A3B34) */
text-espresso-500     /* Metadata, reservation timestamps, subtle hints (#735C52) */

```

### Accents & Signifiers

Accents are drawn directly from the culinary world. They are used sparingly to guide the eye or highlight key reservations and menu items.

```css
/* Primary Action: Muted Tomato */
text-tomato           /* Highlighted text, active links (#D46A55) */
bg-tomato             /* Primary reservation buttons (solid) */
border-tomato         /* Active focus rings */

/* Secondary Accents: Olive & Aged Brass */
text-olive            /* Secondary statuses, vegetarian/vegan menu tags (#7A825D) */
bg-olive              /* Subtle secondary badges */
text-brass            /* Story highlights, review stars, elegant accents (#BBAA66) */
bg-brass              /* Understated premium indicators */

```

---

## Typography

The aesthetic relies on a strict, elegant pairing. A high-contrast, classic Serif commands the hierarchy, while a premium, geometric Sans-Serif does the heavy lifting for functional UI and body copy.

### Font Families

```css
font-serif       /* Primary: Le Monde Livre, Sabon, Chronicle Display, Freight Display, or Adobe Caslon */
font-sans        /* Secondary: Avenir, Proxima Nova, Aktiv Grotesk, or Graphik */

```

### Font Weights

```css
font-light       /* Elegant secondary serif headers, large pull quotes */
font-normal      /* Body copy (Sans), menu descriptions */
font-medium      /* UI labels, navigation links, small CTA text */
font-semibold    /* Hero headlines (Serif) — MANDATORY for primary titles */

```

### Font Size Scale

```css
text-xs          /* Form hints, location metadata, fine print (12px) */
text-sm          /* Menu descriptions, secondary buttons, hours (14px) */
text-base        /* Standard body copy, story paragraphs (16px) */
text-lg          /* Menu item names, form labels (18px) */
text-2xl         /* Section headers (Story, Reviews, Location) */
text-4xl         /* Secondary page titles, prominent pull quotes */
text-5xl-7xl     /* Centered hero headlines (Serif) */

```

### Letter Spacing & Transforms

```css
tracking-normal  /* Default paragraph text */
tracking-wide    /* Navigation items, uppercase micro-headers */
tracking-widest  /* Button text, menu category titles */

uppercase        /* CTAs, category tags, navigation, hours of operation */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Hero Headline | Serif | 6xl | semibold | warm-ivory | normal | none |
| Section Title | Serif | 2xl | light | espresso-900 | normal | none |
| Menu Item | Serif | lg | medium | espresso-900 | normal | none |
| Body/Story | Sans | base | normal | espresso-700 | normal | none |
| CTA Button | Sans | sm | medium | espresso-900 | widest | uppercase |

---

## Animation System

### Core Philosophy: The Polished Fade

Motion should feel like a cinematic crossfade. No bouncing, no spring physics. Elements ease in with grace, emphasizing a slow, luxurious reveal.

### Page & Scroll Transitions (The Slow Reveal)

```tsx
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.33, 1, 0.68, 1] }} // Soft, elegant cubic-bezier

```

### Image Parallax & Hover (Photographic Depth)

Images scale imperceptibly slowly to create a sense of breathing depth without disorienting the user.

```css
/* Image Container */
"overflow-hidden bg-espresso-900"

/* Image Element */
"transition-transform duration-[2000ms] ease-out hover:scale-105 opacity-90 hover:opacity-100"

```

---

## UI Components

### Hero Overlay (Dark-to-Cream)

A critical component to ensure the semibold serif hero text remains legible against complex culinary photography.

```tsx
<div 
  className="absolute inset-0 bg-gradient-to-b from-espresso-900/60 via-espresso-900/30 to-warm-ivory"
/>

```

### The Horizontal Menu Panel

Positioned immediately beneath the hero. It breaks the grid slightly, framed by a hairline border and the system's only permitted shadow.

```tsx
<div className="relative -mt-16 mx-auto max-w-5xl bg-sepia-cream border border-espresso/10 shadow-[0_8px_30px_rgb(43,34,30,0.06)] p-8">
  {/* Panel Content */}
</div>

```

### Classic Dividers

Used to separate menus, story sections, and reviews with editorial grace.

```tsx
<div className="flex items-center justify-center space-x-4 my-12 opacity-60">
  <div className="h-[1px] w-12 bg-brass" />
  <div className="w-1.5 h-1.5 rotate-45 bg-brass" />
  <div className="h-[1px] w-12 bg-brass" />
</div>

```

---

## Component Catalog

### Cards (Menu Highlights & Reviews)

Cards do not look like web containers; they look like print layout blocks. Backgrounds are transparent or match the canvas, relying on spacing rather than boxes.

```tsx
// Story/Highlight Block
"flex flex-col items-center text-center p-6 bg-transparent"

// Image Highlight Frame
"relative aspect-[4/5] w-full overflow-hidden border border-espresso/10 p-2 bg-warm-ivory"
// (Image goes inside this frame to look like a mounted photograph)

```

### Buttons (Restrained CTAs)

Strictly rectangular. Thin borders. Elegant spacing.

```tsx
// Primary CTA (Hero Reservation)
"bg-transparent border border-warm-ivory text-warm-ivory font-sans font-medium text-sm tracking-widest uppercase px-8 py-4 hover:bg-warm-ivory hover:text-espresso-900 transition-colors duration-300"

// Standard Conversion CTA (Lower Sections)
"bg-transparent border border-espresso-900 text-espresso-900 font-sans font-medium text-sm tracking-widest uppercase px-8 py-4 hover:bg-espresso-900 hover:text-warm-ivory transition-colors duration-300"

// Accent CTA (Muted Tomato)
"bg-tomato border border-tomato text-warm-ivory font-sans font-medium text-sm tracking-widest uppercase px-8 py-4 hover:bg-espresso-900 hover:border-espresso-900 transition-colors duration-300"

```

### Menu Structure

```tsx
// Individual Menu Item Row
<div className="flex justify-between items-baseline border-b border-espresso/10 pb-4 mb-4">
  <div>
    <h4 className="font-serif text-lg font-medium text-espresso-900">Bucatini all'Amatriciana</h4>
    <p className="font-sans text-sm text-espresso-500 mt-1">Guanciale, muted tomato, pecorino romano</p>
  </div>
  <span className="font-sans text-sm font-medium text-espresso-900 ml-4">24</span>
</div>

```

### Inputs (Reservation Forms)

Clean, flush, and minimalist.

```tsx
// Date/Time Input
"w-full bg-transparent border-b border-espresso/30 py-3 text-espresso-900 font-sans text-base placeholder-espresso-500 focus:outline-none focus:border-tomato transition-colors rounded-none"

```

---

## Quality Checklist

* [ ] Is the hero image full-bleed with a soft dark-to-cream gradient overlay?
* [ ] Is the primary hero headline utilizing a supported Serif (e.g., Le Monde Livre, Sabon) in a `semibold` weight?
* [ ] Are all CTAs simple, sharp-cornered rectangles with thin borders and uppercase sans-serif text?
* [ ] Is the interface entirely free of pure `#000000` and pure `#FFFFFF`?
* [ ] Does the horizontal preview panel beneath the hero use a subtle shadow and hairline stroke?
* [ ] Are menu highlights, reviews, and location blocks separated by elegant, generous spacing and classic dividers?
* [ ] Are hover effects and entry animations utilizing a slow, cinematic fade-in rather than rapid or bouncy motion?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast Serif and clean Sans typography pairings.
* Sepia cream, warm ivory, and deep espresso as the core structural colors.
* Muted tomato, olive, and aged brass used sparingly for interaction and emphasis.
* Thin hairline frames around feature photography.
* Long, graceful cubic-bezier transitions for motion.

### ✗ Not Allowed

* Rounded corners on buttons or main content cards.
* Drop shadows on typography, buttons, or standard containers (except the single horizontal panel).
* Emojis, playful icons, or highly saturated vector illustrations.
* Heavy, thick lines or dividers.
* Pure flat-color hero banners lacking photographic depth.