Frost White Aubergine-Black & Rouge Lacquer Notebook Design System

/frostWhiteAubergineblackRougeLacquerNotebookDesignSystem
A design system for refined, mysterious interfaces inspired by premium notebooks, focusing on architectural layouts, tactile contrasts, disciplined serifs, and severe color restraint for an editorial and immersive user experience.
Sep 17, 2026
Design System Content
# Frost White Aubergine-Black & Rouge Lacquer Notebook Design System

A design language for mysterious, highly refined, and editorial-grade interfaces built on the tactile qualities of a premium notebook.

---

## Philosophy

> "Refinement is produced by proportion, legibility, and restraint."

This system evokes the intimacy and mystery of a private, beautifully bound notebook. It relies on the tactile illusion of frost-white pages divided by cool lavender-grey bands and pewter hairlines. The interface is unembellished and strictly architectural, using aubergine-black ink for heavy contrast, golden stars for immediate trust, and a solitary flash of lacquered rouge to guide the eye.

### Core Beliefs

1. **Refinement through Proportion** — Beauty emerges from strict mathematical alignment and disciplined 2014-era spatial modules, not from decorative additions.
2. **Supreme Legibility** — Generous leading and meticulously paired serif typefaces create a calm, immersive reading experience.
3. **Restrained Color Temperature** — The canvas remains resolutely cool and stark. Warmth is introduced exclusively through imagery and the sparse use of golden yellow or rouge.
4. **Observed Photography** — Imagery must feel documentary, voyeuristic, and found. Nothing should ever feel polished, staged, or artificially lit. 

### Strict Rules

* **Cap at 3XL** — Serif hero claims must never exceed `text-3xl`. True confidence does not need to shout.
* **Immediate Proof** — Star ratings (golden) and review counts must appear immediately in the hierarchy.
* **Centered Social Proof** — Social-proof paragraphs must be strictly center-aligned.
* **Document-Style Menus** — Menus must rely entirely on ruled, horizontal pewter hairlines. No bounding boxes.
* **Unembellished Locations** — Location details must be presented as raw, unformatted text without map pins or decorative icons.
* **No Avatars, Badges, or Icons** — The interface rejects contemporary UI crutches. Navigation and identity rely purely on typography and layout.
* **No Beige** — The canvas must remain frost-white and lavender-grey. Warm neutrals are strictly forbidden.

---

## Color Palette

### The Notebook Scale

The palette mimics premium stationery—stark white paper, deep ink, and subtle architectural divisions.

```css
/* Pages & Bands (Backgrounds) */
bg-white              /* Frost-white primary page canvas (#ffffff) */
bg-slate-50           /* Ultra-subtle page layering */
bg-slate-100          /* Cool lavender-grey section bands */
bg-slate-200/50       /* Hover states for document menus */

/* Boundaries (Hairlines) */
border-slate-200      /* Standard pewter hairline dividers */
border-slate-300      /* Stronger pewter section rules */

/* Body Ink (Text) */
text-slate-950        /* Aubergine-black primary ink for hero claims and main body */
text-slate-800        /* Secondary editorial text */
text-slate-500        /* Muted metadata, review counts, unembellished locations */

/* Accents (Severe Restraint) */
text-rose-900         /* Lacquered rouge text accents */
bg-rose-900           /* Lacquered rouge interactive states (extremely rare) */
border-rose-900       /* Lacquered rouge active document underlines */
text-amber-400        /* Golden review stars (solely for ratings) */
fill-amber-400        /* SVG fill for golden stars */

```

### Destructive/Interactive Shifts

Links simply deepen in ink density. There are no colorful hover states aside from the rouge accent applied with absolute minimalism.

```css
hover:text-slate-950  /* Text-link darkening from slate-500 */
hover:bg-slate-100    /* Subtle background shift for editorial rows */

```

---

## Typography

Typography acts as the primary architectural material. A strict marriage of expressive, sharp headings and highly legible, generous body copy.

### Typefaces (Implementation via Custom Config)

*   **Headings:** Eczar, Grenze, or GFS Didot
*   **Body:** Literata, Spectral, or Gentium Book Plus

### Font Weights & Leading

```css
font-normal      /* Core weight for aubergine-black body ink */
font-medium      /* Restrained emphasis for menu items and social proof */
font-semibold    /* Reserved strictly for review counts or structural anchors */

leading-loose    /* Generous leading applied to all editorial paragraphs */
leading-relaxed  /* Secondary spacing for centered social proof */

```

### Font Size Scale (Strict Caps)

```css
text-xs          /* Unembellished location details, fine-print */
text-sm          /* Review counts, document-style menu items */
text-base        /* Core editorial rows, standard body copy */
text-lg          /* Centered social-proof paragraphs */
text-xl          /* Sub-claims, editorial row titles */
text-2xl         /* Secondary section divisions */
text-3xl         /* MAXIMUM ALLOWED: Serif hero claims */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Leading | Family |
| --- | --- | --- | --- | --- | --- |
| Hero Claim | 3xl | normal | slate-950 | normal | Serif (Eczar/Grenze/Didot) |
| Social Proof | lg | medium | slate-800 | relaxed | Serif (Body) |
| Core Body | base | normal | slate-950 | loose | Serif (Body) |
| Menu Item | sm | medium | slate-950 | normal | Serif (Body) |
| Location | xs | normal | slate-500 | normal | Serif (Body) |

---

## Animation System

### Core Philosophy: Quiet Appearance

Motion is limited to cinematic, slow-paced fade-ins and ink-darkening on interaction. The system strictly refuses parallax scrolling or dramatic transforms.

### Page Transitions (Fade-In)

Elements materialize onto the frost-white page gently, simulating eyes adjusting to light.

```tsx
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: "easeOut" }}
// Strictly no 'y' or 'x' translation. No parallax.

