Porcelain Seagreen Parlour Notice Board

/porcelainSeagreenParlourNoticeBoard
A strictly functional, typographically rich design system for hospitality, evoking authentic, owner-edited café layouts with honest photography, alternating seagreen and porcelain bands, and minimal, purposeful color accents.
Sep 6, 2026
Design System Content
# Porcelain Seagreen Parlour Notice Board Design System

A design language for honest, highly functional, and typographically rich hospitality interfaces.

---

## Philosophy

> "Charm is earned through documentary clarity, never through decoration."

This system creates interfaces that feel like a carefully maintained, old-builder-inspired café layout. It rejects the overly polished, generic green "café brochure" aesthetic in favor of something that feels deeply authentic, structural, and strictly purposeful. The design relies on the tactile reality of honest photography, precise architectural rulings, and deeply considered typography. 

### Core Beliefs

1. **Absolute Utility** — Every single section must look useful and owner-editable. There is no room for decorative fluff; the interface is a working document.
2. **Documentary Charm** — Warmth is achieved strictly through honest, high-quality photography (counter cakes, teapots, menu sheets, village frontage) and typographic rigor, not via digital textures.
3. **Modest Rhythm over Luxury Emptiness** — Spacing features steady gutters and a modest vertical rhythm. Elements are comfortably grouped without the vast, floating emptiness typical of high-fashion luxury brands.
4. **The Accent is a Scarcity** — The accent color (Dry Raspberry) is rationed strictly for high-conversion booking buttons and crucial review pull quotes. 

### Strict Rules

* **No Chalkboard Nostalgia** — Hand-drawn elements, script fonts, and chalkboard textures are strictly forbidden.
* **No Badges or Avatars** — Remove digital tropes like user avatars or rounded floating status badges. Rely on plain text and context.
* **No Beige** — Warmth comes from photography and the golden yellow stars, not muddy beige backgrounds. 
* **Strict Page Structure** — The hero must contain: a dark navigation bar, a large atmospheric image, a concise headline, star proof, and a simple CTA row. This is followed seamlessly by centered review-count copy, alternating seagreen and white content bands, a finely ruled menu table, a full-height background image with an overlaid notice, and a straightforward location block.
* **No Oversized CTAs** — Buttons are modest, straightforward, and functionally sized. 

---

## Color Palette

### Base & Structural Colors

The palette is rooted in porcelain whites and dark, institutional greens, anchored by deep graphite text and pale smoke-gray architectural lines. 

```css
/* Backgrounds & Bands */
bg-white              /* Porcelain-white: Primary sections, menu boards (#fdfdfc) */
bg-teal-900           /* Dark Seagreen: Navigation bar, alternating content bands (#113d36) */
bg-teal-950           /* Deep Seagreen: Darker hover states for navbar links (#0a2924) */

/* Structural Lines */
border-gray-200       /* Pale smoke-gray: Row rules, menu table dividers, subtle framing */
border-gray-300       /* Slightly darker smoke-gray for active input borders */
border-teal-800       /* Border rules used inside the dark seagreen bands */

/* Typography */
text-gray-900         /* Deep graphite: Primary copy, headings, and menus (#1a1a1a) */
text-gray-600         /* Lighter graphite: Secondary copy, metadata, timestamps */
text-white            /* Porcelain: Text sitting on dark seagreen bands */
text-teal-50          /* Slightly muted white for secondary text on dark bands */

/* Specific UI Elements */
text-yellow-400       /* Golden yellow: EXCLUSIVELY for star proof icons (#fbbf24) */
fill-yellow-400       /* Golden yellow: SVG fill for star ratings */

/* The Accent: Dry Raspberry */
bg-rose-700           /* Booking buttons, critical primary actions (#be123c) */
text-rose-700         /* Review pull quote text, minimal high-priority links */
border-rose-700       /* Accent ruling for booking button borders */
hover:bg-rose-800     /* Subtle darken for dry raspberry button interactions */
```

