Parchment Menu House Design System

/parchmentMenuHouseDesignSystem
A refined, light-themed design system inspired by tactile printed menus, crafted for elegant hospitality and editorial culinary experiences with warm palettes, fine serif typography, and disciplined, paper-inspired layouts.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Parchment Menu House Design System

A design language for refined, light-themed hospitality interfaces and editorial culinary experiences.

---

## Philosophy

> "Discipline in layout honors the craft of the kitchen."

This system creates interfaces that feel like stepping into an old-world trattoria with an impeccably curated, beautifully printed physical menu. The design translates the tactile warmth of premium paper, fine ink hairlines, and modern layout discipline into a digital space. It relies on architectural spacing, serif-forward elegance, and earthy, atmospheric warmth rather than stark digital minimalism.

### Core Beliefs

1. **Editorial Grace over Digital Utility** — The interface should read like a premium culinary magazine or a fine dining menu, leaning heavily on exquisite serif typography and generous, calculated whitespace.
2. **Tactile Warmth** — Backgrounds are never pure digital white. They emulate the physical properties of flour, parchment, and aged cream, inviting the user in with ambient warmth.
3. **Framed Intent** — Content is separated by fine, razor-thin hairlines rather than bulky containers, treating imagery and text like delicate printed inserts.
4. **Subdued Affordance** — Interactive elements do not scream for attention. CTAs are quiet, relying on refined borders and minimal hover states to indicate action.

### Strict Rules

* **No Cold Grays or Pure Whites** — Every background and neutral tone must carry a subtle yellow, umber, or warm undertone. Pure `#FFFFFF` and cold blue-grays are strictly forbidden.
* **Serif-Forward Dominance** — Headlines and primary expressive text must exclusively use the approved serif stack. Sans-serifs are relegated strictly to micro-labels and functional clarity.
* **No Drop Shadows** — Depth is achieved through overlapping "paper" layers, fine hairline borders, and subtle image masking, never through artificial digital shadows.
* **No Bright Neons or Synthetics** — Accents are strictly rooted in physical, organic elements: sage, tomato, and brass. 
* **Texture is Mandatory** — A virtually imperceptible grain or noise overlay should be present on base canvas layers to emulate paper stock.

---

## Color Palette

### The Organic Canvas Scale

The palette eschews standard digital grays, transitioning from flour white to deep, rich espresso ink. Accents are drawn from the pantry and the brass fixtures of a heritage dining room.

```css
/* Backgrounds (Lightest to Darkest) */
bg-flour-white         /* Main canvas background (#FAF9F5) - Soft, warm white */
bg-parchment           /* Secondary panels, menu inserts (#F2EFE9) */
bg-aged-cream          /* Structural layers, active states (#EAE4D9) */
bg-ivory-overlay/80    /* Soft overlay for hero images (#F7F5F0/80) */

/* Hairline Borders */
border-espresso/10     /* Ultra-subtle grid lines and structural dividers */
border-espresso/20     /* Default framed preview borders, quiet CTA edges */
border-brass/40        /* Hover boundaries, focused input rings */
border-brass           /* Active highlights, premium structural accents */

/* Typography: Espresso Ink Hierarchy */
text-espresso-900      /* Primary text, hero headlines, deep ink (#2A2421) */
text-espresso-700      /* Secondary text, body copy, descriptions (#4A413C) */
text-espresso-500      /* Metadata, quiet instructions, secondary labels (#7C7067) */
text-espresso-400      /* System hints, placeholders, disabled states (#A3978E) */

/* The Organic Accents */
text-brass             /* Antique Brass: Links, premium highlights (#B58E5E) */
bg-brass               /* Solid brass tags, refined active states */
text-sage              /* Sage Green: Positive indicators, fresh highlights (#83917A) */
bg-sage-50             /* Subtle sage backdrops for seasonal callouts */
text-tomato            /* Muted Tomato: Warm focal points, primary actions (#B85C4B) */
bg-tomato              /* Primary quiet CTA button fills */
```

### Destructive Actions

```css
hover:bg-tomato/10
hover:text-tomato
hover:border-tomato/30
```

---

## Typography

A meticulous pairing of serif-forward elegance and sans-serif utility. The visual rhythm relies on classic editorial contrast: sweeping, elegant headlines anchored by razor-sharp, tiny uppercase utility labels.

### Font Stacks

* **Primary Serif:** Ivar Display, Cormorant Garamond, Tiempos, Lora, or Literata.
* **Secondary Sans:** Suisse Int’l, Satoshi, or Inter Tight.