```

### Micro-Interactions (Text-Link Darkening)

Links behave like wet ink settling and darkening on the page.

```tsx
className="text-slate-500 transition-colors duration-500 hover:text-slate-950"

```

---

## UI Components

### Light Horizontal Navbar

A perfectly constrained, borderless top navigation strip sitting on a frost-white canvas.

```tsx
<nav className="w-full flex justify-between items-center bg-white px-8 py-6 text-sm font-medium text-slate-950 border-b border-slate-200">
  {/* Elements */}
</nav>
```

### Ruled Document-Style Menu

Navigation relies on pewter hairlines dividing vertical space, resembling a high-end ledger.

```tsx
<ul className="flex flex-col w-full">
  <li className="py-4 border-b border-slate-200 text-sm text-slate-950 hover:bg-slate-50 transition-colors cursor-pointer">
    Index Route
  </li>
  <li className="py-4 border-b border-slate-200 text-sm text-slate-950 hover:bg-slate-50 transition-colors cursor-pointer">
    Appendices
  </li>
</ul>
```

### Split Image-Led Hero

A rigid, two-column 2014-era module balancing observed photography with a 3XL capped serif claim.

```tsx
<header className="grid grid-cols-2 gap-12 items-center bg-slate-50">
  <div className="h-[70vh] w-full bg-slate-200">
    <img src="..." className="object-cover w-full h-full grayscale mix-blend-multiply opacity-90" alt="Rainlit window" />
  </div>
  <div className="flex flex-col space-y-6 px-12">
    <h1 className="text-3xl font-serif text-slate-950 leading-snug">
      The quiet reflection of a rainlit window.
    </h1>
    <ReviewLockup />
  </div>
</header>
```

### Immediate Star Rating Lockup

Always paired closely with the hero claim or editorial row.

```tsx
<div className="flex items-center space-x-2">
  <div className="flex space-x-1 text-amber-400">
    {/* Golden Review Stars (No Icons means SVG paths only, no icon libraries) */}
    <svg className="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="..."/></svg>
    <svg className="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="..."/></svg>
    <svg className="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="..."/></svg>
    <svg className="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="..."/></svg>
    <svg className="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="..."/></svg>
  </div>
  <span className="text-sm font-semibold text-slate-500">
    124 Reviews
  </span>
</div>
```

---

## Imagery & Composition

Photography acts as the sole provider of atmosphere. Images must be strictly rectangular, uncropped by shapes, and heavily atmospheric.

### Required Aesthetic
* **Motifs:** Black leather diary corners, extreme close-ups of perfume-glass reflections, rain-distorted windows, stark receipts on tables.
* **Lighting:** Low-light, natural, shadowy, ambient. Observed, never artificially lit or staged in a studio.
* **Integration:** Images sit flush within their 2014-era grid modules. No rounded corners (`rounded-none` is mandatory).

---

## Component Catalog

### Social-Proof Paragraph

```tsx
// Centered, generous leading, medium weight
"max-w-2xl mx-auto text-center text-lg text-slate-800 leading-relaxed font-medium"

```

### Image-Heavy Editorial Rows

```tsx
// Alternating grid modules with pewter hairlines and lavender-grey bands
"grid grid-cols-12 gap-8 py-16 border-b border-slate-200 bg-white even:bg-slate-100"

// Text block within the row
"col-span-5 flex flex-col justify-center space-y-4 pr-8"

// Image block within the row
"col-span-7 h-96 w-full"

```

### Unembellished Location Details

```tsx
// Strictly raw text. No pin icons. No maps.
"text-xs text-slate-500 font-normal uppercase tracking-widest mt-2 block"
// Rendered as: "RUE DE RIVOLI, PARIS — ARRONDISSEMENT 1"

```

---

## Quality Checklist

* [ ] Is the hero claim strictly capped at `text-3xl`?
* [ ] Are the review stars immediately visible and colored exactly `text-amber-400`?
* [ ] Does the body copy use `leading-loose` to ensure the pages feel breathable and legible?
* [ ] Are all menus built with horizontal `border-slate-200` lines instead of bounding boxes?
* [ ] Did you restrict the Lacquered Rouge accent to maximum one interactive element per view?
* [ ] Is all motion restricted to opacity fades (zero parallax, zero slide-ins)?
* [ ] Does the photography feel observed and moody (perfume glass, rainlit windows)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Frost-white and lavender-grey backgrounds (`bg-white`, `bg-slate-50`, `bg-slate-100`).
* Aubergine-black text (`text-slate-950`).
* Golden yellow specifically for rating stars (`text-amber-400`).
* A singular use of Lacquered Rouge (`text-rose-900`) for intense focal points.
* Strictly sharp, square edges (`rounded-none`).
* Medium gutters and disciplined module grids.

### ✗ Not Allowed

* **Beige** of any kind (no warm papers, no creams, no tans).
* **Avatars, Badges, or Icons** (zero user profile circles, zero checkmarks, zero UI icons).
* **Theatrical Gothic Styling** (no overly dramatic blackletter fonts, no faux-vintage distress).
* **Sugary Purple** (purples must be extremely desaturated, restricted to the subtle undertones of slate).
* **Excessive Red** (Lacquered Rouge must be severely restricted).
* **Over-polished Stock Images** (no bright smiles, no flat corporate lighting).
* **Ornate Borders** (no double lines, no filigree—pewter hairlines only).
* **Parallax Scrolling** (keep the paper anchored).
Preview