Porcelain Smoke Ink & Vermilion Perfume Ledger

/porcelainSmokeInkVermilionPerfumeLedger
A restrained, editorial design system evoking high-end ledgers through tactile photography, intimate type, dry vermilion accents, and consistent document rhythm—eschewing icons, gradients, and emptiness for rigorous, table-driven layouts.
Sep 17, 2026
Design System Content
# Porcelain Smoke Ink & Vermilion Perfume Ledger

A design language for a light, smoky editorial system driven by strict restraint and document rhythm.

---

## Philosophy

> "Atmosphere comes from restraint; rhythm creates the document."

This system creates interfaces that feel like a meticulous, high-end editorial ledger. It relies heavily on real photography—black leather, porcelain, glass reflections, and receipts—paired with typography that looks carefully and deliberately entered. The design rejects "showroom emptiness," opting instead for modest, builder-era gutters and a consistent, grounded rhythm.

### Core Beliefs

1. **Document Rhythm Over Emptiness** — The interface is a working document. Consistent row heights and modest gutters anchor the layout. If a screen feels hollow or overly spacious, it loses its ledger-like credibility.
2. **Photography is the Atmosphere** — Mood is established entirely through real, tactile imagery. We refuse perfume clichés and artificial gradients.
3. **The Vermilion Restraint** — The sole pop of color is a dry vermilion, restricted entirely to three elements: the booking action, the active navigation state, and a single proof link.
4. **HTML-Table Structural Integrity** — Data and menus are presented in rigid, HTML-table-style rows. Plain location details and centered review counts form the backbone of the page's structure.
5. **No Decorative Artifacts** — Icons, badges, avatars, and gradients are strictly forbidden. The system relies entirely on typography, rules, and photography.

### Strict Rules

* **Image-Led Hero** — Pages must be introduced via rich, high-quality photography, never abstract color fields or vector art.
* **Serif Headings Capped** — Headlines must never exceed `3xl`. The scale is intimate and editorial.
* **Stars Beneath the Claim** — Golden yellow review stars must sit directly beneath the primary claim, anchoring trust immediately.
* **Light Compact Navbar** — The navigation remains hyper-minimal, tightly spaced, and unobtrusive.
* **No Badges or Avatars** — Users and statuses are represented by raw text in HTML-table rows, never rounded image masks or colored status pills.

---

## Color Palette

### The Ledger Scale

The palette revolves around porcelain pages, pale smoke-grey structural trays, cool graphite dividers, and striking blue-black ink.

```css
/* Backgrounds */
bg-[#FDFDFD]          /* Porcelain-white pages (Main canvas) */
bg-slate-100          /* Pale smoke-grey section trays */
bg-slate-50           /* Hover states for table rows */

/* Borders & Rules */
border-slate-300      /* Cool graphite rules (Primary dividers) */
border-slate-400      /* Hovered or emphasized graphite rules */

/* Typography: Blue-Black Diary Ink */
text-slate-900        /* Primary headings, active copy */
text-slate-700        /* Secondary body copy, table data */
text-slate-500        /* Muted metadata, plain location details */

/* The Review Anchor */
text-amber-400        /* Golden yellow review stars ONLY */

/* The Accent: Dry Vermilion */
/* ONLY used for: Booking Action, Active Nav, One Proof Link */
text-[#D9381E]        /* Dry vermilion text (Active nav, proof link) */
bg-[#D9381E]          /* Dry vermilion backgrounds (Booking action only) */
border-[#D9381E]      /* Vermilion active state underlines */

```

### Destructive Actions

*Handled entirely through standard text links or table rows. No special destructive color is permitted to preserve the dry vermilion's authority.*

---

## Typography

Typography pairs elegant, traditional serifs with precise body styling. It must feel deliberately entered, mirroring the tactile nature of a ledger. 

### Font Families

*   **Headings:** Tinos, Rosarivo, or Goudy Bookletter 1911 `font-serif`
*   **Body:** Literata, Vollkorn, or Source Serif 4 `font-serif`

### Font Weights

```css
font-normal      /* Core body copy, table contents, primary reading */
font-medium      /* Active navigation items, subheadings */
font-semibold    /* Reserved exclusively for the booking action and review counts */
/* font-bold and font-light are avoided to maintain document rhythm */

```

### Font Size Scale

Headings are strictly capped. There are no "huge" typographic elements. 

```css
text-xs          /* Fine print, footer legal ties (12px) */
text-sm          /* Secondary table data, plain location details (14px) */
text-base        /* Standard UI interactions, compact navbar links (16px) */
text-[17px]      /* MANDATORY BODY SIZE: 17-18px for all core reading */
text-xl          /* Sub-section headers, editorial lead-ins */
text-2xl         /* Standard page titles */
text-3xl         /* MAXIMUM ALLOWED SIZE: Hero headlines, primary claims */

```

### Letter Spacing & Transforms

