Cloud-White Aubergine Ink & Redcurrant Afternoon Folio

/cloudwhiteAubergineInkRedcurrantAfternoonFolio
An editorial design system prioritizing tactile realism, deep typographic contrast, photographic sequencing, and disciplined color restraint, evoking the atmosphere of a finely curated physical folio.
Sep 17, 2026
Design System Content
# Cloud-White Aubergine Ink & Redcurrant Afternoon Folio

A design language for elegant, unusual, and photographically-driven editorial interfaces.

---

## Philosophy

> "Atmosphere emerges from rhythm, sequencing, and the ink on the page—never from decoration."

This system creates interfaces that feel like a highly curated, physical editorial folio. It rejects standard SaaS aesthetics, glossy luxury, and hollow minimalism in favor of structured density and tactile realism. The design relies on the interplay of cloud-white pages, pale lilac-grey bands, and the deep typographic color of aubergine-black text. 

### Core Beliefs

1. **Atmosphere through Typographic Color** — The mood is set by the deep, rich contrast of aubergine ink on cloud-white, not by applied graphic elements or café motifs.
2. **Photographic Sequencing** — Images dictate the narrative flow. Editorial rows must feel like thoughtfully cropped contact sheets or printed spreads.
3. **Structured Density** — Repeatable modules and tidy gutters rule the layout. We avoid "showroom emptiness"; the space should feel purposeful, structured, and comfortably filled.
4. **The Singular Redcurrant** — Color is deeply restrained. A dry redcurrant acts as a solitary, unyielding accent for absolute priority interactions and subtle wayfinding.
5. **Document-Style Authenticity** — Data, menus, and details are presented with the unembellished clarity of a printed ledger or handwritten receipt.

### Strict Rules

* **Restrained Headlines** — Serif headlines must never exceed `3xl`. Prominence is achieved through font pairing and placement, not shouting.
* **Compact Navigation** — The navbar is light, tight, and unobtrusive. 
* **Split Hero Layouts** — Hero sections must utilize a split layout with a natural image crop (no rounded floating bubbles or aggressive masking).
* **Immediate Star Proof** — Golden yellow social proof must be instantly visible and perfectly centered.
* **No Avatars or Badges** — Eradicate rounded avatar bubbles and colorful status pills. Use typographic tables and pure text for details.

---

## Color Palette

### The Folio Scale

The palette is strictly limited to paper tones, ink, cool metallic dividers, and one dried-fruit accent. (Tailwind arbitrary values used to enforce precise color theory).

```css
/* Backgrounds: The Paper & Bands */
bg-[#FDFBF7]          /* Cloud-White: Primary canvas, pure but not sterile */
bg-[#F4F3F6]          /* Pale Lilac-Grey: Content bands, alternating editorial rows */
bg-[#EBEAEF]          /* Deep Lilac-Grey: Subtle hover darkening for interactive bands */

/* Borders: Cool Pewter */
border-[#D1D3D9]      /* Default structural dividers, menu table rules */
border-[#B8BAC2]      /* Active borders, input underlines */

/* Typography: Aubergine-Black Ink */
text-[#1A151C]        /* Primary headings, heavy editorial blocks (Aubergine-Black) */
text-[#2D2631]        /* Standard body copy, menu items */
text-[#4A424E]        /* Metadata, subtle locations, unembellished details */
text-[#7A727D]        /* Placeholders, disabled text */

/* The Accent: Dry Redcurrant */
text-[#8B2635]        /* Narrow announcement lines, active text states */
bg-[#8B2635]          /* The SINGLE primary call-to-action button */
border-[#8B2635]      /* Active state underlines, focus rings */

/* The Proof: Golden Yellow */
text-[#D4AF37]        /* Star ratings only */
fill-[#D4AF37]        /* SVG star fills */

```

### Hover States (Subtle Darkening)

```css
/* No bright hover states; elements slightly darken to mimic physical shadows */
hover:bg-[#EBEAEF]
hover:text-[#1A151C]
```

---

