Ice White Sloe Window Tea Sheet

/iceWhiteSloeWindowTeaSheet
An editorial, high-street hospitality design system with authentic serif typography, ice-white surfaces, sloe-blue accents, and tactile, broadsheet-inspired menus—mirroring the welcoming calm of a teahouse window seat.
Aug 24, 2026
Design System Content
# Ice White Sloe Window Tea Sheet

A design language for authentic, editorial high-street hospitality interfaces.

---

## Philosophy

> "Authenticity is found in the visible menu, the quiet window seat, and spacing a careful owner can maintain."

This system creates digital spaces that mirror the tactile, welcoming, yet refined atmosphere of a high-street afternoon teahouse. It rejects the sterile, widget-heavy aesthetics of modern tech in favor of an editorial, document-like approach. The design feels like a beautifully typeset broadsheet menu resting on fresh table linen—crisp, legible, and unpretentious. 

### Core Beliefs

1. **Authenticity through transparency** — Visible, easily readable HTML menus and confident social proof build trust before the customer ever walks through the door.
2. **Editorial over corporate** — Layouts behave like magazine pages. Text is centered, ruled, and comfortable. 
3. **Modest, atmospheric imagery** — Photography focuses on the tangible: teapots, trays, exterior signs, counter service, and window seats. No hyper-polished, sterile stock photos.
4. **Maintained spacing** — Whitespace is steady and ruled. It should feel like an environment that is cared for and regularly swept, never precious or fragile.
5. **Restrained interaction** — Motion is limited to the gentle fade of a page or the simple underline of a link. Digital artifice is removed.

### Strict Rules

* **No SaaS Elements** — Absolutely no floating cards, notification badges, circular avatars, or toggle switches.
* **No Beige** — Reject the modern "warm minimal" cliché. The canvas is ice-white; the rules are pale blue-gray.
* **80vh Atmospheric Hero** — The opening view must be a sweeping 80vh section featuring rain-glass frontage, table linen, counter service, or window-seat photography.
* **One Sloe Panel** — Limit heavy color floods to a single sloe-blue information panel per page.
* **Document-like Menus** — Menus are built with pure HTML, generous padding, and legible typography, avoiding cramped price alignments.
* **Structured Footer** — Mandatory columns for Location, Hours, and Contact.

---

## Color Palette

### The Canvas & The Ink

The palette is anchored in stark ice-white surfaces separated by pale blue-gray rules. Text is set in a deep, rich ink. The singular accent is a restrained, dark sloe-blue reserved for specific actions and solitary information panels.

```css
/* Surfaces & Backgrounds */
bg-white              /* Primary ice-white canvas (#ffffff) */
bg-slate-50           /* Extremely subtle contrast zones for secondary content (#f8fafc) */

/* Structural Rules */
border-slate-200      /* Pale blue-gray rules for menus, header boundaries, and content bands */
border-slate-300      /* Hover state for structural borders */

/* The Ink (Typography) */
text-slate-900        /* Primary ink text for body copy, menus, and headlines (#0f172a) */
text-slate-700        /* Secondary copy, descriptive text, location details */
text-slate-500        /* Muted timestamps or subtle photo captions */

/* The Action: Restrained Sloe-Blue */
/* A deep, editorial indigo/slate that grounds the design without turning it "cold blue" */
bg-indigo-950         /* The singular Sloe information panel, primary action buttons (#1e1b4b) */
text-indigo-950       /* Text-based calls to action and active navigational links */
hover:bg-indigo-900   /* Subtle hover state for Sloe-Blue actions */

/* Social Proof */
text-amber-400        /* Golden review stars - the only warm highlight in the system */
```

### Warning & Errors

```css
/* Understated, traditional red. Never pill-shaped or glowing. */
text-red-800
bg-red-50
border-red-200
```

---

## Typography

Typography is the heart of the Tea Sheet system. It is strictly serif, dark, comfortable, and highly readable. It leans on historical, document-like font pairings to establish heritage and high-street credibility.

### Font Families

```css
font-serif-display    /* Cormorant Garamond, Requiem Text, or Times New Roman */
font-serif-body       /* Georgia or Iowan Old Style */
```

