Milkglass Peacock Conservatory Register

/milkglassPeacockConservatoryRegister
A design system evoking the clarity and charm of countryside conservatories, blending honest photography, crisp milkglass palettes, and beautifully structured layouts to create authentic, welcoming exploratory interfaces with heritage and restraint.
Aug 24, 2026
Design System Content
# Milkglass Peacock Conservatory Register

A design language for bright, authentic countryside exploration interfaces.

---

## Philosophy

> "Local charm is born from proportion, not decoration."

This system creates interfaces that feel like stepping into a sunlit conservatory or a well-kept village register. It relies on the tactile reality of physical spaces—captured through honest photography and grounded by structured, beautifully ruled information. The design evokes confidence, heritage, and quiet hospitality through restrained color and flawless architectural layout.

### Core Beliefs

1. **Hierarchy through proportion** — Impact is achieved through the deliberate scaling of structural elements and typography, never through superficial ornamentation.
2. **Authenticity anchors the experience** — Real photography (conservatory light, wet windows, china cups) serves as the primary visual engine.
3. **Restraint in color** — Color is highly purposeful. Milkglass whites and mist-grays form the structure, charcoal delivers the message, golden stars build trust, and deep peacock-blue commands authority.
4. **Calm, breathable spacing** — Layouts must feel aligned and owner-editable. They should be spacious and serene without crossing into sterile, overly-polished tech territory.
5. **Information as hospitality** — Clear, precisely ruled menus and immaculate hours/location columns show respect for the user's time and needs.

### Strict Rules

* **No Botanical Icons or Badges** — We refuse the cliché. Character comes from typography and photography, not vector sprigs or leaves.
* **No AI Illustrations** — All imagery must reflect real, tangible hospitality.
* **Zero Beige** — Backgrounds remain crisp milkglass and mist-gray. Warmth comes from the golden accents and photography, never muddy backgrounds.
* **No Avatars** — Focus on the venue, the food, and the environment.
* **Mandatory Split Hero** — Main headers must pair a light sans-serif navbar and centered headline with expansive garden-room or village-sign photography.

---

## Color Palette

### The Conservatory Scale

The palette mimics the crisp, translucent quality of milkglass, anchored by deep charcoal text and punctuated by specific, highly intentional accents.

```css
/* Milkglass Backgrounds & Mist-Gray Structure */
bg-white/95           /* Primary milkglass canvas (translucent over subtle backdrops) */
bg-slate-50           /* Secondary paneling, quiet readable zones */
bg-slate-100          /* Mist-gray section breaks, subtle alternate rows */
bg-slate-200/50       /* Hover states for interactive lists */

/* Structural Borders */
border-slate-200      /* Standard mist-gray table rules */
border-slate-300      /* Strengthened structural dividers */

/* Deep Charcoal Copy (Text Hierarchy) */
text-slate-900        /* Primary headlines, confident feature text */
text-slate-800        /* Core body copy, menu items, location details */
text-slate-600        /* Secondary metadata, table headers, review counts */
text-slate-500        /* Subtle timestamps, inactive elements */

/* The Authority: Peacock Blue */
/* Used exclusively for confidence bands, booking, or owner notes */
bg-cyan-950           /* Deep peacock editorial band background */
text-cyan-950         /* Accent typography in high-authority zones */
border-cyan-950       /* Booking module structural borders */
bg-cyan-900           /* Hover states for primary booking CTAs */

/* The Trust Marker: Golden Stars */
text-amber-400        /* Standard review star color */
text-amber-500        /* Hover or active state for rating interactions */
```

---

## Typography

The system contrasts elegant, Gill Sans-style Humanist headers (Raleway/Optima) with incredibly sturdy, readable body copy (Source Sans Pro/Roboto Slab). The scale must be deliberate and strong—weak, wispy fonts are forbidden.

### Font Weights

```css
font-light       /* Large, centered hero headlines */
font-normal      /* Core menu items, body copy, descriptions */
font-medium      /* Compact CTAs, precise column headers */
font-semibold    /* High-contrast sub-headers, booking totals, owner notes */
```

### Font Size Scale

```css
text-xs          /* Minor metadata, standard review counts (12px) */
text-sm          /* Precise hours/location columns, subtle owner notes (14px) */
text-base        /* Standard menu items, narrative body paragraphs (16px) */
text-lg          /* Subsection headers, compact CTAs (18px) */
text-xl          /* Standard page breaks, secondary features */
text-2xl         /* Confident editorial band headlines */
text-4xl-5xl     /* Centered hero headlines (proportional, not overwhelming) */
```

### Letter Spacing & Alignment

```css
tracking-tight   /* Large hero headlines */
tracking-normal  /* All body copy and menu tables for maximum readability */
tracking-wide    /* Navigational elements and table column headers */

text-center      /* Mandatory for main hero headlines and review lockups */
text-left        /* Mandatory for menu tables and location/hours columns */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Font Style |
| --- | --- | --- | --- | --- |
| Hero Headline | 5xl | light | slate-900 | Humanist / Sans |
| Peacock Note | 2xl | normal | white | Humanist / Sans |
| Menu Item | base | normal | slate-800 | Slab / Robust Sans |
| Hours/Location | sm | normal | slate-800 | Slab / Robust Sans |
| Review Count | xs | medium | slate-600 | Humanist / Sans |

---

## Animation System

### Core Philosophy: Quiet Presence

Motion is restricted to gentle photographic transitions and tactile hover states. The interface should feel like turning a beautifully printed page, not navigating software.

### Image Fades

```tsx
// Soft image load transitions
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: "easeInOut" }}
```

### Hover Darkening Only

Interactive elements respond with subtle light absorption, never scaling, popping, or shifting in physical space.

```tsx
// Photographic tile hover
className="transition-all duration-300 ease-in-out hover:brightness-90"

