No preview available
Pearl-Grey Camellia & Prussian-Blue Afternoon Index

/pearlgreyCamelliaPrussianblueAfternoonIndex
A light editorial design system built for uncompromising credibility, document-like structure, and authentic realism, inspired by classic print publications and table layouts with restrained, trustworthy color and type.
Sep 15, 2026
Design System Content
# Pearl-Grey Camellia & Prussian-Blue Afternoon Index

A close-family light editorial design system built for absolute credibility, structural elegance, and documentary-style reality.

---

## Philosophy

> "Credibility is built on legible structure and visible proof."

This system rejects the sparse, floating aesthetics of modern tech interfaces in favor of a tangible, editorial layout. It evokes the feeling of high-quality print on pearl-white paper, relying on neat table rows, classic serif typography, and unpolished, authentic photography. It is compact, trustworthy, and structurally rigorous.

### Core Beliefs

1. **Credibility through legible sections** — Content is divided by crisp lines and distinct camellia-grey bands. Structure is immediately apparent, acting as an index rather than a canvas.
2. **Real photography anchors the design** — Images must capture natural window light, physical textures (porcelain, paper, glass), and authentic environments. No stock-photo artificiality.
3. **Visible reviews are the primary proof** — Trust is established immediately through golden yellow stars and prominent, centered review counts.
4. **Maintainable document structure** — Layouts employ tidy, efficient 2014-style builder gutters. Space is used purposefully without excessive "luxury emptiness."

### Strict Rules

* **Light Compact Navbar** — Navigation must be highly condensed, separated only by a hairline border, avoiding thick headers.
* **Restrained Headlines** — Headings must remain modest in scale. Oversized typography is strictly forbidden.
* **Split Hero with Natural Crop** — The hero section strictly divides content and imagery, avoiding text-over-image overlays.
* **Table-Like Menu Rows** — Lists and offerings are structured in strict, consistent horizontal rows.
* **No Badges or Avatars** — Refuse pill-shaped status badges and circular user avatars. Use plain text or standardized table cells instead.
* **No Beige or Ornate Frames** — Keep backgrounds to pearl and grey; borders to pure graphite hairlines.

---

## Color Palette

### Editorial & Accent Scale

The palette mimics a high-quality physical publication. Backgrounds transition between pearl white and camellia grey, divided by graphite hairlines. Typography relies on a deep blue-black ink, while a dry Prussian-blue serves strictly for actionable items. 

```css
/* Backgrounds (The Canvas & Bands) */
bg-white              /* Pearl-white pages, primary background (#ffffff) */
bg-slate-50           /* Camellia-grey section bands, alternating table rows (#f8fafc) */
bg-slate-100          /* Slightly deeper camellia-grey for structural headers (#f1f5f9) */

/* Borders (The Structure) */
border-slate-300      /* Graphite hairlines for table rows and navbars (#cbd5e1) */
border-slate-400      /* Hovered hairlines or column dividers (#94a3b8) */
border-slate-800      /* High-contrast borders for primary image frames */

/* The Accents: Prussian-Blue & Golden Yellow */
text-cyan-900         /* Dry Prussian-blue for primary links and active nav (#164e63) */
bg-cyan-900           /* Prussian-blue primary actions and submit buttons */
text-yellow-500       /* Golden yellow exclusively for review stars (#eab308) */

/* Text Hierarchy (Blue-Black Ink Scale) */
text-slate-900        /* Blue-black ink for primary headlines and data (#0f172a) */
text-slate-800        /* Standard body text and menu descriptions (#1e293b) */
text-slate-600        /* Plain location details, secondary metadata (#475569) */
text-slate-400        /* Disabled inputs, subtle timestamps (#94a3b8) */
```

### Destructive Actions

```css
text-red-800
hover:underline
```

---

## Typography

Typography pairs classic, elegant headline serifs with highly legible, modern body serifs. Scale is deliberately restrained to maintain the document's density and index-like feel.

### Font Families

```css
/* Headings: Rufina, Linden Hill, or Crimson Pro */
font-serif-heading    

/* Body: Source Serif 4, Literata, or Charter */
font-serif-body       
```

### Font Weights

```css
font-normal      /* Core body copy, location details, menu items */
font-medium      /* Active nav links, primary buttons, review counts */
font-semibold    /* Reserved for table headers and specific numerical claims */
/* font-light and font-bold are generally avoided to maintain even ink density */
```

### Font Size Scale

```css
text-xs          /* Footnotes, copyright, plain location details (12px) */
text-sm          /* Table data, secondary review text, active nav (14px) */
text-base        /* Standard menu rows, body paragraphs (16px) */
text-lg          /* Sub-section bands, minor claims (18px) */
text-xl          /* Primary claims, split hero introductory text (20px) */
text-2xl         /* Restrained hero headlines — Maximum allowed size (24px) */
```

### Letter Spacing & Transforms