---

## Typography

The typographic system pairs classical, highly legible serifs with clean, utilitarian sans-serifs to evoke a printed, owner-edited notice board.

### Font Families

```css
font-serif      /* Times New Roman, Libre Baskerville, or Lora. Used for main headlines, pull quotes, and editorial moments. */
font-sans       /* Avenir Next, Jost, or PT Sans. Used for menu items, buttons, navigation, and structural data. */
```

### Font Weights

```css
font-normal      /* Core body copy, menu item descriptions, standard text */
font-medium      /* Navigation items, buttons, simple CTA rows */
font-semibold    /* Menu item names, location block headers, review counts */
/* font-light and font-black are generally avoided to maintain a steady, printed utility */
```

### Font Size Scale

```css
text-xs          /* Fine print, location metadata, footer links (12px) */
text-sm          /* Menu descriptions, standard utility text, CTA buttons (14px) */
text-base        /* Standard paragraph copy, navigation links (16px) */
text-lg          /* Review pull quotes, secondary section headings (18px) */
text-xl          /* Subtitles, menu category headers (20px) */
text-2xl         /* Content band headlines (24px) */
text-4xl         /* Hero concise headline (36px) */
```

### Letter Spacing & Transforms

```css
tracking-normal  /* Default paragraph flow text, serifs */
tracking-wide    /* Table headers, small sans-serif utility text */
tracking-tight   /* Large hero headlines */

capitalize       /* Menu items, standard button text */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color |
| --- | --- | --- | --- | --- |
| Concise Hero Headline | Serif | 4xl | normal | white (on seagreen bg) |
| Menu Item Name | Sans | base | semibold | text-gray-900 |
| Menu Description | Sans | sm | normal | text-gray-600 |
| Pull Quote | Serif | lg | normal | text-rose-700 |
| Action Buttons | Sans | sm | medium | white (on rose bg) |

---

## Animation System

### Core Philosophy: The Still Document

Motion is restricted entirely to basic, gentle fades. The interface should feel like printed matter placed on a notice board. Elements do not slide, bounce, or spring.

### Page Transitions & Interactions

```tsx
// Simple, gentle fade for image loading or tab switching
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.4, ease: "easeInOut" }}
```

### Hover States

```tsx
// Buttons simply crossfade background color
className="transition-colors duration-200 ease-in-out"

// Images simply fade into standard opacity if lazy loaded
className="transition-opacity duration-500 ease-in"
```

---

## UI Components

### Dark Seagreen Navbar

A rigid, unshrinking structural bar at the top of the viewport. No transparency.

```tsx
<nav className="w-full bg-teal-900 text-white py-4 px-6 border-b border-teal-950 flex justify-between items-center">
  {/* Sans-serif navigation elements */}
</nav>
```

### The Star Proof

A highly specific, utilitarian grouping of golden yellow stars.

```tsx
<div className="flex items-center space-x-1 py-2">
  <StarIcon className="w-5 h-5 text-yellow-400 fill-current" />
  <StarIcon className="w-5 h-5 text-yellow-400 fill-current" />
  <StarIcon className="w-5 h-5 text-yellow-400 fill-current" />
  <StarIcon className="w-5 h-5 text-yellow-400 fill-current" />
  <StarIcon className="w-5 h-5 text-yellow-400 fill-current" />
</div>
```

### Finely Ruled Menu Table

A core feature of the interface. Items are separated strictly by pale smoke-gray lines, maintaining perfect documentary alignment.

```tsx
<div className="w-full max-w-3xl mx-auto border-t border-gray-200">
  <div className="py-4 border-b border-gray-200 flex justify-between items-baseline">
    <div className="font-sans">
      <h4 className="text-base font-semibold text-gray-900">Victoria Sponge</h4>
      <p className="text-sm text-gray-600 mt-1">House jam, vanilla buttercream</p>
    </div>
    <span className="text-base font-medium text-gray-900">£4.50</span>
  </div>