// Button interaction
className="transition-colors duration-200 ease-in hover:bg-cyan-900"
```

---

## UI Components

### The Split Hero

A mandatory structural element. The light sans-serif navbar sits cleanly above, while the main space is divided between centered typography/reviews and rich photography (garden-rooms, window-tables, village-signs).

```tsx
<header className="grid grid-cols-1 md:grid-cols-2 min-h-[70vh] bg-white/95">
  <div className="flex flex-col items-center justify-center p-12 text-center">
    <h1 className="text-5xl font-light text-slate-900 tracking-tight mb-4">
      The Glasshouse
    </h1>
    <ReviewLockup stars={5} count={128} />
    <CompactCTA label="Reserve a Table" />
  </div>
  <div className="relative w-full h-full">
    <Image src="/conservatory-light.jpg" alt="Sunlit conservatory" fill className="object-cover" />
  </div>
</header>
```

### The Peacock Editorial Band

A dark, high-confidence horizontal section used exclusively for booking modules, critical owner notes, or primary features.

```tsx
<section className="w-full bg-cyan-950 text-white py-16 px-8">
  <div className="max-w-4xl mx-auto text-center space-y-6">
    <h2 className="text-2xl font-light">Notes from the Proprietor</h2>
    <p className="text-base font-normal text-cyan-50/80">...</p>
  </div>
</section>
```

### Beautifully Ruled Menu Tables

Cramped tables are a failure condition. Menus must have generous vertical padding, precise alignment, and mist-gray rules.

```tsx
<div className="w-full max-w-3xl mx-auto text-left">
  <div className="flex justify-between items-baseline py-4 border-b border-slate-200">
    <span className="text-base font-normal text-slate-800">Wild Mushroom Tart</span>
    <span className="text-base font-medium text-slate-900">£14</span>
  </div>
</div>
```

---

## Component Catalog

### Buttons & CTAs

Compact, authoritative, and cleanly structured.

```tsx
// Primary Booking CTA (Compact)
"inline-flex items-center justify-center bg-cyan-950 text-white font-medium text-lg px-6 py-2.5 rounded-none hover:bg-cyan-900 transition-colors"

// Secondary Action / Filter
"inline-flex items-center justify-center bg-transparent border border-slate-300 text-slate-900 font-medium text-sm px-4 py-2 hover:bg-slate-50 transition-colors"
```

### Review Stars

Always positioned directly below the main message.

```tsx
<div className="flex flex-col items-center gap-1 mb-8">
  <div className="flex gap-1 text-amber-400">
    <StarIcon className="w-5 h-5 fill-current" />
    {/* ... repeated 5x */}
  </div>
  <span className="text-xs font-medium text-slate-600 tracking-wide uppercase">
    Based on 240 visits
  </span>
</div>
```

### Precise Hours & Location Columns

```tsx
<div className="grid grid-cols-2 gap-12 border-t border-slate-200 pt-8 mt-12 text-sm text-slate-800">
  <div>
    <h4 className="font-semibold text-slate-900 mb-2 uppercase tracking-wide text-xs">Find Us</h4>
    <p>14 High Street<br/>Little Combe<br/>GL56 0QZ</p>
  </div>
  <div>
    <h4 className="font-semibold text-slate-900 mb-2 uppercase tracking-wide text-xs">Opening Hours</h4>
    <p>Wed–Sat: 12pm – 10pm<br/>Sunday: 12pm – 4pm<br/>Mon–Tue: Closed</p>
  </div>
</div>
```

---

## Imagery & Photography Rules

Photography is the lifeblood of this system. It replaces the need for decorative motifs.
* **Required Subject Matter:** China cups, printed paper menus, natural conservatory light, condensation on wet windows, village signage, empty wooden window-tables.
* **Execution:** Unfiltered, honest, well-lit natural photography.
* **Banned:** Generic stock food smiles, heavy Instagram-style color grading, AI-generated interiors.

---

## Quality Checklist

* [ ] Is the main hero section strictly split between photography and a centered headline with review stars directly below?
* [ ] Does the design completely avoid the color beige?
* [ ] Are menu items and tables separated by generous padding and mist-gray (`border-slate-200`) rules rather than feeling cramped?
* [ ] Is the Peacock Blue (`cyan-950`) reserved *only* for high-authority editorial bands or primary bookings?
* [ ] Have all botanical icons, vector badges, and avatars been removed in favor of structured text and real photography?
* [ ] Does hover motion rely entirely on gentle darkening (`brightness-90` or background color shifts) rather than scaling/bouncing?

---

## Allowed vs Not Allowed

### ✓ Allowed
* Crisp milkglass backgrounds paired with mist-gray structural borders.
* Deep charcoal (`slate-900`/`800`) for high-legibility copy.
* Authentic, unpolished photography of physical spaces and printed materials.
* Perfectly ruled, airy lists and tables.
* Owner-editable, calm spacing.

### ✗ Not Allowed
* Generic teal applied as a wash across the entire interface (the "teal brochure" mistake).
* Weak, thin font scales that compromise readability in location/hours columns.
* Cramped data tables or tightly packed menu items.
* Botanical vector icons, sprigs, or decorative flourishing.
* Beige, cream, or artificially warm backgrounds.
* Avatars or AI-generated illustrations.
Preview