```css
tracking-normal  /* Used for almost all text to maintain editorial readability */
tracking-wide    /* Sparingly used for uppercase table headers */
uppercase        /* Section band titles, minimal metadata */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Spacing |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Heading (Rufina) | 2xl | normal | slate-900 | normal |
| Nav Links | Body (Literata) | sm | medium | cyan-900 | normal |
| Menu Row Item | Body (Charter) | base | normal | slate-900 | normal |
| Location Text | Body (Charter) | xs | normal | slate-600 | normal |
| Section Band | Body (Literata) | sm | semibold | slate-900 | wide |

---

## Animation System

### Core Philosophy: The Static Page

Motion is heavily restricted to preserve the illusion of a physical document. There are no spatial translations, spring animations, or scaling effects.

### Interactions (Slow Fades & Underlines)

```tsx
/* Standard Link Hover */
"hover:underline decoration-1 underline-offset-4 transition-colors duration-300"

/* Image or State Reveal */
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: "easeInOut" }}
```

---

## UI Components

### Split Hero Structure

A strict 50/50 layout dividing the restrained headline/claim from the natural-crop imagery.

```tsx
<div className="flex flex-col md:flex-row w-full border-b border-slate-300">
  <div className="w-full md:w-1/2 p-6 flex flex-col justify-center">
    <h1 className="font-serif-heading text-2xl text-slate-900 mb-4">Restrained Headline</h1>
    <ReviewProofBlock />
  </div>
  <div className="w-full md:w-1/2 h-64 md:h-auto">
    <img src="window-light.jpg" className="w-full h-full object-cover object-center" />
  </div>
</div>
```

### Table-Like Menu Rows

Data and offerings are formatted in strict horizontal lists with consistent heights and 2014-builder gutters (`py-4`, `gap-4`). 

```tsx
<div className="flex items-center justify-between py-4 border-b border-slate-300 hover:bg-slate-50 transition-colors duration-500">
  <div className="font-serif-body text-base text-slate-900">Porcelain & Glass Pour</div>
  <div className="font-serif-body text-sm text-slate-600">Plain location detail</div>
</div>
```

### The Single Proof Link

Only one prominent text link is permitted per section to serve as active proof or a primary citation.

```tsx
<a href="#" className="font-serif-body text-sm font-medium text-cyan-900 hover:underline decoration-1 underline-offset-4">
  View primary citation
</a>
```

---

## Component Catalog

### Navigation

Compact, tight, and purely functional.

```tsx
// Compact Navbar
"w-full h-12 border-b border-slate-300 bg-white flex items-center justify-between px-6"

// Active Nav Item
"font-serif-body text-sm font-medium text-cyan-900 underline decoration-1 underline-offset-4"
```

### Buttons

```tsx
// Primary Action (Dry Prussian-Blue)
"bg-cyan-900 text-white font-serif-body text-sm px-5 py-2 hover:bg-cyan-800 transition-colors duration-300"

// Secondary Action (Graphite Hairline)
"bg-transparent border border-slate-300 text-slate-900 font-serif-body text-sm px-5 py-2 hover:bg-slate-50 transition-colors duration-300"
```

### Review & Proof Elements

```tsx
// Centered Review Block
<div className="flex flex-col items-center justify-center space-y-1 py-6">
  <div className="flex space-x-1 text-yellow-500 text-sm">
    <StarIcon /><StarIcon /><StarIcon /><StarIcon /><StarIcon />
  </div>
  <span className="font-serif-body text-sm font-medium text-slate-900">4.9 from 1,204 reviews</span>
</div>
```

### Imagery

```tsx
// Natural Crop Standard (No rounded corners, no shadows)
"w-full object-cover bg-slate-100 border border-slate-300"
```

---

## Quality Checklist

* [ ] Is the hero typography restrained (max `text-2xl`) and paired exclusively with standard body serifs?
* [ ] Are the review stars exactly `text-yellow-500` and placed directly below the primary claim?
* [ ] Do all lists and menus utilize consistent, table-like rows with strict `border-slate-300` hairlines?
* [ ] Are all hovers limited to slow background fades or 1px offset underlines?
* [ ] Is the photography completely free of artificial lighting, graphic overlays, and stock-photo polish?
* [ ] Did you successfully avoid using empty, oversized padding (luxury emptiness)?
* [ ] Are there absolutely zero pill badges, circular avatars, or beige backgrounds?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Pearl-white and camellia-grey structural bands.
* Dry Prussian-blue for primary actionable buttons and the active navigation link.
* Golden yellow explicitly for review star icons.
* Table-like rows with consistent spacing (2014-style structural gutters).
* Authentic, unretouched photography highlighting natural window light, paper, glass, or porcelain.
* Simple, slow opacity transitions and standard text underlines.

### ✗ Not Allowed

* Oversized, sprawling typography (e.g., `text-5xl` or bold weights).
* Generic navy blue (must be dry Prussian-blue/`cyan-900`), beige, or any off-brand accent colors.
* "Luxury emptiness" (massive paddings, sparse floating elements).
* UI badges (status pills) or circular user avatars.
* Hover scaling, bouncing animations, or fast/snappy motion.
* Stock-photo polish, vibrant studio lighting, or ornate image frames.
* Cramped menu tables missing their defined row heights and hairlines.
Preview