### Font Weights

```css
font-normal      /* Dominates the interface. Body copy, menus, reviews. */
font-medium      /* Headlines, primary navigational links, Sloe action buttons. */
font-semibold    /* Reserved strictly for small, structural labels (e.g., "HOURS", "LOCATION"). */
/* font-bold and font-light are avoided. The contrast comes from size and family, not extreme weights. */
```

### Font Size Scale

```css
text-sm          /* Utility labels, copyright, subtle captions (14px) */
text-base        /* Standard menu descriptions, contact details (16px) */
text-lg          /* Core body copy, comfortable reading size (18px) */
text-2xl         /* Subheadings, social proof quotes, menu category titles */
text-4xl         /* Secondary page headers, Sloe panel headings */
text-6xl-7xl     /* Centered Hero headlines (Responsive) */
```

### Letter Spacing & Transforms

```css
tracking-normal  /* Default for comfortable body reading */
tracking-wide    /* Minor navigation items and column headers */
uppercase        /* Footer column headers, top-level navigation items */
```

### Hierarchy Examples

| Element | Size | Weight | Font Family | Color | Spacing |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6xl | medium | serif-display | slate-900 | normal |
| Nav Links | base | medium | serif-display | slate-900 | wide |
| Body Paragraph | lg | normal | serif-body | slate-900 | normal |
| Menu Item Title| lg | normal | serif-body | slate-900 | normal |
| Column Headers | sm | semibold | serif-display | slate-700 | wide |

---

## Animation System

### Core Philosophy: The Physical Document

Interfaces shouldn't bounce, slide, or scale. Interaction mirrors the physical world: reading a menu, turning a page, or focusing on a specific line of text.

### Hover States (The Editorial Underline)

```tsx
/* Text links do not change color; they reveal an underline */
className="text-slate-900 underline-offset-4 hover:underline transition-all duration-200 ease-in-out"

/* Image interactions simply dim, as if shifting out of the light */
className="hover:opacity-80 transition-opacity duration-300"
```

### Page Transitions (The Gentle Fade)

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

---

## UI Components

### 80vh Hero Section

The entrance to the digital storefront. Requires a light navbar sitting above an atmospheric, full-width image overlay.

```tsx
<header className="w-full bg-white border-b border-slate-200 py-6 px-8 flex justify-between items-center">
  {/* Light Navbar Content */}
</header>
<section className="relative w-full h-[80vh] flex items-center justify-center">
  <div className="absolute inset-0 bg-slate-900/40 z-10" /> {/* Atmospheric Overlay */}
  <img src="/rain-glass-frontage.jpg" className="absolute inset-0 w-full h-full object-cover z-0" />
  <h1 className="relative z-20 text-white font-serif-display text-6xl text-center">
    Afternoon Tea
  </h1>
</section>
```

### The Document-Like HTML Menu

Menus must never be cramped. They rely on steady spacing, pale blue-gray rules, and high legibility.

```tsx
<article className="max-w-3xl mx-auto py-16">
  <h2 className="text-2xl font-serif-display text-center border-b border-slate-200 pb-4 mb-8">
    Loose Leaf Selections
  </h2>
  
  {/* Menu Row - Generously Spaced */}
  <div className="flex justify-between items-baseline py-4 border-b border-slate-100">
    <div className="pr-8">
      <h3 className="text-lg font-serif-body text-slate-900">Earl Grey Imperial</h3>
      <p className="text-base font-serif-body text-slate-700 mt-1">
        Bergamot-infused black tea with subtle citrus notes.
      </p>
    </div>
    <span className="text-lg font-serif-body text-slate-900 whitespace-nowrap">£4.50</span>
  </div>
</article>
```

---

## Component Catalog

### Centered Content Band

Used for the core narrative of the teahouse.

```tsx
<section className="py-20 px-6 max-w-2xl mx-auto text-center">
  <h2 className="font-serif-display text-4xl text-slate-900 mb-6">Our Philosophy</h2>
  <p className="font-serif-body text-lg text-slate-900 leading-relaxed">
    Authenticity cannot be rushed. We believe in quiet afternoons, fresh linen, 
    and pots of tea steeped to precise measures.
  </p>
</section>
```

