Porcelain Sloe-Mint Parlour Ledger

/porcelainSloemintParlourLedger
A design system evoking heritage-led authority for local businesses, emphasizing ruled structure, porcelain whites, editorial typography, and authentic tactile photography. Avoids SaaS clichés, delivering world-class elegance with decisive focus and architectural alignment.
Aug 24, 2026
Design System Content
# Porcelain Sloe-Mint Parlour Ledger

A design language for high-end, editorial local businesses that command authority through heritage and structural precision.

---

## Philosophy

> "A local business can feel world-class without feeling over-designed."

This system creates interfaces that emulate a high-end physical ledger or an elite parlor menu. The design rejects the homogenized, card-heavy SaaS aesthetic in favor of strict, ruled structures, deep editorial typography, and believable photography. It relies on architectural legibility and steady spacing, conjuring a premium effect through quiet confidence and absolute alignment rather than trendy decoration. 

### Core Beliefs

1. **Structure is elegance** — Steady, ruled, slightly old website-builder layouts (like HTML tables with fine borders) provide an anchored, trustworthy framework. 
2. **Editorial contrast** — The interplay between vast porcelain-white canvases and rich, blue-black serif typography creates a timeless, print-like authority.
3. **Photography as evidence** — Imagery must feel tactile and real—china, window glass, receipts, and table settings. The interface frames the physical world.
4. **Decisive focal points** — A deeply saturated dark sloe-mint grounds the main feature block and guides critical actions, refusing to act as a mere accent.

### Strict Rules

* **No SaaS Conventions** — Absolutely no floating cards, avatars, heavy box-shadows, or rounded "badges."
* **No Sterile Stock** — Photography must feature authentic village frontages, afternoon-tea setups, or genuine tactile objects.
* **Strict Hero Composition** — The hero must be a split layout containing village frontage/tea photography, followed by hero copy, and anchored by golden stars and a review count directly beneath the copy.
* **Mandatory Centered Credibility** — A centered credibility headline must bridge the hero and the core content.
* **Ruled Menus** — All menus or itemized lists must use strict HTML-table layouts with fine mist-gray rules.
* **No Beige, No Generic Teal, No Corporate Green** — Backgrounds remain porcelain white; the accent is strictly a dark, rich sloe-mint.

---

## Color Palette

### The Ledger Scale

The palette relies on stark, clean porcelain backgrounds crossed by delicate mist-gray architectural lines, overlaid with deep, ink-like blue-black typography. The singular brand anchor is Dark Sloe-Mint.

```css
/* Backgrounds */
bg-[#FFFFFF]          /* Porcelain White: The absolute canvas for all main content */
bg-[#F8FAFC]          /* Subtle off-white for secondary structural containment (rare) */

/* Structural Rules (Mist-Gray) */
border-slate-200      /* Standard mist-gray section breaks and table rules */
border-slate-300      /* Slightly heavier rules for major structural headers */
divide-slate-200      /* Used strictly for HTML-table menu spacing */

/* Typography (Blue-Black) */
text-slate-950        /* Primary text, hero headlines, menu items, table data */
text-slate-800        /* Secondary body text, owner-editable panel copy */
text-slate-500        /* Fine print, tertiary ledger metadata */

/* Credibility Anchors */
text-amber-500        /* Golden review stars (strict application only) */
text-amber-600        /* Golden review stars (hover or active state if needed) */

/* The Anchor: Dark Sloe-Mint */
/* Note: Must never lean towards generic teal or corporate green */
bg-[#133A2F]          /* Main feature block background, decisive CTA buttons */
text-[#133A2F]        /* High-priority text links, credibility headline accents */
border-[#133A2F]      /* Decisive structural borders, focused inputs */
hover:bg-[#0E2B23]    /* CTA interaction states */
```

---

## Typography

The typography philosophy demands a strict dichotomy: majestic, editorial serifs for reading and commanding attention, paired with highly legible, geometric sans-serifs for tiny utilitarian interface elements.

### Font Families

```css
/* Primary Editorial (Serif) */
/* Families: Requiem Text, Georgia Pro, or Times New Roman */
font-serif            /* Used for all headings, hero text, and primary body copy */

/* Small UI Text (Sans-Serif) */
/* Families: Josefin Sans, Gill Sans Nova, or FF Meta */
font-sans             /* Used exclusively for navigation links, metadata, and fine rules */
```