</div>
```

### Notice Board Overlay

Used for the full-height background image section to display notices with strong legibility contrast.

```tsx
<div className="relative w-full min-h-screen bg-[url('/honest-frontage.jpg')] bg-cover bg-center">
  <div className="absolute inset-0 bg-teal-900/60 mix-blend-multiply" /> {/* Strong contrast overlay */}
  <div className="relative z-10 max-w-lg mx-auto mt-24 bg-white p-8 border border-gray-200 shadow-sm">
    <h3 className="font-serif text-2xl text-gray-900 mb-4">A Notice to Patrons</h3>
    {/* Body copy */}
  </div>
</div>
```

---

## Component Catalog

### Structure & Bands

```tsx
// Dark Seagreen Content Band
"w-full bg-teal-900 text-white py-16 px-6 lg:px-12"

// Porcelain-White Content Band
"w-full bg-white text-gray-900 py-16 px-6 lg:px-12 border-y border-gray-200"
```

### Buttons

```tsx
// Dry Raspberry Booking Button (Modest Size, High Impact)
"bg-rose-700 text-white font-sans font-medium text-sm px-5 py-2.5 hover:bg-rose-800 transition-colors"

// Simple CTA Row Button (Secondary, Pale Smoke-Gray rule)
"bg-transparent text-white border border-white/30 font-sans font-medium text-sm px-5 py-2.5 hover:bg-white/10 transition-colors"
```

### Pull Quotes

Used strictly with the dry raspberry accent to draw attention to critical social proof.

```tsx
<blockquote className="font-serif text-lg text-rose-700 border-l-2 border-rose-700 pl-4 my-8">
  "The finest tea service in the county, impeccably maintained."
</blockquote>
```

### Photographic Imagery

Honest photography requires standard framing without rounded corners or floating shadows.

```tsx
// Image Container
"w-full aspect-[4/3] bg-gray-100 object-cover border border-gray-200"
```

---

## Quality Checklist

* [ ] Does the hero strictly feature the dark seagreen navbar, large atmospheric image, concise headline, star proof, and simple CTA row?
* [ ] Are the content bands strictly alternating between dark seagreen and porcelain-white?
* [ ] Is the menu table structured exclusively with horizontal pale smoke-gray rules (`border-gray-200`)?
* [ ] Is the dry raspberry color (`rose-700`) used *only* for booking buttons and review pull quotes?
* [ ] Is the photography completely honest (counter cakes, teapots, menus, frontage) without stylistic filters or text over complex image areas without proper overlays?
* [ ] Does the background image overlay provide deep, undeniable contrast for the Notice text?
* [ ] Have all badges, avatars, and emojis been purged from the layout?
* [ ] Are the CTA buttons modest and standard-sized, avoiding the "oversized marketing" trap?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Dark Seagreen (`teal-900`) and Porcelain-White (`white`) alternating bands.
* Pale smoke-gray (`border-gray-200`) for all dividers and structural lines.
* High-quality, honest, square or 4:3 architectural/culinary photography.
* Deep contrast overlays on background images to ensure absolute text clarity.
* Golden yellow stars for social proof.
* Strict mix of classical Serif (headlines/quotes) and utilitarian Sans-serif (data/menus).

### ✗ Not Allowed

* **Beige Backgrounds** — No faux-parchment or warm vintage backgrounds. 
* **Badges & Avatars** — No floating circular profile pictures, no rounded "New!" or "Popular!" tags.
* **Chalkboard Nostalgia** — No hand-drawn typography, chalk textures, or distressed borders.
* **Oversized CTAs** — No massive, full-width, pulsing marketing buttons.
* **Generic Green Templates** — No bright, leafy greens or organic eco-shapes.
* **Spring Animations** — No bouncing, sliding, or physics-based motion. Fades only.
Preview