Pearl Ash Navy-Ink & Morello Register

/pearlAshNavyinkMorelloRegister
A design system for understated, owner-editable hospitality interfaces inspired by fine ledgers, with high-contrast serif typography, pearl and ash palette, and restrained use of morello-red for subtle confidence and authority.
Sep 17, 2026
Design System Content
# Pearl Ash Navy-Ink & Morello Button Register

A design language for restrained, quietly expensive physical service and hospitality interfaces.

---

## Philosophy

> "Elegance should feel practical, owner-editable, and quietly expensive through proportion rather than polish."

This system creates interfaces that emulate fine printed stationery, classic ledgers, and physical registers. It firmly rejects fake boutique gloss, tech-startup tropes, and trendy sans-serif defaults. The aesthetic relies on the physical weight of ink on paper, structured by a steady, old-builder architectural rhythm. 

### Core Beliefs

1. **Proportion over Polish** — Luxury is achieved through precise structural spacing and disciplined left edges, never through shadows, gradients, or decorative borders.
2. **Owner-Editable Practicality** — Layouts must feel like well-organized documents (like printed menus or ledgers) that a proprietor could intuitively update. 
3. **The Restrained Register Aesthetic** — Surfaces are pearl-white, blocks are pale ash-grey, and the typography is deeply impressed navy-black. 
4. **Ruthless High Contrast** — Weak body text contrast is a critical failure. Body copy must be nearly black to mimic heavy ink density on porous paper.
5. **The Solemn Accent** — A dry morello-red is the only accent color. It is strictly limited to the primary button, active navigation state, and a single confidence line.

### Strict Rules

* **No Icons, Badges, or Avatars** — Authority is established through typography and imagery. Icons are cheap distractions.
* **Serif-Exclusive Typography** — Avoid trendy AI-favourite sans-serif display clichés. Headings are strictly capped between 38px and 46px maximum.
* **No Beige** — Warm off-whites dilute the crisp, structural austerity of the pearl and ash palette.
* **No Corporate Navy or Generic Red** — Text is an inky navy-black. The accent is a deeply desaturated, dry morello-red.
* **Credibility Above the Fold** — Golden proof stars and a centered credibility block featuring review counts must anchor the hero section.

---

## Color Palette

### Monochromatic Ledger Scale

The palette relies on stark, clean contrasts. Surfaces are bright but not sterile, blocks are architectural and cool (ash, not beige), and typography is the color of deep, dried ink.

```css
/* Surfaces & Blocks */
bg-white              /* Pearl-white main canvas (#ffffff) */
bg-slate-50           /* Pale ash-grey blocks, plain three-column backgrounds */
bg-slate-100          /* Document-style menu table alternating rows, hover zones */
bg-slate-200          /* Image placeholders, subtle interaction states */

/* Fine Slate Rules */
border-slate-200      /* Structural dividers, menu table rules */
border-slate-300      /* Hovered borders, active form inputs */
border-slate-800      /* Heavy architectural demarcations */

/* Golden Review Stars */
text-amber-500        /* Pure gold for proof stars (the only decorative color allowed) */

/* The Dry Morello-Red Accent */
text-[#731923]        /* Active nav links, typographic emphasis */
bg-[#731923]          /* Primary buttons only */
border-[#731923]      /* Single confidence line under hero / active tab border */
hover:bg-[#5E121A]    /* Deepened morello-red for button hover states */

/* Deep Navy-Black Typography */
text-slate-950        /* Primary headings, high-contrast body copy (Inky navy-black) */
text-slate-800        /* Secondary body text, table data */
text-slate-600        /* Muted metadata, location rows, opening hours */
text-slate-400        /* Subtle placeholders, disabled input text */
```

---

## Typography

Typography is the absolute foundation of this system. It pairs classic, literary headings with high-legibility, high-contrast serif body text. 

### Font Families

*   **Headings:** `font-serif` mapped to *Cormorant Infant, GFS Didot,* or *Rufina*.
*   **Body:** `font-serif` mapped to *Vollkorn, Literata,* or *Charter*.

### Font Weights

```css
font-normal      /* Standard weight for all body text, menu tables, and general reading */
font-medium      /* Subtle emphasis for location/opening rows, primary buttons */
font-semibold    /* Reserved for credibility counts, specific table headers */
/* font-bold and font-light are avoided to maintain the even density of a printed page */
```

### Font Size Scale (Strict Caps)

```css
text-xs          /* Fine print, bottom-page disclaimers (12px) */
text-sm          /* Location/opening rows, menu item descriptions (14px) */
text-base        /* Standard high-legibility body, plain information text (16px) */
text-lg          /* Subheadings, review excerpts (18px) */
text-xl          /* Standard section dividers, document titles (20px) */
text-2xl         /* Secondary section headings */
text-[38px]      /* Mobile hero heading (Maximum allowable size) */
text-[46px]      /* Desktop hero heading (Strict maximum — NEVER larger) */
```

### Letter Spacing & Rhythm

```css
tracking-normal  /* Steady old-builder rhythm for all reading text */
tracking-wide    /* Specifically for centered credibility blocks or menu categories */
leading-relaxed  /* Used for plain three-column information sections */
leading-snug     /* Document-style menu tables, direct location rows */
```

### Hierarchy Examples

| Element | Size | Font | Weight | Color | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | [38px]-[46px] | Didot/Rufina | normal | slate-950 | Left or Centered |
| Section Titles | 2xl | Didot/Rufina | normal | slate-950 | Disciplined Left |
| Main Body | base | Vollkorn/Charter | normal | slate-950 | Disciplined Left |
| Menu Item | base | Vollkorn/Charter | medium | slate-950 | Left |
| Action Buttons | base | Vollkorn/Charter | medium | white | Centered |