### Font Weights

```css
font-light       /* Body copy for descriptions, quiet narrative text */
font-normal      /* Standard menu listings, secondary body */
font-medium      /* Sans-serif utility labels, buttons, fine-print clarity */
font-semibold    /* Hero headlines, primary section titles (Serif only) */
/* font-bold is rarely used; emphasis is achieved via italics or scale */
```

### Font Size Scale

```css
text-[9px]       /* Tiny utility labels, dietary tags, copyright marks */
text-[10px]      /* High-density metadata, category superscripts */
text-[11px]      /* Fine print, origin locations, timestamps */
text-xs          /* Compact descriptions, sans-serif form labels (12px) */
text-sm          /* Standard menu item descriptions, quiet buttons (14px) */
text-base        /* Menu item names, standard reading copy (16px) */
text-lg          /* Subsection headers, introductory paragraphs (18px) */
text-2xl         /* Section titles (e.g., "Antipasti", "Vini") */
text-4xl         /* Hero secondary headlines, editorial pull quotes */
text-5xl-7xl     /* Primary hero headlines (centered, semibold serif) */
```

### Letter Spacing & Transforms

```css
tracking-tighter /* Large serif headlines to maintain classic kerning */
tracking-normal  /* Default reading text */
tracking-wide    /* Small sans-serif buttons and standard tags */
tracking-widest  /* Tiny uppercase labels ("SEASONAL HIGHLIGHT", "EST. 1992") */

uppercase        /* All sans-serif micro-labels, tags, button text */
italic           /* Serif secondary descriptions, sophisticated sub-labels */
```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Hero Headline | Serif | 6xl | semibold | espresso-900 | tighter | none |
| Menu Section | Serif | 2xl | normal | espresso-900 | normal | none |
| Item Name | Serif | base | normal | espresso-900 | normal | none |
| Description | Serif | text-sm | light | espresso-500 | normal | none |
| Small Label | Sans | text-[10px] | medium | espresso-400 | widest | uppercase |

---

## Animation System

### Core Philosophy: The Settling Page

Animations should feel like a page gently turning or ink settling onto parchment. Nothing snaps or bounces aggressively; movement is characterized by soft fades, slow eases, and gentle unmasking.

### Page Transitions (The Editorial Fade)

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

### Hover States (The Tactile Shift)

Interactive elements change through subtle material shifts rather than dramatic color inversions.

```tsx
whileHover={{ scale: 0.995, backgroundColor: "#EAE4D9" }} /* Aged cream shift */
transition={{ duration: 0.2, ease: "easeInOut" }}
```

---

## UI Components

### The Atmospheric Hero

A full-width or large-format atmospheric image background, subdued by a soft ivory overlay to ensure the centered, semibold serif headline commands the room.

```tsx
<header className="relative w-full h-[70vh] flex items-center justify-center overflow-hidden">
  {/* Atmospheric Background */}
  <img src="/trattoria-ambiance.jpg" className="absolute inset-0 w-full h-full object-cover object-center" />
  
  {/* Soft Ivory Overlay */}
  <div className="absolute inset-0 bg-[#F7F5F0]/85 backdrop-blur-[2px]" />
  
  {/* Centered Editorial Content */}
  <div className="relative z-10 flex flex-col items-center text-center max-w-2xl px-6">
    <span className="font-sans text-[10px] uppercase tracking-widest text-espresso-500 mb-4">
      Now Serving
    </span>
    <h1 className="font-serif text-6xl font-semibold text-espresso-900 tracking-tighter mb-6">
      Autumn In the Valley
    </h1>
    <p className="font-serif text-lg font-light text-espresso-700 leading-relaxed mb-8">
      A compact description of our seasonal harvest, emphasizing root vegetables, wild game, and robust red wines from the cellar.
    </p>
    {/* Quiet CTA */}
    <button className="font-sans text-xs uppercase tracking-wide font-medium text-espresso-900 border border-espresso/20 px-8 py-3 rounded-none hover:bg-espresso/5 transition-colors">
      Reserve a Table
    </button>
  </div>
</header>
```

### The Framed Preview Insert

Located beneath the hero, this horizontal layout acts as a premium printed insert. It features seasonal highlights or reservation moments, bound by fine hairlines.