```css
tracking-normal  /* Maintained strictly for readability */
tracking-wide    /* Only for plain location details */
capitalize       /* Standard editorial title casing */
/* uppercase is heavily restricted to prevent a "shouting" UI */

```

---

## Animation System

### Core Philosophy: The Physical Page

Motion is virtually non-existent, mimicking the static nature of physical paper and ink. Elements do not bounce, scale, or blur.

### Fades & Hovers Only

```tsx
/* Page Transitions */
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2, ease: "easeIn" }}

/* Fine Underline Hovers */
className="relative after:absolute after:bottom-0 after:left-0 after:h-[1px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-slate-900 after:transition-transform after:duration-300 hover:after:origin-bottom-left hover:after:scale-x-100"

```

---

## UI Components

### Image-Led Hero

Photography is the primary structural block of the hero, followed immediately by a capped serif headline.

```tsx
<div className="flex flex-col gap-4 mb-8">
  <img src="/black-leather.jpg" alt="Interior" className="w-full h-64 object-cover" />
  <h1 className="font-serif text-3xl text-slate-900">
    The Primary Claim
  </h1>
  <div className="flex items-center gap-1 text-amber-400">
    {/* Stars directly beneath the claim */}
    ★★★★★
  </div>
</div>
```

### HTML-Table-Style Menu Rows

Rows maintain consistent height, separated by cool graphite rules. No cramping, but no showroom emptiness.

```tsx
<div className="w-full border-t border-slate-300">
  <div className="flex justify-between items-center py-3 border-b border-slate-300 hover:bg-slate-50 transition-colors duration-200">
    <span className="font-serif text-[17px] text-slate-900">Item Description</span>
    <span className="font-serif text-[17px] text-slate-700">Metadata</span>
  </div>
</div>
```

### Centered Review-Count Block

```tsx
<div className="flex flex-col items-center justify-center py-6 gap-2">
  <div className="text-amber-400 text-lg tracking-widest">★★★★★</div>
  <div className="font-serif text-sm text-slate-700">Based on 142 reviews</div>
</div>
```

---

## Component Catalog

### Navigation (Light Compact Navbar)

```tsx
<nav className="w-full flex justify-between items-center py-3 border-b border-slate-300 bg-[#FDFDFD]">
  <div className="font-serif text-lg text-slate-900">Logo</div>
  <div className="flex gap-6">
    <a href="#" className="font-serif text-base text-slate-700 hover:text-slate-900 transition-colors">Menu</a>
    {/* Active Nav Element: Dry Vermilion */}
    <a href="#" className="font-serif text-base text-[#D9381E] border-b border-[#D9381E]">Journal</a>
  </div>
</nav>
```

### Section Trays (Pale Smoke-Grey)

```tsx
<div className="bg-slate-100 p-4 border border-slate-300 mb-4">
  <h2 className="font-serif text-xl text-slate-900 mb-3">Tray Heading</h2>
  <p className="font-serif text-[17px] text-slate-700 leading-relaxed">
    Body copy sits comfortably within modest builder-era gutters.
  </p>
</div>
```

### Booking Action (Dry Vermilion)

```tsx
{/* The sole use of a colored background in the entire system */}
<button className="bg-[#D9381E] text-[#FDFDFD] font-serif text-[17px] px-6 py-2 hover:opacity-90 transition-opacity">
  Book Now
</button>
```

### Plain Location Details

```tsx
<div className="font-serif text-sm text-slate-500 tracking-wide mt-4">
  <p>142 DOCUMENT ROW</p>
  <p>DISTRICT 4, CITY</p>
</div>
```

---

## Quality Checklist

* [ ] Is the primary headline capped strictly at `3xl`?
* [ ] Is the body typography set between `17px` and `18px`?
* [ ] Are the review stars golden yellow and placed immediately below the primary claim?
* [ ] Is the dry vermilion accent restricted *only* to the booking action, active nav, and one proof link? (No candy red).
* [ ] Are the menus structured as strict HTML-style rows with cool graphite rules?
* [ ] Is the spacing utilizing modest builder-era gutters (e.g., `gap-4`, `py-3`, `p-4`) rather than empty, massive padding?
* [ ] Are there zero icons, badges, avatars, gradients, or beige backgrounds anywhere on the screen?
* [ ] Does the imagery rely on tactile, real photography (black leather, porcelain, glass, receipts)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Modest, consistent spacing that establishes a clear reading rhythm.
* Real photography driving the visual interest and atmosphere.
* Strict HTML-table rows for structured data and menus.
* Fade transitions and fine underline hovers.
* Cool graphite borders (`border-slate-300`) to separate content cleanly.

### ✗ Not Allowed

* Avatars, icons, or status badges of any kind.
* Huge typographic headings (anything above `3xl`).
* Candy red, beige, or any non-vermilion accents.
* Gradients or drop shadows.
* Cramped tables or, conversely, excessive "showroom" emptiness.
* Perfume clichés (script fonts, overly airy layouts, delicate flourishes).
Preview