Midnight Blue Porcelain Rosehip Parlour Sheet

/midnightBluePorcelainRosehipParlourSheet
A no-nonsense, documentary-inspired design system for hospitality interfaces—porcelain palettes, sturdy serifs, and atmosphere earned through structure, not ornament. All utility, no nostalgia—elegant architecture built for clarity and credibility.
Aug 24, 2026
Design System Content
# Midnight Blue Porcelain Rosehip Parlour Sheet

A design language for refined, documentary-style hospitality interfaces.

---

## Philosophy

> "Elegance should feel useful, not decorative."

This system creates interfaces that emulate a well-maintained local business document layered with precise moments of atmosphere. The design must reject the overly romanticized "vintage tearoom" in favor of an "old-builder" hospitality aesthetic—grounded, practical, and incredibly sturdy. Architecture is defined by crisp, lavendar-gray rules and porcelain backgrounds, allowing high-quality photography and structural typography to carry the atmospheric weight.

### Core Beliefs

1. **Utility is the highest form of elegance** — The page reads as a functional document first. Menus, hours, and locations are structurally prominent, not hidden behind aesthetic treatments.
2. **Atmosphere is earned, not painted** — Photographic elements (trays, handwritten notices, shopfront glass) and specific structural sections (80vh heroes) provide the mood. UI elements remain strictly utilitarian.
3. **The Rosehip is scarce** — The accent color acts as an authoritative stamp. It exists exclusively for active bookings and critical announcements.
4. **Structured proof** — Reviews and accolades are treated as factual documentation (compact proof cards) rather than floating decorative quotes.
5. **No masking** — Elements are presented exactly as they are. No icons to replace words, no blush gradients to fake depth, and absolutely no stickers.

### Strict Rules

* **No Beige or Blush Gradients** — Backgrounds remain strictly porcelain-white or midnight-blue.
* **No Icons or Stickers** — Communicate entirely through robust typography and structural rules.
* **No Thin Fashion Serifs** — Typography must feel established, legible, and slightly bookish. 
* **Restricted Accent Usage** — Dry Rosehip is never used for general buttons or links; it is reserved entirely for the booking engine and editorial announcements.
* **No Oversized Headings** — Scale remains relatively tight and book-like to maintain the "document" feel.

---

## Color Palette

### The Structural Scale

The palette relies on stark contrasts between heavy midnight-blue structural elements, porcelain-white reading environments, and graphite text, bisected by cool lavender-gray rules. 

```css
/* Backgrounds */
bg-slate-900          /* Midnight-blue: Exclusively for navbars, footers, and overlay base */
bg-white              /* Porcelain-white: Primary document canvas */
bg-slate-50           /* Secondary porcelain: Subtle contrast for alternating bands */

/* Borders & Rules */
border-slate-300      /* Cool lavender-gray: Primary structural rules and menu tables */
border-slate-400      /* Darker lavendar-gray: Hover states on structural boundaries */
border-slate-800      /* Midnight rules on dark backgrounds */

/* Copy & Typography */
text-slate-800        /* Graphite copy: Primary body text and general reading */
text-slate-900        /* Deep Graphite: Headlines and numerical data */
text-slate-500        /* Muted Graphite: Metadata, location labels, hour labels */
text-white            /* Porcelain copy: Used only over midnight-blue backgrounds */

/* Accents (Strictly Controlled) */
text-rose-800         /* Dry Rosehip: Booking text, announcement banners */
bg-rose-800           /* Dry Rosehip: Primary booking button, one editorial strip */
text-amber-500        /* Golden stars: Used strictly for review proof cards */
```

---

## Typography

The typography system pairs established, sturdy serif headers (Perpetua, Sabon, or Tiempos Text) with highly readable traditional serif body copy (Iowan Old Style or Georgia). 

### Font Weights

```css
font-normal      /* Standard body copy, menu items, document text */
font-medium      /* Subheadings, labels, location/hours headers */
font-semibold    /* Primary headings, review counts, booking actions */
/* font-light is STRICTLY FORBIDDEN — no thin, wispy fashion aesthetics */
/* font-bold is rarely used; rely on font-semibold for structural weight */
```