## Typography

The system rejects sans-serif dominance, opting for literary, editorial serifs paired with highly readable, slightly oversized serif body copy.

### Font Families

```css
font-serif            /* Headings: Ovo, Rosarivo, or Crimson Pro */
font-body             /* Body: Vollkorn, Alegreya, or Charter */
```

### Font Size Scale (Capped at 3xl)

```css
text-xs          /* Tiny metadata, unembellished location details (12px) */
text-sm          /* Sub-navigation, discrete timestamps (14px) */
text-[17px]      /* STANDARD BODY COPY - Core editorial rhythm */
text-[18px]      /* Lead paragraphs, menu table items */
text-xl          /* Standard section headings, split hero subtext */
text-2xl         /* Major editorial row titles */
text-3xl         /* MAXIMUM SIZE. Split hero primary headline. Never larger. */
```

### Letter Spacing & Line Height

```css
tracking-normal  /* All body copy */
tracking-wide    /* Navigational links, narrow announcement lines */
leading-relaxed  /* Body paragraphs to accommodate the 17-18px size */
leading-tight    /* Menu tables and location details */
```

### Hierarchy Examples

| Element | Family | Size | Color | Notes |
| --- | --- | --- | --- | --- |
| Split Hero Headline | Serif | 3xl | aubergine-100 | Elegant, sentence case. |
| Announcement Line | Serif | sm | redcurrant | tracking-wide, top of page. |
| Editorial Body | Body | 17px | aubergine-200 | leading-relaxed, standard weight. |
| Menu Table Item | Body | 18px | aubergine-100 | No borders, tight alignment. |
| Social Proof Text | Body | sm | aubergine-300 | Centered below golden stars. |

---

## Animation System

### Core Philosophy: The Slow Reveal

Motion should mimic eyes adjusting to soft window light. No sudden snaps, no parallax scrolling, no bouncy springs. 

### Page Transitions (Slow Opacity)

```tsx
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: [0.42, 0, 0.58, 1] }} /* Slow, linear-like ease */
```

### Micro-Interactions (Subtle Hover Darkening)

Images and interactive bands simply darken.

```tsx
// Image hover
className="transition-opacity duration-500 ease-in-out hover:opacity-85"

// Band hover
className="transition-colors duration-300 ease-in-out hover:bg-[#EBEAEF]"
```

---

## UI Components

### Narrow Announcement Line

Sits at the very top of the page, utilizing the dry redcurrant accent without overpowering the layout.

```tsx
<div className="w-full bg-[#FDFBF7] border-b border-[#D1D3D9] py-1.5 text-center">
  <span className="text-xs font-serif text-[#8B2635] tracking-wide uppercase">
    Now accepting reservations for the autumn season
  </span>
</div>
```

### Split Hero (Natural Crop)

Half cloud-white layout, half un-manipulated photographic space.

```tsx
<section className="grid grid-cols-1 md:grid-cols-2 min-h-[70vh] border-b border-[#D1D3D9]">
  <div className="flex flex-col justify-center px-12 md:px-24 bg-[#FDFBF7]">
    <h1 className="font-serif text-3xl text-[#1A151C] mb-6">
      The quiet art of evening preparations.
    </h1>
    <p className="font-body text-[17px] text-[#2D2631] leading-relaxed mb-8 max-w-[45ch]">
      Documenting the porcelain and handwritten receipts that define our spaces.
    </p>
    {/* The Singular CTA */}
    <button className="self-start bg-[#8B2635] text-[#FDFBF7] font-body text-[17px] px-8 py-3 transition-colors duration-300 hover:bg-[#6A1A27]">
      View Folio
    </button>
  </div>
  <div className="w-full h-full bg-neutral-200">
    <img 
      src="/soft-window-light.jpg" 
      className="w-full h-full object-cover object-center"
      alt="Soft window light falling on a black leather diary" 
    />
  </div>
</section>
```

### Star Proof (Immediately Visible)

Perfectly centered, utilizing the golden yellow text and standard typographic layouts.

