Moonstone Marine Afternoon Tea Register

/moonstoneMarineAfternoonTeaRegister
A refined café design system focused on credible, authentic hospitality, menu clarity, and reliable booking UI, using real photography, classic structure, and a restrained, elegant palette without clichés or AI-generated visuals.
Sep 6, 2026
Design System Content
# Moonstone Marine Afternoon Tea Register

A refined, light café design system optimized for authentic hospitality, menu clarity, and credible table-service booking interfaces.

---

## Philosophy

> "Credibility is served through proof; hospitality is felt through calm hierarchy."

This system creates interfaces that evoke a genuine, well-lit café environment. It balances the timeless elegance of afternoon tea with the practical, maintainable discipline of a 2014-era structural web builder. It relies on authentic imagery, rectangular framing, and precise typographic rhythm rather than trendy visual clutter.

### Core Beliefs

1. **Credibility comes from calm hierarchy** — Structured, predictable layouts reassure the user. Predictability is a proxy for excellent hospitality.
2. **Review proof near decisions** — Trust signals (stars, review counts) must be physically adjacent to headlines and calls-to-action.
3. **Real photographs over graphics** — Visuals must strictly feature authentic table-service, china, cake stands, receipts, and natural window frontage. 
4. **Menu clarity is paramount** — Food and beverage offerings demand strict, easy-to-scan tabular layouts with fine, unobtrusive rules.
5. **Rectangular discipline** — Spacing should be maintainable and functional, avoiding the over-polished, floating "luxury" spacing that makes interfaces feel disconnected from reality.

### Strict Rules

* **No Beige, No Chalkboards** — Avoid tired café clichés. The palette is strictly marine, moonstone, pewter, and sea-glass.
* **No AI Motifs or Avatars** — Human faces (avatars) and AI-generated vector graphics are strictly forbidden. Use real photography (window light, tactile cafe items).
* **No Badges** — Status and categories are communicated through clear typography, never through pill-shaped UI badges.
* **Hero Requires Dark Navbar** — The primary navigation must consistently anchor the page in dark Marine blue.
* **Alternating Bands** — Page structure must rely on alternating Marine blue and Moonstone white full-width feature bands.

---

## Color Palette

### The Moonstone & Marine Scale

The palette contrasts deep, oceanic blues with crisp, moonstone whites and pale pewter structural lines. Calls-to-action and highlights use a muted, tactile sea-glass green, while social proof glows in golden yellow.

```css
/* Backgrounds (Canvas & Bands) */
bg-white              /* Moonstone-white primary content panels (#ffffff) */
bg-slate-50           /* Subtle secondary content areas (#f8fafc) */
bg-slate-900          /* Dark Marine-blue for navbar, hero, and alternating bands (#0f172a) */
bg-slate-800          /* Secondary Marine-blue for footer or focused dark zones */

/* Borders & Dividers */
border-slate-200      /* Pale pewter dividers, fine rules for HTML table menus */
border-slate-300      /* Hover states for structural boundaries */
border-slate-700      /* Dividers within Marine-blue bands */

/* Typography */
text-slate-900        /* Ink-navy for primary copy, headlines on Moonstone */
text-slate-700        /* Secondary copy, menu descriptions */
text-slate-500        /* Muted metadata, location columns */
text-white            /* Primary copy on Marine-blue bands */
text-slate-300        /* Secondary copy on Marine-blue bands */

/* Accents (Sea-Glass & Golden Proof) */
bg-teal-600           /* Muted sea-glass for primary CTAs (#0d9488) */
text-teal-600         /* Sea-glass text for text-links and proof highlights */
bg-teal-50            /* Super subtle sea-glass background for proof highlights */
text-amber-400        /* Golden yellow EXCLUSIVELY for review stars (#fbbf24) */
```

### Destructive Actions (Cancellations)

```css
hover:bg-red-50
hover:text-red-700
hover:border-red-200
```

---

## Typography

The typographic system pairs the elegant, editorial feel of a traditional serif (used sparingly) with a clean, highly legible modern sans-serif for UI and menu data. 

* **Primary Serif:** Playfair Display (or Georgia) — reserved for italics, refined introductory headers, and specific menu section titles.
* **Primary Sans-Serif:** Jost (or Gill Sans Nova / Source Sans 3) — used for all core UI, body copy, and tabular menu data.

### Font Families & Weights

