Milk White Damson Parlour Notice

/milkWhiteDamsonParlourNotice
A design system for authentic, softly formal café interfaces—blending milk-white clarity, restrained Damson accents, curated typography, and document-style layouts for quietly elegant and readable digital hospitality experiences.
Aug 24, 2026
Design System Content
# Milk White Damson Parlour Notice Design System

A design language for softly formal, authentic local café interfaces.

---

## Philosophy

> "Authenticity is maintained information; elegance is restraint."

This system creates interfaces that feel like a pristine, softly formal local café. It rejects the cliché of "vintage glamour" in favor of something that feels curated, modest, and document-like. The design relies on the rhythm of well-maintained information, pure milk-white spaces divided by cool pewter hairlines, and precise, selected typography rather than trendy flourishes.

### Core Beliefs

1. **Authenticity through utility** — The design must feel like a working, well-maintained document of information, not a decorative brochure.
2. **Typography feels selected, not trendy** — Type pairings evoke the timelessness of a printed menu or an establishment's front-window notice.
3. **Restrained focal points** — Deep damson is used exclusively as an action color or for a singular announcement block. It must never muddy into a decorative theme.
4. **Embedded proof** — Reviews are not flashy pop-ups; they are golden structural elements embedded natively into the natural content rhythm.
5. **Modest photography** — Imagery captures the quiet reality of the space—teacups, linens, receipts—avoiding heavily stylized or theatrical compositions.

### Strict Rules

* **Specific Hero Imagery Only** — Hero sections must strictly feature an afternoon tea table, a window seat, or a street-facing glass image.
* **Light Navigation** — Menus must remain airy, utilizing fine rules and minimal links. No heavy header bars.
* **One Damson Announcement** — The deep damson color is permitted for one solid announcement block per page; otherwise, it is strictly for interactive text.
* **Structured Information Groups** — Location, hours, and contact details must be explicitly grouped together, separated only by fine pewter rules.
* **No Thematic Clutter** — Absolutely no floral wallpapers, avatars, playful badges, beige backgrounds, or blush gradients.

---

## Color Palette

### The Canvas, The Rule, and The Action

The palette is strictly limited. The foundation is milk-white, structurally divided by cool, metallic grays (pewter). The action layer is a rich, unmuddy Deep Damson, accented only by the gold of review stars.

*(Note: Custom colors `damson`, `pewter`, and `gold` are assumed to be extended in `tailwind.config.js`)*

```css
/* Backgrounds */
bg-white              /* Milk-white canvas; mandatory for all core sections (#ffffff) */
bg-slate-50           /* Very subtle structural offset for atmospheric quote strips */

/* Hairlines & Borders (Cool Pewter) */
border-pewter-100     /* Ultra-light dividing lines for location/hours groupings */
border-pewter-200     /* Standard document-style hairlines (#e2e8f0) */
border-pewter-300     /* Slightly deepened borders for input fields */

/* The Action: Deep Damson */
text-damson-900       /* Primary text links, interactive hovers (#4a192c or similar) */
bg-damson-900         /* The SINGLE announcement block background */
border-damson-900     /* Focused input states */

/* The Proof: Golden Stars */
text-gold-500         /* Review stars ONLY (#f59e0b) */

/* Text Hierarchy */
text-slate-900        /* Primary headings, menu items, core paragraphs */
text-slate-600        /* Secondary details, opening hours, location metadata */
text-white            /* Text strictly confined within the Damson announcement block */
```

---

## Typography

Typography pairs classic, elegant serifs with clean, structural sans-serifs. The scale is kept moderate; headers should feel like a printed menu, never overwhelming the page. 

**Primary Serif (Headings):** Times New Roman, Georgia Pro, or Miller Text  
**Secondary Sans (Body/UI):** Avenir Next, TheSans, or Karla

### Font Weights

```css
font-normal      /* Standard body copy, menu descriptions, review paragraphs */
font-medium      /* Action links, fine-print labels, navigation items */
font-semibold    /* Menu item names, location/hours section titles */
/* font-bold and font-black are forbidden to maintain soft formality */
```

### Font Size Scale (Elegant & Moderate)

```css
text-xs          /* Metadata, contact fine-print, receipt-style details */
text-sm          /* Navigational elements, hours of operation, menu prices */
text-base        /* Standard paragraph reading size */
text-lg          /* Review text, atmospheric quotes */
text-xl          /* Sub-section headers (e.g., "Afternoon Tea") */
text-2xl         /* Primary section headers */
text-3xl         /* Hero headline (Maximum size permitted) */
```

### Letter Spacing & Transforms

```css
tracking-normal  /* Default reading flow */
tracking-wide    /* Navigational labels and location headers */
uppercase        /* Small category headers, grouped info labels */
```

### Hierarchy Examples

| Element | Size | Weight | Font Family | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 3xl | normal | font-serif | slate-900 | normal |
| Menu Item Name| base | semibold | font-serif | slate-900 | normal |
| Body Copy | base | normal | font-sans | slate-900 | normal |
| Action Links | sm | medium | font-sans | damson-900 | normal |
| Section Labels| xs | medium | font-sans | slate-600 | wide |

---

## Animation System

### Core Philosophy: Quiet Utility

Motion is restricted to basic, instantaneous feedback and gentle loading states. No spring animations, no scaling, no transformations. 

### Image Loading (Soft Fade-In)

Photography must emerge gently, avoiding abrupt flashes.

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

### Micro-Interactions (The Underline Hover)