### Font Weights

```css
font-normal      /* The backbone of the interface. Used for 90% of serif body text */
font-medium      /* Small UI text, navigation, table headers */
font-semibold    /* Credibility headlines, decisive CTAs, and review counts */
/* font-light and font-bold are generally avoided to maintain ledger-like uniformity */
```

### Font Size Scale

```css
text-[11px]      /* Tiny ledger metadata, footer copyright */
text-xs          /* Navbar links, small UI descriptors, location module labels */
text-sm          /* HTML-table menu item descriptions, review counts */
text-base        /* Standard body copy in owner-editable panels (16px) */
text-lg          /* Menu item names, standard sub-headings */
text-2xl         /* Centered credibility headlines */
text-4xl         /* Hero headlines */
text-5xl         /* Primary brand signage sizing */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large hero headlines to bind serif characters elegantly */
tracking-normal  /* Default ledger flow text */
tracking-widest  /* Tiny sans-serif UI labels and navigation items */

uppercase        /* Navbar items, location module headers, table column headers */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Serif | 4xl/5xl | normal | slate-950 | tight |
| Credibility Header| Serif | 2xl | semibold | slate-950 | normal |
| Panel Body Copy | Serif | base | normal | slate-800 | normal |
| Navigation Links | Sans | xs | medium | slate-950 | widest (upper) |
| Menu Prices | Sans | sm | medium | slate-950 | normal |

---

## Animation System

### Core Philosophy: Ink & Paper

Motion is brutally restricted. Bouncy springs, heavy slides, and scaling effects destroy the illusion of a physical parlor ledger. Motion is limited strictly to subtle opacities and stark typographic underlines.

### Page Transitions

```tsx
// Simple, slow fade-in. No vertical or horizontal movement.
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.6, ease: "easeInOut" }}
```

### Micro-Interactions (The Ruled Underline)

Links do not shift colors or generate background bubbles; they draw an ink-like line beneath themselves.

```css
/* Link Hover State */
"transition-all duration-300 underline decoration-1 underline-offset-4 decoration-transparent hover:decoration-slate-950"

/* Button Hover State */
"transition-colors duration-300 ease-in-out"
```

---

## UI Components

### The Elegant Navbar

A stripped-back, wide-spaced container. No background shadows, no pill-shaped active states.

```tsx
<nav className="w-full bg-white border-b border-slate-200 py-6 px-8 flex justify-between items-center">
  <div className="font-serif text-2xl tracking-tight text-slate-950">Brand Name</div>
  <div className="flex gap-8 font-sans text-xs uppercase tracking-widest text-slate-950">
    <a href="#" className="hover:underline decoration-1 underline-offset-4">Menu</a>
    <a href="#" className="hover:underline decoration-1 underline-offset-4">Visit</a>
  </div>
</nav>
```

### Split Hero & Credibility Anchor

The hero strictly pairs an authentic photo beside editorial copy, immediately followed by the golden stars.

```tsx
<header className="grid grid-cols-1 md:grid-cols-2 min-h-[70vh] border-b border-slate-200">
  {/* Photography Half */}
  <div className="relative w-full h-full">
    <img src="/village-frontage.jpg" alt="Village Frontage" className="object-cover w-full h-full" />
  </div>
  
  {/* Ledger Copy Half */}
  <div className="flex flex-col justify-center px-12 lg:px-24 bg-white">
    <h1 className="font-serif text-4xl text-slate-950 leading-snug mb-6">
      A tradition of quiet excellence.
    </h1>
    
    {/* Mandatory Stars & Review Count below hero copy */}
    <div className="flex items-center gap-3 mt-4">
      <div className="flex text-amber-500 text-lg">
        ★★★★★
      </div>
      <span className="font-sans text-sm text-slate-500 uppercase tracking-wide">
        Based on 142 Ledger Entries
      </span>
    </div>
  </div>
</header>

{/* Centered Credibility Headline */}
<div className="w-full py-16 bg-white flex justify-center text-center border-b border-slate-200">
  <h2 className="font-serif text-2xl font-semibold text-slate-950 max-w-2xl">
    Recognized by the Heritage Guild for Uncompromising Standards
  </h2>