### Social-Proof Card (Simple, Centered)

```tsx
<div className="flex flex-col items-center text-center py-12 px-6 border-y border-slate-200 bg-white">
  <div className="flex space-x-1 mb-4 text-amber-400">
    <StarIcon /> <StarIcon /> <StarIcon /> <StarIcon /> <StarIcon />
  </div>
  <p className="font-serif-body text-xl text-slate-900 italic max-w-xl mb-4">
    "The finest window seat in the city. A truly authentic high-street escape."
  </p>
  <span className="font-serif-display text-sm uppercase tracking-wide text-slate-700">
    — The Weekend Post
  </span>
</div>
```

### The Sloe Information Panel

The only permitted block of heavy color. High contrast, highly legible, used for critical reservations or storytelling.

```tsx
<section className="bg-indigo-950 text-white py-16 px-8 text-center">
  <h2 className="font-serif-display text-4xl mb-4">Reserve a Table</h2>
  <p className="font-serif-body text-lg text-indigo-100 max-w-lg mx-auto mb-8">
    Window seats are highly sought after. We recommend booking your afternoon tea 
    at least one week in advance.
  </p>
  <button className="border border-white/30 bg-white text-indigo-950 px-8 py-3 font-serif-display text-lg hover:bg-indigo-50 transition-colors">
    Make a Reservation
  </button>
</section>
```

### Footer Columns (Location, Hours, Contact)

```tsx
<footer className="bg-white border-t border-slate-200 py-16 px-8">
  <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 text-center md:text-left">
    
    <div>
      <h4 className="font-serif-display uppercase tracking-wide text-sm font-semibold text-slate-900 mb-4">Location</h4>
      <p className="font-serif-body text-base text-slate-700 leading-relaxed">
        142 High Street<br />
        West End, London<br />
        W1U 3BQ
      </p>
    </div>

    <div>
      <h4 className="font-serif-display uppercase tracking-wide text-sm font-semibold text-slate-900 mb-4">Hours</h4>
      <p className="font-serif-body text-base text-slate-700 leading-relaxed">
        Tuesday — Sunday<br />
        11:00 AM — 5:00 PM<br />
        Closed Mondays
      </p>
    </div>

    <div>
      <h4 className="font-serif-display uppercase tracking-wide text-sm font-semibold text-slate-900 mb-4">Contact</h4>
      <p className="font-serif-body text-base text-slate-700 leading-relaxed">
        enquiries@teasheet.co.uk<br />
        020 7946 0012
      </p>
    </div>

  </div>
</footer>
```

---

## Quality Checklist

* [ ] Is the hero exactly 80vh with a rain-glass, table linen, or window-seat photograph?
* [ ] Is the navbar light, sitting flush on the ice-white canvas above the hero?
* [ ] Is the body copy set in a dark (`slate-900`), readable serif like Georgia or Iowan Old Style?
* [ ] Are the menu items documented in pure HTML with generous, uncramped spacing between titles and prices?
* [ ] Does the design strictly limit background colors to ice-white surfaces and *one* sloe-blue panel?
* [ ] Do review components use centered alignment with golden (`amber-400`) stars?
* [ ] Is the sloe-blue contrast high enough? (e.g., white text on `indigo-950`).
* [ ] Are hover states utilizing opacity fades and underlines rather than scaling or shifting layout?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Pure ice-white canvases (`bg-white`).
* Pale blue-gray structural rules (`border-slate-200`).
* Ink text for maximum legibility (`text-slate-900`).
* Genuine, modest photography (teapots, serving trays, exterior signage).
* Golden review stars.
* A single, restrained Sloe-Blue information panel.
* Centered editorial layouts.

### ✗ Not Allowed

* SaaS-style floating UI cards, notification badges, or circular user avatars.
* Beige, cream, or "warm minimal" backgrounds.
* Cold blue overlays turning the site into a generic sterile restaurant template.
* Cramped menu lists where prices are difficult to parse from descriptions.
* Sterile, heavily art-directed stock imagery featuring unnatural smiling models.
* San-serif body typography.
* Drop shadows, spring animations, or bouncy hover states.
Preview