### Font Size Scale

```css
text-xs          /* Compact review timestamps, footer details (12px) */
text-sm          /* Location/hours tabular data, secondary descriptions (14px) */
text-base        /* Core document copy, standard menu item descriptions (16px) */
text-lg          /* Intro paragraph sizing, menu item names (18px) */
text-xl          /* Sub-section headers, proof card titles (20px) */
text-2xl         /* Primary section markers (24px) */
text-3xl         /* Maximum hero heading size — avoids oversized romantic clutter (30px) */
```

### Letter Spacing & Transforms

```css
tracking-normal  /* Default for all Georgia/Iowan Old Style body copy */
tracking-wide    /* Used sparingly on small location/hours labels */
uppercase        /* Restricted to the Rosehip editorial strip and primary nav */
```

### Hierarchy Examples

| Element | Font Family (Conceptual) | Size | Weight | Color |
| --- | --- | --- | --- | --- |
| Hero Title | Tiempos Text / Sabon | 3xl | semibold | white |
| Intro Statement | Georgia | lg | normal | slate-800 |
| Section Header | Tiempos Text / Sabon | 2xl | medium | slate-900 |
| Menu Item | Georgia | lg | normal | slate-900 |
| Menu Price | Georgia | base | medium | slate-800 |
| Hours Label | Georgia | sm | medium | slate-500 |

---

## Animation System

### Core Philosophy: Opacity Only

Motion is strictly limited to opacity changes. There are no sliding menus, no spring animations, no scaling on hover, and no parallax scrolling. The interface behaves like physical glass or paper reacting to light.

### Hover States & Transitions

```tsx
/* Standard interactive fade */
className="transition-opacity duration-200 ease-in-out opacity-100 hover:opacity-70"

/* Image loading overlay */
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.6, ease: "linear" }}
```

---

## UI Components (Strict Layout Rules)

### The 80vh Hero

Must feature specific photography (cake stand, rainy frontage, or table-linen). Overlaid with minimal typography.

```tsx
<header className="relative w-full h-[80vh] bg-slate-900">
  <img src="/rainy-frontage.jpg" className="object-cover w-full h-full opacity-60" />
  <div className="absolute bottom-12 left-12">
    <h1 className="font-serif text-3xl font-semibold text-white">The Parlour</h1>
  </div>
</header>
```

### Centered Intro & Review Proof

Directly below the hero, a strictly centered reading block acting as a business ledger intro, paired with the total review proof.

```tsx
<section className="flex flex-col items-center max-w-2xl mx-auto py-16 text-center">
  <p className="font-body text-lg text-slate-800 mb-6">
    Serving the locale since 1992.
  </p>
  <div className="flex items-center space-x-2 border-y border-slate-300 py-3 px-8">
    <span className="text-amber-500">★★★★★</span>
    <span className="font-serif text-sm font-medium text-slate-900">Based on 412 local reviews</span>
  </div>
</section>
```

### Alternating Image-Copy Bands

Content is delivered in strict, full-width alternating bands. Photography (trays, handwritten notices) on one side, graphite copy on the other.

```tsx
<section className="grid grid-cols-2 border-t border-slate-300 bg-white">
  <div className="p-16 flex flex-col justify-center">
    <h2 className="font-serif text-2xl font-medium text-slate-900 mb-4">Afternoon Service</h2>
    <p className="font-body text-base text-slate-800">Our standard offering...</p>
  </div>
  <div className="h-[600px] border-l border-slate-300">
    <img src="/shopfront-glass.jpg" className="w-full h-full object-cover grayscale-[20%]" />
  </div>
</section>
```

### The Rosehip Editorial Strip

A single, edge-to-edge announcement bar. The only permitted structural use of the accent color.

```tsx
<aside className="w-full bg-rose-800 py-4 px-8 text-center border-y border-rose-900">
  <span className="font-body text-sm uppercase tracking-wide text-white">
    Now accepting reservations for the Winter season.
  </span>
</aside>
```

---

## Component Catalog

### Navigation (The Midnight Header)

Strictly dark blue, acting as a heavy anchor at the top of the document.