---

## Animation System

### Core Philosophy: The Physical Lift

Motion must never distract. There is absolutely zero parallax spectacle. Elements appear as if a light is being turned on in a window, or a physical card is being lifted from a table.

### Page Transitions (Opacity Reveals)

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

### Micro-Interactions (Subtle Image Lift)

When interacting with heavy image blocks, the image subtly lifts with a restrained transition. No aggressive scaling.

```tsx
whileHover={{ y: -2 }}
transition={{ duration: 0.2, ease: "easeOut" }}
```

---

## UI Components

### The Single Confidence Line

A defining architectural element. A dry morello-red hairline spanning the width of the main content container, placed strategically above or below the hero section to ground the layout.

```tsx
<hr className="w-full border-t border-[#731923] my-8" />
```

### Compact Light Navbar

A strictly restrained navigation bar. No logos acting as giant badges. Text-only, compact spacing. Active state utilizes the dry morello-red.

```tsx
<nav className="w-full bg-white border-b border-slate-200 py-4 px-8 flex justify-between items-center">
  <span className="text-xl font-serif text-slate-950 tracking-wide">Proprietor</span>
  <div className="flex gap-6 text-sm font-serif">
    <a href="#" className="text-slate-600 hover:text-slate-950 transition-colors">Information</a>
    <a href="#" className="text-[#731923] border-b border-[#731923]">Menu</a>
    <a href="#" className="text-slate-600 hover:text-slate-950 transition-colors">Location</a>
  </div>
</nav>
```

### Proof Stars & Centered Credibility Block

Positioned strictly above the fold. No flashy widgets, just honest, centered typesetting.

```tsx
<div className="flex flex-col items-center justify-center space-y-2 py-8">
  <div className="flex gap-1 text-amber-500 text-lg">
    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
  </div>
  <p className="font-serif text-sm text-slate-800 tracking-wide uppercase">
    Based on <span className="font-semibold text-slate-950">142</span> authentic reviews
  </p>
</div>
```

---

## Component Catalog

### Blocks & Sections

```tsx
// Plain Three-Column Information Section
<section className="grid grid-cols-1 md:grid-cols-3 gap-8 py-16 px-8 bg-slate-50 text-left border-y border-slate-200">
  {/* Column content */}
</section>

// Image-Heavy Hero Container
// Expects imagery matching: Window light, leather diary texture, white china, printed menus
<div className="w-full aspect-[16/9] md:aspect-[21/9] bg-slate-200 overflow-hidden relative">
  <img src="window-light.jpg" className="w-full h-full object-cover" />
</div>
```

### Buttons

Strictly one primary button type. It uses the morello-red accent. No rounded pills, just slight softening (rounded-sm) to emulate cut cardstock.

```tsx
// Primary Button (The Morello Register Button)
"bg-[#731923] text-white font-serif font-medium text-base rounded-sm px-6 py-3 hover:bg-[#5E121A] transition-colors"

// Secondary Action (Text only, deeply understated)
"text-slate-950 font-serif font-medium text-base border-b border-slate-300 hover:border-slate-950 pb-0.5 transition-all"
```

### Document-Style Menu Table

A plain, high-contrast, data-heavy layout acting as a ledger. No decorative borders, just fine slate rules.

```tsx
<div className="w-full font-serif text-left">
  <div className="flex justify-between items-baseline py-4 border-b border-slate-200">
    <div className="flex flex-col">
      <span className="text-lg text-slate-950 font-medium">Heirloom Tomato Tart</span>
      <span className="text-sm text-slate-600">Caramelized onion, goat curd, shortcrust</span>
    </div>
    <span className="text-base text-slate-950 font-medium whitespace-nowrap ml-4">18.—</span>
  </div>
</div>
```

### Direct Location/Opening Rows

```tsx
<div className="flex justify-between py-2 text-sm font-serif border-b border-slate-200 last:border-0">
  <span className="text-slate-600">Tuesday – Saturday</span>
  <span className="text-slate-950 font-medium">17:00 — 23:00</span>
</div>
```

---

## Quality Checklist

* [ ] Are all headings strictly capped between `38px` and `46px`? 
* [ ] Is the body text contrast strong enough? (Using `text-slate-950` or `text-slate-800`, never light grey).
* [ ] Are icons, avatars, and badges completely stripped from the interface?
* [ ] Is Morello Red (`#731923`) used exclusively for the primary button, active nav, and a single confidence line?
* [ ] Does the hero section include five golden review stars and a centered credibility block?
* [ ] Are all sections adhering to a "disciplined left edge" alignment (aside from the credibility block)?
* [ ] Is all imagery strictly photographic (window light, white china, printed menus) without any fake boutique gloss or parallax motion?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast, inky navy-black (`text-slate-950`) serif typography.
* Pale ash-grey (`bg-slate-50`) structural blocks.
* Medium to heavy section padding (`py-12`, `py-16`) to create a steady rhythm.
* Simple opacity reveals and tiny `2px` physical lifting on image hover.
* Strictly document-styled lists, tables, and ledgers.

### ✗ Not Allowed

* Sans-serif fonts in any form (no Inter, no Roboto, no geometric defaults).
* Text sizes exceeding 46px (no massive modern hero typography).
* Badges, icons (no SVGs for checkmarks, arrows, or user profiles), or emojis.
* Beige, cream, or warm off-white backgrounds.
* Corporate bright navy blues or generic bright reds.
* Drop shadows, parallax scrolling, or complex layered overlaps.
Preview