Frost White Mulberry Parlour Ledger

/frostWhiteMulberryParlourLedger
A design system for disciplined, authentic hospitality UIs—combining crisp frost-white layouts, deep mulberry accents, and rigorous serif typography inspired by afternoon-tea ledgers and timeless menu cards.
Aug 24, 2026
Design System Content
# Frost White Mulberry Parlour Ledger

A design language for authentic, meticulously maintained, afternoon-tea hospitality interfaces.

---

## Philosophy

> "Polish comes from hierarchy and typography, not modern SaaS gloss."

This system creates interfaces that feel soft but fiercely disciplined—like a perfectly set afternoon-tea table. The aesthetic embraces a slightly 2014, grounded authenticity. It eschews the plastic sheen of modern web apps in favor of a timeless, tactile layout resembling a well-kept ledger or a high-quality physical menu.

### Core Beliefs

1. **Discipline over decoration** — Structure is created through rigid, ruled lines and precise alignment. Ornate wallpaper and decorative borders are strictly forbidden.
2. **Serif supremacy** — Typography drives the aesthetic. Text must always remain highly readable, substantial, and never fashion-thin.
3. **The singular editorial anchor** — A single, deep mulberry editorial panel serves as the visual weight of the page, contrasting with the expansive frost-white canvas.
4. **Spatial calm** — Spacing must be modular, breathable, and feel owner-editable, rejecting hyper-compressed data density.
5. **Atmospheric grounding** — The interface relies on specific, physical imagery (teapots, receipts, exterior signs) rather than abstract illustrations to create a sense of place.

### Strict Rules

* **No SaaS Gloss** — Zero blush gradients, zero rounded floating badges, and zero avatars.
* **Strict Layout Requirements** — The page *must* contain: a light navbar, centered headlines and paragraphs, a ruled menu table, alternating image-copy rows, embedded review proof, and clear location details.
* **Hero Constraints** — Hero imagery is exclusively restricted to table linen, cake stands, window seats, or rain-glass frontages. 
* **Restricted Motion** — Hover states are limited to simple underlines. Imagery may solely use soft fade-ins.
* **No Beige** — Backgrounds remain frost-white. Warm, muddy, or beige tones are prohibited.

---

## Color Palette

### The Canvas, Hairlines & Graphite Scale

The palette rejects warmth, favoring a crisp "frost-white" background paired with cool, pale lavender-gray structural lines and solid graphite typography.

```css
/* Backgrounds */
bg-white               /* Pure white for primary reading zones (#ffffff) */
bg-slate-50            /* Frost-white for alternating canvas sections (#f8fafc) */
bg-slate-100/50        /* Extremely subtle contrast for nested table cells */

/* Hairlines (Lavender-Gray) */
border-slate-200       /* Primary ruled lines, menu dividers */
border-indigo-100/40   /* Ultra-delicate lavender-gray secondary borders */
border-slate-300       /* Focused input borders, structural boundaries */

/* Text Hierarchy (Graphite Scale) */
text-slate-900         /* Primary headlines, high-contrast values */
text-slate-800         /* Standard body copy, menu items (Graphite) */
text-slate-600         /* Metadata, location details, tertiary copy */
text-slate-400         /* Inactive navigational elements, disabled states */

/* The Review Standard */
text-amber-400         /* Golden review stars - the only permitted bright accent */
```

### The Action: Deep Mulberry

Mulberry is the exclusive action and editorial color. It must be deep, rich, and crisp—never muddy or overly purple (which results in a "cheap luxury tearoom" aesthetic). 

```css
/* Custom Tailwind Configuration: Mulberry */
bg-rose-950            /* The single Deep Mulberry editorial panel */
text-rose-950          /* Primary interactive text links, primary buttons */
border-rose-950        /* Active state underlines */
hover:bg-rose-900      /* Subtle button hover state */
hover:text-rose-900    /* Subtle link hover state */
```

---

## Typography