```tsx
<nav className="w-full bg-slate-900 text-white border-b border-slate-800 px-8 py-4 flex justify-between items-center">
  <span className="font-serif text-xl font-semibold">Parlour</span>
  {/* Links */}
</nav>
```

### The Ruled Menu Table

A ledger-style presentation of offerings. No dotted leaders, just solid cool lavender-gray rules spanning the container.

```tsx
<div className="w-full max-w-3xl mx-auto">
  <div className="flex justify-between items-end border-b border-slate-300 py-4">
    <h3 className="font-serif text-lg text-slate-900">Earl Grey Imperial</h3>
    <span className="font-body text-base text-slate-800">$6.00</span>
  </div>
  <div className="flex justify-between items-end border-b border-slate-300 py-4">
    <h3 className="font-serif text-lg text-slate-900">Porcelain Scones</h3>
    <span className="font-body text-base text-slate-800">$8.50</span>
  </div>
</div>
```

### Buttons

```tsx
// The Booking Engine Button (Dry Rosehip)
"bg-rose-800 text-white font-serif text-base font-semibold px-6 py-3 rounded-none hover:opacity-80 transition-opacity"

// Standard Document Action (Graphite/Porcelain)
"border border-slate-300 bg-white text-slate-900 font-serif text-base px-6 py-3 rounded-none hover:bg-slate-50 transition-opacity"
```

### Location & Hours Columns

Utilitarian data presentation, strictly aligned, sitting at the footer of the document.

```tsx
<div className="grid grid-cols-2 gap-12 border-t border-slate-300 pt-12">
  <div>
    <h4 className="font-serif font-medium text-slate-900 mb-4">Location</h4>
    <p className="font-body text-sm text-slate-800">142 Merchant Street<br/>Old Quarter</p>
  </div>
  <div>
    <h4 className="font-serif font-medium text-slate-900 mb-4">Hours</h4>
    <ul className="font-body text-sm text-slate-800 space-y-2">
      <li className="flex justify-between border-b border-slate-300 pb-1">
        <span>Tuesday - Friday</span><span>10am - 4pm</span>
      </li>
    </ul>
  </div>
</div>
```

### Background-Photo Overlay Quote

A moment of atmosphere serving as a section break.

```tsx
<div className="relative w-full h-[60vh] bg-slate-900 flex items-center justify-center">
  <img src="/trays.jpg" className="absolute inset-0 w-full h-full object-cover opacity-50" />
  <blockquote className="relative z-10 max-w-xl text-center font-serif text-2xl text-white leading-relaxed">
    "A quiet refuge built on proper foundations and warm cups."
  </blockquote>
</div>
```

---

## Quality Checklist

* [ ] Is the primary navigation bar strictly Midnight Blue (`bg-slate-900`)?
* [ ] Is Dry Rosehip (`rose-800`) restricted *only* to the single editorial strip and booking actions?
* [ ] Does the hero section occupy exactly `80vh` with appropriate atmospheric photography?
* [ ] Are all divider lines and table borders rendered in cool lavender-gray (`border-slate-300`)?
* [ ] Is the design completely free of icons, emojis, and stickers?
* [ ] Are the headings appropriately sized (no larger than `text-3xl`), avoiding romantic clutter?
* [ ] Do all interactions rely exclusively on `opacity` transitions rather than movement or scale?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Porcelain-white backgrounds with graphite text for maximum document legibility.
* Photography featuring trays, handwritten notices, or shopfront glass.
* Lavender-gray structural rules defining rows, columns, and reading bands.
* Golden stars specifically isolated inside compact review proof cards.
* Sturdy serif typography pairings.

### ✗ Not Allowed

* Pink vintage tearoom aesthetics (e.g., floral patterns, excessive cursive, blush pink backgrounds).
* Thin, wispy fashion serifs (`font-light` weights).
* Icons of any kind (no location pins, no clock icons, no phone icons).
* Beige backgrounds or warm sepia gradients.
* Oversized, screen-filling typography.
* Drop shadows, rounded corners (`rounded-xl`), or layered floating cards. Elements must sit flatly on the document plane.
Preview