China White Claret Tea Room Register

/chinaWhiteClaretTeaRoomRegister
A hospitality design system inspired by curated tea rooms; document-like, legibility-first interfaces with china-white backdrops, claret accents, and authentic imagery, balancing tradition and utility while avoiding vintage pastiche.
Aug 24, 2026
Design System Content
# China White Claret Tea Room Register

A design language for refined, owner-maintained hospitality interfaces that feel genuinely local.

---

## Philosophy

> "Hospitality begins with absolute clarity; charm requires no decoration."

This system creates interfaces that feel like a curated, well-loved afternoon-tea establishment—specifically evoking a slightly 2014, highly practical aesthetic. The design relies on a document-like structure, prioritizing pure legibility over digital embellishment. It eschews fussy vintage pastiche in favor of crisp china-white backdrops, charcoal typography, and restrained elegance.

### Core Beliefs

1. **Charm through readability** — The menu is the primary artifact. True charm is found in perfectly typeset, easily readable menus, not in decorative borders.
2. **Proof anchors trust** — Golden review stars in a highly visible but understated proof panel establish immediate credibility.
3. **Real photography tells the story** — Interfaces rely on authentic, unheavily edited table photography featuring window light, teapots, and tiered cake stands. 
4. **Document-like structure** — Layouts behave like well-organized registers or printed menus. Tidy, modular, and grounded in utility.
5. **Restraint creates elegance** — Color is highly limited. Claret is a tool for action (bookings) and singular editorial moments, never for general decoration.

### Strict Rules

* **Light Navbar Only** — Navigation must remain entirely china-white, utilizing straightforward text links.
* **Centered Hero Headlines** — Primary page titles must be center-aligned and immediately accompanied by a review count.
* **Tables for Menus** — Afternoon tea menus must be constructed as actual, semantically ruled HTML tables.
* **One Claret Editorial Strip** — A single horizontal claret band is permitted per page to break the layout or drive reservations.
* **No Beige, No Chalkboards** — Strictly avoid warm, aged tones, chalkboard textures, badges, or avatar clusters. 

---

## Color Palette

### Monochromatic Core & Accent

The palette is strictly limited to china-white canvases, dove-gray structural lines, and dense charcoal text. The single accent color is a deep, sophisticated Claret, used exclusively for booking actions and singular editorial strips.

```css
/* Backgrounds (China White to Dove Gray) */
bg-white              /* Primary canvas, menus, main content areas (#ffffff) */
bg-slate-50           /* Subtle offset backgrounds, practical location columns (#f8fafc) */
bg-slate-100          /* Secondary panels, extremely light structural fills */

/* Rules & Borders (Dove Gray) */
border-slate-200      /* Primary menu rules, table dividers, structural lines */
border-slate-300      /* Hover states on structural borders, column separators */
border-slate-400      /* Focus states for input fields */

/* Text Hierarchy (Charcoal) */
text-slate-900        /* Hero headlines, primary menu items, strong emphasis */
text-slate-800        /* Core body copy, location details, secondary headers */
text-slate-600        /* Menu descriptions, operational hours, subtle metadata */
text-slate-500        /* Review counts, placeholder text, fine print */

/* The Accent: Restrained Claret */
text-red-900          /* Text-based booking links, high-priority editorial headers */
bg-red-900            /* Primary booking buttons, the single editorial strip */
border-red-900        /* Focused booking inputs, active state indicators */
hover:bg-red-950      /* Booking button hover states */

/* Trust Indicators */
text-amber-400        /* Golden review stars - ONLY used for proof panels */

```

---

## Typography

The typographic system relies on a classic, high-contrast pairing. Timeless, highly legible serifs for headlines give a nod to traditional print, while clean, unpretentious sans-serifs handle the dense information of menus and practical details. 

### Font Families

```css
font-serif       /* Headlines: Times New Roman, Georgia */
font-sans        /* Body: Gill Sans Nova, Freight Sans, or Source Sans 3 */

```

### Font Weights

```css
font-normal      /* Standard body copy, menu descriptions, general text */
font-medium      /* Booking buttons, practical column labels */
font-semibold    /* Menu item names, subheaders, review counts */
/* Avoid font-bold or font-black to prevent a heavy, clunky appearance */

```

### Font Size & Spacing Scale (Tidy & Modular)

Spacing is deliberately practical—neither cramped nor overwhelmingly sparse.

```css
text-xs          /* Fine print, dietary requirement abbreviations (12px) */
text-sm          /* Menu descriptions, location metadata, review text (14px) */
text-base        /* Standard menu items, general body copy (16px) */
text-lg          /* Section headers within the menu (18px) */
text-xl          /* Secondary page titles, quote text (20px) */
text-2xl         /* Editorial strip headlines (24px) */
text-4xl         /* Centered Hero headlines (36px) */

tracking-normal  /* Default paragraph flow text */
tracking-wide    /* Table headers, location column labels */
leading-snug     /* Menu descriptions to keep rows tidy */
leading-relaxed  /* Standard editorial body paragraphs */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | serif | 4xl | normal | slate-900 | center |
| Menu Section | sans | lg | semibold | slate-900 | left |
| Menu Item | sans | base | semibold | slate-800 | left |
| Menu Desc. | sans | sm | normal | slate-600 | left |
| Booking CTA | sans | base | medium | white | center |

---

## Animation System

### Core Philosophy: Quiet Utility

Motion should be barely noticeable, restricted solely to basic user-feedback interactions. No complex spring physics, no sliding panels. 

### Hover States (The Underline)

Links and actionable text rely on traditional, instantaneous underlines or subtle color shifts.

```tsx
/* Standard Text Link */
className="text-slate-800 hover:text-red-900 hover:underline decoration-red-900 underline-offset-4 transition-colors duration-200"