```css
font-serif italic   /* High-end accents, introductory subheads (Playfair Display) */
font-sans           /* All core content, menus, buttons (Jost/Gill Sans Nova) */

font-light          /* Large display headers in Marine bands */
font-normal         /* Core ink-navy body copy, menu descriptions */
font-medium         /* Menu item names, UI text, location columns */
font-semibold       /* Review counts, CTA buttons, tabular headers */
```

### Font Size Scale

```css
text-xs          /* Fine print, receipt details, secondary location data (12px) */
text-sm          /* Menu descriptions, standard tabular data (14px) */
text-base        /* Standard paragraph flow, menu item names (16px) */
text-lg          /* Review count text, feature band highlights (18px) */
text-xl          /* Sub-section headers (20px) */
text-2xl         /* Menu category headers (Playfair italic) */
text-4xl-5xl     /* Hero headlines, full-height notice section titles */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Styling |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Sans | 5xl | light | white | none |
| Review Stars | Sans | base | normal | amber-400 | none |
| Menu Category | Serif | 2xl | normal | slate-900 | italic |
| Menu Item Name | Sans | base | medium | slate-900 | none |
| Menu Price/Data | Sans | sm | medium | slate-700 | tabular-nums |
| Secondary Text | Sans | sm | normal | slate-700 | none |

---

## Animation System

### Core Philosophy: Restrained & Grounded

Motion should feel like turning a physical page or observing light through a café window. No bouncy springs or elastic easing. 

### Page Transitions & Reveals

Simple, linear fades that prioritize immediate legibility over theatricality.

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

### Micro-Interactions (Underline Hovers)

Interactive elements rely on classic, 2014-builder disciplined underline reveals rather than complex background shifts.

```css
/* Standard Text Link Hover */
"text-teal-600 relative after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-[1px] after:bottom-0 after:left-0 after:bg-teal-600 after:origin-bottom-right hover:after:scale-x-100 hover:after:origin-bottom-left after:transition-transform after:duration-300"
```

### Restrained Parallax

Reserved strictly for the single, full-height background-image notice section.

```css
/* Applied to the full-height notice section container */
"bg-fixed bg-center bg-no-repeat bg-cover"
```

---

## UI Components

### The Marine Navbar Hero

A strict requirement. The top of the interface must anchor the user with a dark, structured navigation bar, seamlessly blending into the hero section.

```tsx
<header className="w-full bg-slate-900 text-white pb-16 pt-6 px-8">
  <nav className="flex justify-between items-center border-b border-slate-700 pb-6 mb-10">
    <div className="font-sans font-semibold text-lg tracking-wide uppercase">Logo</div>
    <div className="flex gap-6 text-sm font-medium">
      <a href="#" className="hover:text-teal-400 transition-colors">Menu</a>
      <a href="#" className="hover:text-teal-400 transition-colors">Location</a>
    </div>
  </nav>
  <div className="max-w-3xl text-center mx-auto">
    <h1 className="text-5xl font-light mb-4">Afternoon Tea Reservations</h1>
    {/* Stars strictly beneath headline */}
    <div className="flex justify-center items-center gap-2 mb-8">
      <div className="text-amber-400 flex text-lg">★★★★★</div>
      <span className="text-slate-300 text-sm">Based on 1,240 verified reviews</span>
    </div>
  </div>
</header>
```

### HTML-Table Menu with Fine Rules

Menus must be structured clearly using pale pewter dividers (`border-slate-200`). Rhythm and tabular alignment are critical.

```tsx
<table className="w-full text-left border-collapse">
  <thead>
    <tr>
      <th className="font-serif italic text-2xl text-slate-900 pb-4 border-b border-slate-900">
        Sandwiches & Savouries
      </th>
      <th className="pb-4 border-b border-slate-900 text-right text-slate-500 font-medium text-sm">
        Selection
      </th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b border-slate-200 hover:bg-slate-50 transition-colors">
      <td className="py-4 pr-4">
        <div className="font-medium text-slate-900">Cucumber & Dill</div>
        <div className="text-sm text-slate-700 mt-1">Lightly salted cucumber, dill cream cheese on artisan white bread.</div>
      </td>
      <td className="py-4 text-right align-top font-medium text-slate-900 tabular-nums">
        Included
      </td>
    </tr>
  </tbody>