Interactive elements do not shift backgrounds or grow. They simply reveal a classic underline.

```tsx
/* Tailwind configuration for links */
className="text-damson-900 hover:underline underline-offset-4 decoration-1 transition-all duration-200"
```

---

## UI Components

### The Document-Style Afternoon Tea Menu

Menu items are laid out like a physical receipt or fine document. Dotted leaders or wide spacing separate the item from the price, bound by cool pewter rules.

```tsx
<div className="border-b border-pewter-200 py-4 flex justify-between items-baseline">
  <div>
    <h4 className="font-serif text-base font-semibold text-slate-900">Earl Grey Imperial</h4>
    <p className="font-sans text-sm text-slate-600 mt-1">Bergamot, delicate blue flowers</p>
  </div>
  <span className="font-sans text-sm font-medium text-slate-900 pl-4">£4.50</span>
</div>
```

### The Singular Damson Announcement Block

Strictly limited to one per page. Used for critical operational updates (e.g., "Booking required for weekend afternoon tea").

```tsx
<div className="bg-damson-900 text-white px-6 py-8 text-center">
  <p className="font-sans text-sm font-medium tracking-wide uppercase mb-2">Notice</p>
  <h3 className="font-serif text-xl">Reservations for Mother's Day are now open.</h3>
</div>
```

### The Atmospheric Background-Image Quote Strip

A full-width, softly faded photographic strip featuring modest imagery (linens, teacups) with an overlaid quote.

```tsx
<div className="relative w-full py-24 bg-slate-50 flex items-center justify-center">
  <img src="/images/table-linen.jpg" className="absolute inset-0 w-full h-full object-cover opacity-20 mix-blend-multiply" />
  <blockquote className="relative z-10 font-serif text-2xl text-slate-900 text-center max-w-2xl px-4">
    "A quiet corner, a perfect cup, and the time to enjoy both."
  </blockquote>
</div>
```

---

## Component Catalog

### Navigation & Information Grouping

Location, hours, and contact are structurally bound by fine rules.

```tsx
// Light Navigation Structure
"flex items-center space-x-6 border-b border-pewter-200 pb-4"

// Fine Rule Information Group (Location/Hours)
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 border-t border-pewter-200 pt-8 mt-12">
  <div className="flex flex-col">
    <span className="text-xs font-sans font-medium uppercase tracking-wide text-slate-600 mb-2">Location</span>
    <p className="font-serif text-base text-slate-900">14 High Street<br/>Market Town, MK1 4AB</p>
  </div>
  {/* Additional columns follow identical structure */}
</div>
```

### The Embedded Review Panel

Reviews must be centered, featuring golden stars, a centered headline, and a modest paragraph beneath. No carousel arrows, no avatar images, no floating cards.

```tsx
<div className="flex flex-col items-center text-center max-w-lg mx-auto py-12">
  <div className="flex space-x-1 text-gold-500 mb-4">
    <StarIcon /> <StarIcon /> <StarIcon /> <StarIcon /> <StarIcon />
  </div>
  <h4 className="font-serif text-xl text-slate-900 font-semibold mb-3">
    An absolute haven on a rainy Tuesday.
  </h4>
  <p className="font-sans text-base text-slate-600">
    The scones were warm, the clotted cream generous, and the atmosphere delightfully unhurried. 
    Exactly what a local parlor should be.
  </p>
</div>
```

### Inputs & Actions

Forms (for inquiries or bookings) look like physical ledgers. 

```tsx
// System Input
"w-full bg-transparent border-0 border-b border-pewter-300 py-3 text-slate-900 font-sans text-base placeholder:text-slate-400 focus:ring-0 focus:border-damson-900 transition-colors"

// Primary Action Button (Text-based, elegant)
"inline-block font-sans text-sm font-medium text-damson-900 border-b border-damson-900 pb-1 hover:text-slate-900 hover:border-slate-900 transition-colors"
```

---

## Quality Checklist

* [ ] Is the hero image strictly an afternoon tea table, a window seat, or street-facing glass?
* [ ] Does the page feature a maximum of **one** solid Damson announcement block?
* [ ] Is the Damson color rich and deep (not muddy, faded, or overwhelmingly purple)?
* [ ] Are the review panels perfectly centered with strictly golden stars and no user avatars?
* [ ] Are location, hours, and contact neatly grouped together and separated by fine pewter rules?
* [ ] Is the font scaling elegant and moderate (no massive, oversized hero text)?
* [ ] Do all interactions rely purely on simple underline hovers or soft fade-ins?
* [ ] Is the photography modest (teacups, cakes, table linen, receipts, signage)?

---

## Allowed vs Not Allowed

### ✓ Allowed
* Milk-white backgrounds for core content areas.
* Cool pewter (`border-pewter-200`) hairlines to structure and group information.
* A single, rich Damson announcement block.
* Golden stars specifically for review components.
* Underline hover states for links.
* Steady, highly readable spacing that feels owner-editable (simple, robust layouts).

### ✗ Not Allowed
* Floral wallpapers or decorative background patterns.
* Badges, user avatars, or playful icons.
* Beige backgrounds or blush gradients.
* Muddy damson hues or using purple as a ubiquitous vintage glamour theme.
* Unreadable text overlays on dark imagery (use the atmospheric quote strip pattern instead).
* Scale transformations, bouncy animations, or heavy drop shadows.
* Decorative clutter that detracts from the "maintained document" aesthetic.
Preview