```tsx
<div className="flex flex-col items-center justify-center py-16 bg-[#F4F3F6]">
  <div className="flex gap-1 text-[#D4AF37] mb-4">
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
  </div>
  <p className="font-body text-sm text-[#4A424E] max-w-[30ch] text-center italic">
    "A masterclass in quiet restraint."
  </p>
</div>
```

---

## Component Catalog

### Editorial Rows (Image-Heavy)

Structured, repeatable bands with tidy gutters. No empty vastness.

```tsx
<article className="grid grid-cols-12 gap-6 px-12 py-16 bg-[#FDFBF7] border-b border-[#D1D3D9]">
  <div className="col-span-12 md:col-span-5 flex flex-col justify-end pb-4">
    <h2 className="font-serif text-2xl text-[#1A151C] mb-4">Porcelain & Pewter</h2>
    <p className="font-body text-[17px] text-[#4A424E] leading-relaxed">
      Soft window light reveals the textures of handwritten receipts and leather bindings.
    </p>
  </div>
  <div className="col-span-12 md:col-span-7">
    <img src="/porcelain.jpg" className="w-full h-auto" />
  </div>
</article>
```

### Document-Style Menu Table

No boxes, no cards, no borders between items. Just structured typography mimicking a printed ledger.

```tsx
<div className="max-w-3xl mx-auto py-12">
  <div className="flex justify-between items-baseline py-3 border-b border-[#D1D3D9] hover:bg-[#F4F3F6] transition-colors px-2">
    <span className="font-body text-[18px] text-[#1A151C]">Leather Diaries, Bound</span>
    <span className="font-body text-[17px] text-[#4A424E]">45.00</span>
  </div>
  <div className="flex justify-between items-baseline py-3 border-b border-[#D1D3D9] hover:bg-[#F4F3F6] transition-colors px-2">
    <span className="font-body text-[18px] text-[#1A151C]">Pewter Dividers, Set of Three</span>
    <span className="font-body text-[17px] text-[#4A424E]">120.00</span>
  </div>
</div>
```

### Unembellished Location/Opening Details

Stripped of icons or graphic styling.

```tsx
<address className="not-italic font-body text-sm text-[#4A424E] leading-loose">
  <p className="text-[#1A151C]">The Folio Archive</p>
  <p>42 Editorial Lane</p>
  <p>Mon - Fri, 10am - 4pm</p>
</address>
```

---

## Quality Checklist

* [ ] Is the primary headline font size strictly capped at `3xl` or smaller?
* [ ] Is the body copy a highly readable serif set to `17px` or `18px`?
* [ ] Does the layout use pale lilac-grey content bands instead of generic empty white space?
* [ ] Is the Dry Redcurrant color used for absolutely only *one* primary CTA and narrow accents?
* [ ] Are the images raw, naturally cropped, and featuring specific tactile subjects (leather, porcelain, receipts)?
* [ ] Is the social proof instantly visible and strictly centered using Golden Yellow?
* [ ] Are all transition animations slow opacity reveals (no spring, no parallax)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Cloud-white backgrounds and pale lilac-grey alternating content bands.
* Deep aubergine-black typography for sharp, editorial contrast.
* Cool pewter lines (`border-[#D1D3D9]`) to divide document-style tables.
* Tidy gutters and closely knit, repeatable structural modules.
* Imagery of black leather diaries, porcelain, handwritten receipts, and soft window light.

### ✗ Not Allowed

* Sugary, bright, or neon purples (must remain dark aubergine or pale lilac-grey).
* Weak, washed-out redcurrants, or overuse of the accent color.
* Ornate, decorative borders, café motifs, or illustrative flourishes.
* Cramped menu rows (ensure proper `py-3` spacing within tables).
* Beige backgrounds (strictly cloud-white and lilac-grey).
* AI-generated florals, glossy luxury imagery, or fake textures.
* Avatars, rounded image bubbles, status badges, or colored pills.
* Parallax scrolling or bouncy element reveals.
Preview