</table>
```

### Centered Review-Count Section

Social proof is centralized and grounded in a Moonstone-white panel. 

```tsx
<div className="w-full bg-white py-12 px-6 flex flex-col items-center justify-center text-center border-y border-slate-200">
  <div className="text-amber-400 text-2xl mb-3 tracking-widest">★★★★★</div>
  <h3 className="font-sans font-semibold text-xl text-slate-900 mb-2">Exceptional Service</h3>
  <p className="text-slate-700 max-w-md text-sm">
    "The window seating provided beautiful natural light, and the china selection was immaculate."
  </p>
  <div className="mt-4 text-xs font-medium text-slate-500 uppercase tracking-wide">
    Verified Guest via Resy
  </div>
</div>
```

---

## Component Catalog

### Buttons (Sea-Glass CTAs)

```tsx
// Primary Booking / CTA
"bg-teal-600 text-white font-semibold text-sm px-6 py-3 rounded-none hover:bg-teal-700 transition-colors"

// Secondary Action (Ghost on Moonstone)
"border border-slate-900 text-slate-900 font-medium text-sm px-6 py-3 rounded-none hover:bg-slate-900 hover:text-white transition-colors"
```

### Practical Location Columns

Side-by-side rectangular layouts for addresses, hours, and contact details, ensuring maximum maintainability.

```tsx
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 border-t border-slate-200 pt-8 mt-8">
  <div>
    <h4 className="font-serif italic text-lg text-slate-900 mb-2">Address</h4>
    <p className="text-slate-700 text-sm leading-relaxed">
      124 Moonstone Promenade<br />
      Marine District, 90210
    </p>
  </div>
  <div>
    <h4 className="font-serif italic text-lg text-slate-900 mb-2">Hours</h4>
    <p className="text-slate-700 text-sm leading-relaxed">
      Tuesday – Sunday<br />
      11:00 AM – 4:30 PM
    </p>
  </div>
</div>
```

### Full-Height Notice Section

Used exactly once per page layout to break up tabular data and reinforce aesthetic atmosphere.

```tsx
<section className="w-full h-screen bg-fixed bg-center bg-cover flex items-center justify-center relative" style={{ backgroundImage: "url('/authentic-china-window-light.jpg')" }}>
  <div className="absolute inset-0 bg-slate-900/60"></div>
  <div className="relative z-10 text-center px-6 max-w-2xl">
    <h2 className="text-4xl font-light text-white mb-6">Reservations Required for Tea Service</h2>
    <button className="bg-teal-600 text-white font-semibold text-sm px-8 py-4 hover:bg-teal-700 transition-colors">
      Check Availability
    </button>
  </div>
</section>
```

---

## Quality Checklist

* [ ] Is the primary navigation bar rendering in dark Marine-blue (`bg-slate-900`)?
* [ ] Are the review stars placed *strictly beneath* the primary headline and rendered in `text-amber-400`?
* [ ] Does the menu use a traditional HTML table structure with fine `border-slate-200` pale pewter rules?
* [ ] Are all photographs featuring real, authentic hospitality items (china, cake stands, window frontage) with zero AI artifacts?
* [ ] Is the spacing rectangular and practical (standard paddings like `p-6`, `py-12`) rather than over-polished or aggressively large?
* [ ] Is the serif font (Playfair/Georgia) restricted primarily to italicized accents and specific section headers?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Alternating full-width horizontal bands of Marine-blue and Moonstone-white.
* Strict HTML tables for menu items, prices, and dietary flags.
* Pure rectangular containers and buttons (no highly rounded corners or pills).
* Classic CSS underline hover effects for links.
* Photography highlighting natural window lighting, paper receipts, and ceramic/china textures.

### ✗ Not Allowed

* **Generic Navy Templates:** Do not use default bootstrap/tailwind navy blue shades interchangeably; stick strictly to the stark contrast of ink-navy copy against moonstone-white, and deep marine for bands.
* **Over-polished luxury spacing:** Avoid massive, empty vertical gaps (e.g., `py-48`) that detach the content from reality. Keep it grounded and functional.
* **Badges & Avatars:** Never use circular user avatars or rounded colored status badges. Use text-based hierarchy instead.
* **Beige or Chalkboard textures:** Strictly forbidden. Do not rely on rustic café tropes.
* **AI Motifs/Graphics:** No vector illustrations, isometric coffee cups, or generative AI background art. Stick to photography.
Preview