No preview available
Porcelain Teal Village Tea Ledger

/porcelainTealVillageTeaLedger
A design language for high-trust café interfaces: structured serifs, blue-black ink, porcelain backgrounds, tactile imagery, and a single deep-teal accent band. Rejects modern artifice for authentic, maintainable, countryside hospitality UI.
Aug 24, 2026
Design System Content
# Porcelain Teal Village Tea Ledger

A design language for authentic, high-trust countryside café and hospitality interfaces.

---

## Philosophy

> "Trust is built on legible menus, genuine hospitality, and uncompromising structure."

This system creates interfaces that act as a digital extension of a classic countryside café—immaculate porcelain settings, structured ledgers, and deep, confident accent bands. The aesthetic deliberately rejects modern decorative trends in favor of a "tidy, ruled, slightly 2015 builder" structure. It is designed to look authentic and realistically maintainable by a business owner, completely devoid of digital artifice.

### Core Beliefs

1. **Hierarchy through typographic tradition** — Blue-black serifs against porcelain white deliver immediate, undeniable authority and elegance.
2. **Review proof as the anchor** — Golden review stars are structural elements, placed deliberately beneath hero copy and above centered headlines to establish immediate trust.
3. **Document over decoration** — Menus function as legible tables and ledgers, utilizing pale pewter rules instead of cards or blocks.
4. **Authenticity in imagery** — Photography must be tactile and real: china, window glass, handwritten receipts, and village signs.
5. **The Teal Anchor** — A single, deep smoked-teal editorial band is used exclusively for booking confidence and feature separation, never as a primary background.

### Strict Rules

* **No Icons, Badges, or Avatars** — Reliance on abstract symbols degrades authenticity. Use clear, legible typography instead.
* **Absolutely No Beige** — Backgrounds are strictly porcelain white or cool pewter. Warm, earthy neutrals are forbidden.
* **Ruled Structures Only** — Separation is achieved through pale pewter horizontal rules (`border-b`). No drop shadows, floating cards, or translucent overlays.
* **Split Hero Dominance** — The hero section must strictly pair shopfront or afternoon-tea photography with a classic split text layout.
* **Restricted Motion** — Hover states and interactions are strictly limited to gentle opacity fades and 1px underlines. No scaling, moving, or springing.

---

## Color Palette

### Base Scale & The Blue-Black Ink

The palette is rooted in absolute clarity. Pure porcelain white fields are structured by cool, pale pewter rules, with text rendered in a deep, authoritative blue-black.

```css
/* Porcelain Fields (Backgrounds) */
bg-white              /* Primary canvas, main content areas (#ffffff) */
bg-slate-50           /* Ultra-subtle alternate banding for table rows */

/* Pale Pewter (Rules & Borders) */
border-slate-200      /* Primary structural rules, menu table dividers */
border-slate-300      /* Focus states, slightly stronger separations */

/* Blue-Black Ink (Typography) */
text-slate-950        /* Primary serif headings, menu item names */
text-slate-900        /* Body copy, review text, menu descriptions */
text-slate-500        /* Secondary metadata, table headers, small print */
text-slate-400        /* Disabled states, subtle ledger lines */
```

### The Anchors (Teal & Gold)

```css
/* Smoked Teal (Feature & Booking Confidence) */
bg-teal-900           /* The editorial band, primary booking section background */
text-teal-900         /* Primary text CTA links on porcelain backgrounds */
border-teal-900       /* Structural borders within the booking component */

/* Golden Review Proof */
text-amber-400        /* Review stars, rating integers */
```

---

## Typography

A strict duality between classic literary serifs for long-form reading/headings and clean, humanist sans-serifs for utility labels. 

* **Primary (Serif):** Times New Roman, Plantin, or Sabon. Used for all headings, body copy, and menu items.
* **Secondary (Sans):** Josefin Sans, Gill Sans Nova, or Scala Sans. Used exclusively for labels, table headers, and navigation.

### Font Weights

```css
font-normal      /* The absolute default. Elegant serifs do not need heavy weights. */
font-medium      /* Used sparingly for sans-serif utility labels and navigation. */
font-semibold    /* Reserved strictly for menu item prices or bolded ledger totals. */
/* font-bold and font-black are strictly forbidden. */
```

### Font Size Scale & Rhythms

```css
text-xs          /* Utility labels, location column metadata (12px) */
text-sm          /* Menu descriptions, secondary navigation (14px) */
text-base        /* Standard body copy, review text (16px) */
text-lg          /* Menu item titles, compact CTAs (18px) */
text-2xl         /* Centered review-led headlines, editorial subtitles (24px) */
text-4xl         /* Split hero primary headlines (36px) */
```

### Letter Spacing & Transforms

```css
tracking-normal  /* Default for all serif typography */
tracking-wide    /* Sans-serif navigation links, compact CTAs */
tracking-widest  /* Sans-serif table headers, location metadata */

uppercase        /* Utility sans-serif labels, navbar items, menu table headers */
```

### Hierarchy Examples

| Element | Typeface | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Serif | 4xl | normal | slate-950 | normal |
| Menu Item Name | Serif | lg | normal | slate-950 | normal |
| Menu Description| Serif | sm | normal | slate-900 | normal |
| Nav/CTA Labels | Sans | sm | medium | teal-900 | wide |
| Table Headers | Sans | xs | medium | slate-500 | widest |

---

## Animation System

### Core Philosophy: The Printed Page

Motion must never draw attention to itself. Interactions mimic the analog reality of moving an eye across a physical ledger or underlining a line of text.