```tsx
<section className="max-w-5xl mx-auto my-16 p-2 border border-espresso/10 bg-flour-white">
  {/* Inner hairline frame to mimic a printed insert */}
  <div className="border border-espresso/10 p-8 flex flex-col md:flex-row gap-12 items-center bg-parchment/50">
    <div className="flex-1 space-y-4">
      <h3 className="font-serif text-2xl text-espresso-900">Featured Dish</h3>
      <p className="font-serif text-sm font-light text-espresso-700">
        Hand-rolled pappardelle with slow-braised wild boar ragù and aged pecorino.
      </p>
    </div>
    <div className="w-full md:w-1/2 aspect-[16/9] overflow-hidden">
      {/* Refined Image Mask */}
      <img src="/dish.jpg" className="w-full h-full object-cover transition-transform duration-1000 hover:scale-105" />
    </div>
  </div>
</section>
```

---

## Component Catalog

### Cards & Menu Grids

Spacious, structureless grids defined by alignment and whitespace rather than boxes. When borders are needed, they are strictly 1px hairlines.

```tsx
// Menu Item Row (Grid Layout)
"flex justify-between items-baseline border-b border-espresso/10 pb-4 mb-4 group"

// Item Name & Description
"font-serif text-base text-espresso-900 group-hover:text-tomato transition-colors"
"font-serif text-sm font-light text-espresso-500 italic mt-1"

// Item Price
"font-sans text-sm tracking-wide text-espresso-700"
```

### Quiet CTA Buttons

Buttons never use heavy drop shadows or aggressive rounding. They are sharp, structural, and whisper their interactivity.

```tsx
// Primary Quiet Action
"bg-espresso-900 text-flour-white font-sans text-xs uppercase tracking-widest px-6 py-3 hover:bg-espresso-700 transition-colors"

// Secondary Outline Action
"bg-transparent border border-espresso/20 text-espresso-900 font-sans text-xs uppercase tracking-widest px-6 py-3 hover:border-espresso/40 hover:bg-parchment transition-all"

// Subtle Brass Action (For Reservations/Premium intent)
"bg-transparent border border-brass text-brass font-sans text-xs uppercase tracking-widest px-6 py-3 hover:bg-brass/10 transition-colors"
```

### Inputs & Forms

Forms feel like filling out a high-end physical ledger.

```tsx
// Standard Ledger Input
"w-full bg-transparent border-b border-espresso/20 py-3 font-serif text-base text-espresso-900 placeholder-espresso-400 focus:outline-none focus:border-brass transition-colors rounded-none"

// Form Label
"font-sans text-[10px] uppercase tracking-widest text-espresso-500 mb-1 block"
```

### Badges & Labels

Small, precise, and distinctly sans-serif to contrast the surrounding serif typography.

```tsx
// Dietary/Status Tag
"inline-block border border-espresso/10 bg-flour-white px-2 py-1 font-sans text-[9px] uppercase tracking-widest text-espresso-500"

// Seasonal Highlight Tag (Sage)
"inline-block border border-sage/20 bg-sage-50 px-2 py-1 font-sans text-[9px] uppercase tracking-widest text-sage"
```

### Overlays & Textures

```tsx
// SVG Grain Overlay (Applied fixed over the entire body)
<svg className="pointer-events-none fixed inset-0 z-50 h-full w-full opacity-[0.03]">
  <filter id="noise">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#noise)" />
</svg>
```

---

## Quality Checklist

* [ ] Is the primary hero headline a centered, semibold serif over a soft ivory backdrop?
* [ ] Are all pure whites (`#FFFFFF`) replaced with warm, organic base tones like flour white or parchment?
* [ ] Is there generous, architectural whitespace separating menu grids and sections?
* [ ] Are sans-serifs strictly reserved for micro-labels, metadata, and buttons?
* [ ] Did you use hairlines (`border-espresso/10`) and framed inserts rather than drop shadows to create structure?
* [ ] Do all buttons feature minimal border detail and quiet hover states?
* [ ] Is the tactile noise/grain overlay active to provide a paper-like feel?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm ivory, parchment, and flour-white canvases.
* High-contrast pairings of large serif headlines and tiny sans-serif uppercase labels.
* Muted, earth-toned accents (antique brass, muted tomato, sage green).
* Razor-thin hairline borders to frame images and content.
* Soft, slow opacity fades for animations.

### ✗ Not Allowed

* Cold grays (`gray-100`, `slate-50`) or pure black/white combinations.
* Drop shadows, glow effects, or heavy gradients.
* Heavy, rounded pill-shaped buttons.
* Large sans-serif headlines.
* Bouncy, spring-based animations.