</div>
```

### HTML-Table Menu

No floating items. Strict rows, ruled by mist-gray borders.

```tsx
<table className="w-full max-w-4xl mx-auto border-collapse text-left mb-16">
  <thead>
    <tr className="border-b-2 border-slate-300">
      <th className="font-sans text-xs uppercase tracking-widest text-slate-500 py-4 px-2">Offering</th>
      <th className="font-sans text-xs uppercase tracking-widest text-slate-500 py-4 px-2 text-right">Tribute</th>
    </tr>
  </thead>
  <tbody className="divide-y divide-slate-200">
    <tr className="hover:bg-slate-50/50 transition-colors">
      <td className="py-5 px-2">
        <div className="font-serif text-lg text-slate-950">Earl Grey Reserve</div>
        <div className="font-serif text-sm text-slate-500 mt-1">Steeped precisely at 98 degrees.</div>
      </td>
      <td className="py-5 px-2 text-right font-sans text-sm text-slate-950">
        $8.00
      </td>
    </tr>
  </tbody>
</table>
```

### Sloe-Mint Feature Block

The only massive use of color on the page. Deep, decisive, and structural.

```tsx
<section className="w-full bg-[#133A2F] text-white py-20 px-8 flex flex-col items-center text-center">
  <h3 className="font-serif text-3xl mb-6">Reserve the Parlour</h3>
  <p className="font-serif text-base opacity-90 max-w-xl mb-10 leading-relaxed">
    Join us for an evening of unmatched hospitality. Space is intimately limited.
  </p>
  <button className="bg-white text-[#133A2F] font-sans text-xs uppercase tracking-widest py-4 px-8 border border-white hover:bg-transparent hover:text-white transition-colors duration-300">
    Request Ledger Entry
  </button>
</section>
```

### Owner-Editable Content Panels

Used for about pages or seasonal announcements. Two columns, steady layout.

```tsx
<div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-slate-200 border-b border-slate-200">
  <article className="bg-white p-12 lg:p-20">
    <h3 className="font-serif text-2xl text-slate-950 mb-6">Our Philosophy</h3>
    <p className="font-serif text-slate-800 leading-relaxed">
      [Owner Editable Text] We believe in the tactile reality of good service...
    </p>
  </article>
  <article className="bg-white p-12 lg:p-20">
    <h3 className="font-serif text-2xl text-slate-950 mb-6">Sourcing</h3>
    <p className="font-serif text-slate-800 leading-relaxed">
      [Owner Editable Text] Every leaf and grain is accounted for in our ledgers...
    </p>
  </article>
</div>
```

---

## Quality Checklist

* [ ] Is the hero completely split between a grounded, authentic photo and editorial copy?
* [ ] Do the golden review stars appear *immediately* below the hero copy?
* [ ] Is the main feature block colored in exact Dark Sloe-Mint (`#133A2F`), strictly avoiding generic teal or corporate green?
* [ ] Are all menus built using strict HTML-table layouts with `border-slate-200` rules?
* [ ] Is the UI devoid of rounded SaaS cards, shadow borders, or avatar circles?
* [ ] Are all UI labels, prices, and navigation links using a geometric Sans-Serif font, leaving Serif purely for editorial reading?
* [ ] Are gutters and paddings completely consistent, emulating steady, structural ledger lines?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Porcelain-white backgrounds acting as vast, structural canvases.
* Mist-gray (`slate-200`) 1px lines used for section breaks and table rows.
* Blue-black serif text for ultimate reading legibility.
* Authentic, tactile photography (china, window glass, receipts, real table settings).
* Golden stars specifically for review modules.
* Typographic underlines for link hover states.

### ✗ Not Allowed

* **SaaS Interface Elements:** No floating cards, no border-radius above 2px, no drop shadows, no profile avatars, no notification badges.
* **Bad Color Implementations:** Absolutely no beige, no generic teal, no corporate green.
* **Sterile Imagery:** No vector illustrations, no generic sterile stock photography. 
* **Bouncy Animation:** No spring animations, no transform-scaling on hover, no page-load slides.
* **Inconsistent Spacing:** Gutters and padding must remain locked to rigid, table-like consistency. Broken grids ruin the ledger effect.
Preview