Typography is the absolute core of the Frost White Mulberry Parlour Ledger. We pair robust, classic serif headings with readable, substantial serif body copy. Sans-serif is fundamentally incompatible with this aesthetic.

### Font Families

```css
font-serif-display    /* Times New Roman, Plantin, or Freight Text (Headings) */
font-serif-body       /* Georgia or Source Serif 4 (Body Copy) */
```

### Font Weights

```css
font-normal      /* Default weight for body copy - guarantees legibility */
font-medium      /* Menu items, primary buttons, subheadings */
font-semibold    /* Main centered headlines, editorial panel titles */
/* font-light is strictly forbidden — text must never be "fashion-thin" */
/* font-bold is heavily restricted to avoid heavy visual clutter */
```

### Font Size Scale

Headings remain modest. Oversized hero typography is a common mistake that breaks the authentic ledger aesthetic.

```css
text-xs          /* Receipt metadata, precise location coordinates */
text-sm          /* Menu item descriptions, footer links */
text-base        /* Standard paragraph copy, review text (16px) */
text-lg          /* Alternating row subheads, secondary titles */
text-xl          /* Standard page headings */
text-2xl         /* Primary Hero headline (Maximum allowed size) */
```

### Letter Spacing & Transforms

```css
tracking-normal  /* Default for all body copy to maintain readability */
tracking-wide    /* Navigational links, tiny receipt metadata */

capitalize       /* Standard menu item casing */
uppercase        /* Restricted solely to small location labels (e.g., "LONDON") */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Family | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 2xl | semibold | slate-900 | serif-display | none |
| Main Body | base | normal | slate-800 | serif-body | none |
| Menu Item | base | medium | slate-900 | serif-body | capitalize |
| Text Link | base | medium | rose-950 | serif-body | none |
| Location Tag | xs | semibold | slate-600 | serif-display | uppercase |

---

## Animation System

### Core Philosophy: Static Reliability

The interface should feel like printed matter. Motion is restricted to only what is necessary to confirm interaction or gracefully load physical imagery. 

### Page Transitions (Soft Image Fades)

Images load with a slow, disciplined fade-in. No translating, scaling, or springing.

```tsx
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: "easeInOut" }}
```

### Micro-Interactions (The Classic Underline)

Hovering over interactive elements reveals a simple, traditional underline. Buttons do not lift, scale, or cast shadows.

```tsx
// Link Hover
className="text-rose-950 underline-offset-4 decoration-transparent hover:decoration-rose-950 transition-colors duration-200"
```

---

## UI Components

### The Ruled Menu Table

The definitive structural element of the system. Data is organized via thin lavender-gray horizontal hairlines. Vertical dividers are not permitted.

```tsx
<div className="w-full border-t border-b border-slate-200">
  {items.map((item) => (
    <div className="flex justify-between py-4 border-b border-slate-200 last:border-0">
      <span className="font-serif-body font-medium text-slate-900">{item.name}</span>
      <span className="font-serif-body text-slate-600">{item.price}</span>
    </div>
  ))}
</div>
```

### The Mulberry Editorial Panel

One (and only one) block on the page is permitted to invert the color scheme, serving as a heavy visual anchor.

```tsx
<section className="bg-rose-950 text-slate-50 px-8 py-16 text-center max-w-3xl mx-auto">
  <h2 className="font-serif-display text-xl font-semibold mb-4">Afternoon Service</h2>
  <p className="font-serif-body text-base opacity-90">
    Reservations are held for fifteen minutes.
  </p>
</section>
```

### Atmospheric Quote Band

A full-width block featuring a muted, physical background image (e.g., rain-glass frontage) with centered text.

```tsx
<div className="relative w-full py-24 bg-slate-900">
  <img src="/rain-glass.jpg" className="absolute inset-0 w-full h-full object-cover opacity-40 mix-blend-overlay" />
  <blockquote className="relative z-10 text-center font-serif-display text-xl text-white max-w-2xl mx-auto">
    "A testament to maintained authenticity."
  </blockquote>