### Page Transitions & Fades

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

### Hover States (The Underline)

Absolutely no background shifts on buttons or cards. Links and CTAs simply reveal a crisp underline, or slightly fade their opacity.

```tsx
// Typography Hover
className="underline decoration-1 underline-offset-4 decoration-transparent hover:decoration-teal-900 transition-colors duration-300"

// Imagery Hover
className="opacity-100 hover:opacity-90 transition-opacity duration-300"
```

---

## UI Components

### Split Hero (Shopfront / Text)

A rigid 50/50 split layout. Unapologetically structured ("slightly 2015 builder").

```tsx
<header className="grid grid-cols-1 md:grid-cols-2 border-b border-slate-200">
  <div className="flex flex-col justify-center p-12 lg:p-24">
    <h1 className="font-serif text-4xl text-slate-950 mb-6">Afternoon Tea by the Green</h1>
    <p className="font-serif text-base text-slate-900 mb-8">...</p>
    <ReviewStars />
  </div>
  <div className="h-96 md:h-auto bg-slate-100">
    <img src="/shopfront.jpg" alt="Café Shopfront" className="w-full h-full object-cover" />
  </div>
</header>
```

### The Document Menu Table

Menus are not floating cards. They are rigid, ledger-like tables with pale pewter rules.

```tsx
<div className="w-full max-w-3xl mx-auto border-t border-slate-200 pt-8">
  <div className="flex justify-between items-baseline border-b border-slate-200 pb-4 mb-4">
    <div>
      <h3 className="font-serif text-lg text-slate-950">Earl Grey Imperial</h3>
      <p className="font-serif text-sm text-slate-900 mt-1">Bergamot infused black tea with cornflower petals.</p>
    </div>
    <span className="font-serif text-base font-semibold text-slate-950 pl-4">£4.50</span>
  </div>
</div>
```

### Smoked-Teal Editorial Band

Used precisely once per page for booking confidence or a critical feature section.

```tsx
<section className="bg-teal-900 text-white py-16 px-8 text-center">
  <h2 className="font-serif text-2xl mb-4">Reserve a Table</h2>
  <p className="font-serif text-base opacity-90 max-w-xl mx-auto mb-8">...</p>
  {/* Compact CTA Row */}
  <div className="flex justify-center gap-6">
    <button className="font-sans text-sm uppercase tracking-wide border-b border-white pb-1 hover:opacity-80 transition-opacity">
      Book Now
    </button>
  </div>
</section>
```

---

## Component Catalog

### Navigation & CTAs

```tsx
// Elegant Light Navbar
"w-full flex justify-between items-center py-6 px-8 border-b border-slate-200 bg-white"

// Compact CTA Link (Replaces traditional bulky buttons)
"font-sans text-sm font-medium uppercase tracking-wide text-teal-900 underline decoration-1 underline-offset-4 decoration-transparent hover:decoration-teal-900 transition-colors"
```

### Review Elements

```tsx
// Golden Review Stars (5-Star Array)
<div className="flex gap-1 text-amber-400 text-lg mb-4" aria-label="5 out of 5 stars">
  ★★★★★
</div>

// Centered Review-Led Headline
<div className="text-center max-w-2xl mx-auto py-16">
  <div className="flex justify-center gap-1 text-amber-400 mb-6">★★★★★</div>
  <h2 className="font-serif text-2xl text-slate-950 leading-relaxed">
    "The finest porcelain service and clotted cream we've experienced in the county."
  </h2>
</div>
```

### Location Columns

```tsx
// Clear, grid-based location metadata (Footer or Contact section)
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-12 border-t border-slate-200">
  <div>
    <h4 className="font-sans text-xs uppercase tracking-widest text-slate-500 mb-4">Find Us</h4>
    <p className="font-serif text-base text-slate-950">14 High Street<br/>Little Combe<br/>GL56 0QA</p>
  </div>
  {/* Additional columns follow identical structure */}
</div>
```

---

## Quality Checklist

* [ ] Are golden review stars positioned immediately beneath the hero copy?
* [ ] Is the teal background (`bg-teal-900`) restricted to a single editorial band or booking section?
* [ ] Does the menu use strict horizontal rules (`border-slate-200`) instead of being cramped into floating cards?
* [ ] Are utility labels and navigation set in the secondary Sans-Serif font, strictly uppercase and tracked out?
* [ ] Are all interactions limited to simple opacity fades or 1px underline reveals?
* [ ] Is the hierarchy clearly driven by serif size and porcelain-white breathing room?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast blue-black serif typography on pure porcelain white backgrounds.
* Photography featuring china, window reflections, paper receipts, and village signage.
* Structured, document-style rows with pale pewter (`slate-200`) borders.
* A single, purposeful deep teal booking or feature section.
* Subtle layout grids reminiscent of 2015-era structured responsive design.

### ✗ Not Allowed

* **Beige or warm gray backgrounds** — Completely undermines the crisp porcelain aesthetic.
* **Overusing Teal** — Using teal for secondary text, buttons outside the teal band, or excessive borders turns the page into a generic brochure.
* **Badges, Avatars, or Icons** — Absolutely no SVG icons (e.g., location pins, phone icons). Use typography instead.
* **Cramped Menu Rows** — Menus must have generous vertical padding (`py-4` or `py-6`) between rules to feel like an elegant ledger.
* **Shadows or Overlays** — No drop shadows (`shadow-md`), dark gradient overlays on hero images, or translucent modals.
Preview