```

### Simple Fades

Imagery and page transitions use standard, linear opacities.

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

```

---

## UI Components

### The Ruled HTML Menu Table

The absolute core of the interface. Relies on `border-b` and tidy padding rather than complex grids or cards.

```tsx
<table className="w-full text-left border-collapse">
  <thead>
    <tr>
      <th className="pb-2 text-lg font-serif font-normal text-slate-900 border-b-2 border-slate-900">
        Finger Sandwiches
      </th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b border-slate-200">
      <td className="py-3 align-top">
        <div className="font-sans font-semibold text-slate-800 text-base">Cucumber & Dill</div>
        <div className="font-sans text-sm text-slate-600 leading-snug mt-0.5">Lightly salted cucumber, dill cream cheese on white farmhouse loaf.</div>
      </td>
    </tr>
  </tbody>
</table>

```

### Simple Proof Panel

Positioned directly under the centered hero headline.

```tsx
<div className="flex flex-col items-center justify-center space-y-1 mt-4 mb-8">
  <div className="flex space-x-1 text-amber-400 text-sm" aria-label="5 stars">
    ★★★★★
  </div>
  <span className="font-sans text-sm font-semibold text-slate-600">
    4.9 based on 842 reviews
  </span>
</div>

```

### The Claret Editorial Strip

A single edge-to-edge structural band used strictly once per page to anchor the layout or house a primary booking message.

```tsx
<section className="w-full bg-red-900 py-8 px-4 text-center">
  <h2 className="font-serif text-2xl text-white mb-2">Reserve a Table</h2>
  <p className="font-sans text-slate-200 text-sm mb-4">Afternoon tea is served daily between 12pm and 4pm.</p>
  <button className="bg-white text-red-900 font-sans font-medium px-6 py-2 hover:bg-slate-50 transition-colors">
    Book Now
  </button>
</section>

```

### Background-Image Quote Section

Features unmanipulated window light or tiered-stand photography with a simple text overlay. No heavy gradients, just natural contrast.

```tsx
<section className="relative w-full py-24 bg-slate-900 overflow-hidden flex items-center justify-center">
  <img 
    src="/window-table-light.jpg" 
    alt="Afternoon tea setting by the window" 
    className="absolute inset-0 w-full h-full object-cover opacity-60" 
  />
  <div className="relative z-10 max-w-2xl text-center px-6">
    <blockquote className="font-serif text-3xl text-white leading-relaxed">
      "A genuinely local institution. The scones are unparalleled."
    </blockquote>
    <cite className="block mt-4 font-sans text-slate-200 text-sm uppercase tracking-wide not-italic">
      — The Local Register
    </cite>
  </div>
</section>

```

---

## Component Catalog

### Practical Location Columns

Used in the footer or contact section. Clean, left-aligned, highly structured data.

```tsx
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 py-8 border-t border-slate-200 bg-slate-50 px-6">
  <div>
    <h3 className="font-sans text-sm font-semibold text-slate-900 uppercase tracking-wide mb-3">Location</h3>
    <p className="font-sans text-sm text-slate-600 leading-relaxed">
      14 High Street<br/>
      Market Town, MK1 4AT
    </p>
  </div>
  <div>
    <h3 className="font-sans text-sm font-semibold text-slate-900 uppercase tracking-wide mb-3">Hours</h3>
    <ul className="font-sans text-sm text-slate-600 space-y-1">
      <li>Wed - Sat: 10am - 5pm</li>
      <li>Sun: 11am - 4pm</li>
      <li>Mon - Tue: Closed</li>
    </ul>
  </div>
</div>

```

### Navigation (Light Navbar)

```tsx
<nav className="w-full bg-white border-b border-slate-200 py-4 px-6 flex justify-between items-center">
  <div className="font-serif text-xl text-slate-900 tracking-tight">The Tea Room</div>
  <div className="hidden md:flex space-x-6">
    <a href="#" className="font-sans text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">Menu</a>
    <a href="#" className="font-sans text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">Location</a>
  </div>
  <button className="font-sans text-sm font-medium text-white bg-red-900 px-4 py-1.5 hover:bg-red-950 transition-colors">
    Book
  </button>
</nav>

```

---

## Quality Checklist

* [ ] Is the primary hero headline perfectly centered and paired directly with a golden-star review count?
* [ ] Is the food menu built using strict, ruled HTML tables rather than messy flex-grids?
* [ ] Have you restricted the Claret accent (`red-900`) to a single editorial strip and primary booking actions?
* [ ] Is the spacing tidy and modular (avoiding overly sparse, hyper-luxury padding)?
* [ ] Does the photography feature natural window light or genuine table settings without heavy filters?
* [ ] Did you completely avoid the use of badges, avatars, and chalkboard textures?

---

## Allowed vs Not Allowed

### ✓ Allowed

* China-white backgrounds paired with crisp dove-gray structural lines.
* Authentic, unedited photography of tiered stands, teapots, and handwritten notices.
* Classic underlining for links.
* Traditional Serif (headlines) and Sans-serif (body) typographic pairings.
* Tidy, document-like table structures for information display.

### ✗ Not Allowed

* Fussy vintage pastiche (doilies, ornate floral borders, script/cursive fonts).
* Cramped menu rows that damage readability.
* Too much claret (using it for text highlights, multiple background blocks, or borders).
* Any variation of beige, brown, or faux-aged paper backgrounds.
* Badges, user avatars, or modern SaaS-style UI components.
Preview