</div>
```

---

## Component Catalog

### Alternating Image-Copy Rows

The primary method for displaying narrative content. Images (teapots, receipts, exterior signs) alternate strictly left-to-right alongside centered paragraphs.

```tsx
<div className="flex flex-col md:flex-row items-center gap-12 py-12">
  <div className="w-full md:w-1/2">
    <img src="/cake-stand.jpg" className="w-full h-auto" alt="Cake stand arrangement" />
  </div>
  <div className="w-full md:w-1/2 text-center px-8">
    <h3 className="font-serif-display text-lg font-semibold text-slate-900 mb-4">Our Patisserie</h3>
    <p className="font-serif-body text-slate-800 text-base leading-relaxed">
      Baked daily before dawn, relying on handwritten ledgers and traditional scales.
    </p>
  </div>
</div>
```

### Navigation & Actions

```tsx
// Light Navbar
"w-full bg-white border-b border-slate-200 py-4 px-8 flex justify-between items-center"

// Primary Action Button (Solid Mulberry)
"bg-rose-950 text-white font-serif-body font-medium text-base px-6 py-3 hover:bg-rose-900 transition-colors"

// Secondary Action (Text Link)
"text-rose-950 font-serif-body font-medium hover:underline underline-offset-4"
```

### Embedded Review Proof

Social proof must feel integrated and earned, never loud or gamified.

```tsx
<div className="flex flex-col items-center text-center space-y-2 py-8">
  <div className="flex space-x-1 text-amber-400">
    <StarIcon /><StarIcon /><StarIcon /><StarIcon /><StarIcon />
  </div>
  <p className="font-serif-body text-slate-800 text-base italic">
    "Flawless discipline."
  </p>
  <span className="font-serif-body text-slate-600 text-sm">— The Telegraph</span>
</div>
```

### Location Details

Clear, unapologetic typographic layouts for physical addresses.

```tsx
<address className="not-italic text-center font-serif-body text-slate-600 space-y-1">
  <p className="text-slate-900 font-medium">14 Mulberry Lane</p>
  <p>London, W1J</p>
  <p className="pt-2 text-rose-950 hover:underline cursor-pointer">View on Map</p>
</address>
```

---

## Quality Checklist

* [ ] Is the primary body copy set to a readable serif (Georgia / Source Serif 4) and entirely free of `font-light` or `font-thin` weights?
* [ ] Have you ensured there are absolutely no badges, avatars, or floating UI elements on the page?
* [ ] Is there exactly *one* deep mulberry editorial panel, keeping the rest of the canvas frost-white?
* [ ] Does the hero image strictly feature physical tea-parlour elements (table linen, cake stand, window seat, rain-glass)?
* [ ] Are hover states strictly limited to underlines (with no scale or shadow changes)?
* [ ] Are headlines appropriately modest in size (max `text-2xl`)?
* [ ] Did you use pale lavender-gray (`border-slate-200`) for your ruled menu table hairlines?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Frost-white backgrounds (`bg-white`, `bg-slate-50`).
* Ruled horizontal tables with pale hairlines.
* Centered headlines and centered paragraph blocks.
* Deep Mulberry (`bg-rose-950`) for distinct, focused actions and a single editorial panel.
* Golden review stars.
* Imagery of physical artifacts: teapots, receipts, exterior signs, table linens.
* Underline hover effects and soft image fade-ins.

### ✗ Not Allowed

* Modern SaaS UI gloss (blush gradients, glassmorphism, spring animations).
* Badges, status pills, or user avatars.
* Oversized or fashion-thin typography.
* Muddy mulberry tones that skew overly purple (the "cheap luxury tearoom" effect).
* Overdecorated borders, ornate wallpapers, or beige backgrounds.
* Heavy drop shadows or floating cards.
* Sans-serif fonts in any context.
Preview