Snow Porcelain Ink & Burnt-Ruby Magazine Index

/snowPorcelainInkBurntrubyMagazineIndex
A disciplined, photography-led editorial design system featuring crisp backgrounds, compact rhythms, brushed-steel accents, classic serif typography, and a restrained burnt-ruby accent for high-credibility digital magazines and indexes.
Sep 20, 2026
Design System Content
# Snow Porcelain Ink & Burnt-Ruby Magazine Index

A design language for crisp, editorial, and photographically driven interfaces.

---

## Philosophy

> "The page should feel assembled, not decorated."

This system acts as a disciplined magazine index. It relies on snow-porcelain backgrounds, pale aluminium panels, soot-brown typography, and brushed-steel rules. It is practical, photographic, and quietly atmospheric. Elegance is achieved through structural restraint, compact reading rhythms, and the striking contrast of classic serif typography against sharp imagery, rather than applied ornamentation.

### Core Beliefs

1. **Photographic Authority** — The interface frames reality. Imagery (polished silver, black coats, white china, folded schedules) provides the atmosphere; the UI gets out of the way.
2. **Structural Discipline** — Layouts rely on strong left edges, medium gutters, and ruled divisions. Elements are aligned with the rigorous precision of print editorial.
3. **Restrained Color** — The palette is intentionally stark. A deep, burnt-ruby accent is used with absolute scarcity to draw the eye, complemented only by golden review stars for immediate credibility.
4. **Compact Rhythm** — Vertical space is intentional and compact. We reject "empty luxury spacing" in favor of dense, information-rich reading environments.
5. **Directness** — Interfaces open with direct address, centered credibility paragraphs, and immediate proof.

### Strict Rules

* **Rectangular Photography Only** — No rounded blobs, soft masks, or decorative image shapes. Images are sharp-cornered rectangles.
* **Capped Headlines** — Hero headlines are strictly capped at `3xl`. Hierarchy is achieved through typeface contrast and weight, not gargantuan scale.
* **No SaaS Tropes** — Absolutely no floating SaaS cards, generic café icons, emoji indicators, or sticker-like badges. 
* **Light Horizontal Navbar** — Navigation is pinned to a crisp, light horizontal bar. No bulky sidebars or dark navigational canvases.
* **No Parallax** — Scrolling is immediate and 1:1 with the user's touch. Motion is limited to slow fades and subtle image lifts.

---

## Color Palette

### Monochromatic & Accent Scale

The palette transitions from snow-porcelain whites to pale aluminium panels, grounded by soot-brown typography. The accent is a dark, oxidized Burnt-Ruby, refusing the bright saturation of modern web reds.

```css
/* Backgrounds (Canvas & Panels) */
bg-white              /* Snow-porcelain canvas, primary background (#ffffff) */
bg-gray-50            /* Ultra-pale aluminium, subtle content bands (#f9fafb) */
bg-gray-100           /* Pale aluminium panels, secondary containers (#f3f4f6) */
bg-gray-200           /* Hover states for aluminium panels, image placeholders */

/* Borders (Brushed Steel) */
border-gray-300       /* Primary brushed-steel rules, menu rows (#d1d5db) */
border-gray-400       /* Hover boundaries, active ruled lines */
border-gray-800       /* Heavy structural demarcations */

/* Typography (Soot-Brown) */
text-stone-950        /* Primary headings, high-contrast hero text (#1c1917) */
text-stone-800        /* Body copy, centered credibility paragraphs (#292524) */
text-stone-600        /* Secondary details, opening metadata, captions (#57534e) */
text-stone-400        /* Muted timestamps, subtle table headers */

/* Credibility (Golden Stars) */
text-yellow-600       /* Review stars, rating indicators (#ca8a04) */
fill-yellow-600       /* Solid star iconography */

/* The Accent: Burnt-Ruby */
text-rose-900         /* Sparingly used interactive links, active states (#4c0519) */
bg-rose-900           /* Critical buttons, minimal highlight tags */
border-rose-900       /* Focus rings, selective bottom-borders for active tabs */
bg-rose-900/5         /* Ultra-subtle ruby hover backdrops */
```

### Destructive Actions

```css
/* Utilizes the same Burnt-Ruby, relying on context rather than a separate red */
hover:bg-rose-950
hover:text-rose-50
```

---

## Typography

A dual-serif system. Elegant, high-contrast serifs (Prata, Cormorant Infant, Rufina) for headings meet sturdy, highly legible serifs (Source Serif 4, Vollkorn, Charter) for body copy. 

### Font Weights

```css
font-normal      /* Default body copy, ruled menu rows, lists */
font-medium      /* Subheadings, emphasis in credibility paragraphs, button labels */
font-semibold    /* Boldest allowable weight for headings and direct address details */
/* font-light and font-black are excluded to maintain editorial sturdiness */
```

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

```css
text-xs          /* Captions, photo credits, tiny metadata (12px) */
text-sm          /* Menu rows, secondary content, tabular data (14px) */
text-base        /* Primary body copy, centered credibility paragraph (16px) */
text-lg          /* Article lead-ins, direct address openings (18px) */
text-xl          /* Sub-section headings, featured review quotes (20px) */
text-2xl         /* Standard page headers, secondary hero typography (24px) */
text-3xl         /* MAXIMUM SCALE: Hero headlines, primary index titles (30px) */
```

### Letter Spacing, Line Height & Transforms

```css
leading-tight    /* Headings (3xl, 2xl) */
leading-snug     /* Compact vertical rhythm for body paragraphs */
tracking-normal  /* Default reading tracking */
tracking-wide    /* Small caps, navigational labels, category headers */

uppercase        /* Navigational elements, category tags, author names */
```

### Hierarchy Examples

| Element | Size | Font Family | Color | Spacing | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 3xl | Heading Serif | stone-950 | normal | none |
| Credibility Text | base | Body Serif | stone-800 | snug | none |
| Menu Row Item | sm | Body Serif | stone-950 | normal | none |
| Opening Detail | xs | Heading Serif | rose-900 | wide | uppercase |
| Review Stars | base | Iconography | yellow-600 | normal | none |

---

## Animation System

### Core Philosophy: Slow Fades & Physical Lift

Motion mimics the deliberate turning of a heavy magazine page or the physical lifting of a printed photograph. Parallax is strictly forbidden.

### Image Lift (Hover)

Photographs elevate subtly from the canvas without scaling or distorting.

```tsx
className="transition-transform duration-500 ease-out hover:-translate-y-1 hover:shadow-[0_4px_20px_rgba(0,0,0,0.08)]"
```

### Page & Content Fades

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

---

## UI Components

### Centered Credibility Paragraph

A mandatory block that establishes immediate trust below the hero headline, characterized by its compact rhythm and soot-brown text.

```tsx
<div className="max-w-xl mx-auto text-center flex flex-col items-center gap-3">
  <div className="flex gap-1 text-yellow-600">
    <StarIcon className="w-4 h-4 fill-current" />
    <StarIcon className="w-4 h-4 fill-current" />
    <StarIcon className="w-4 h-4 fill-current" />
    <StarIcon className="w-4 h-4 fill-current" />
    <StarIcon className="w-4 h-4 fill-current" />
  </div>
  <p className="font-serif text-base text-stone-800 leading-snug">
    <!-- Credibility copy goes here -->
  </p>
</div>
```

### Ruled Menu Row

A staple of the index aesthetic. Lists and navigation are separated by full-width, brushed-steel horizontal rules. No surrounding box/card container is used.

```tsx
<a href="#" className="flex items-center justify-between py-3 border-b border-gray-300 group transition-colors hover:bg-gray-50">
  <span className="font-serif text-sm text-stone-950 group-hover:text-rose-900 transition-colors">
    <!-- Row Title -->
  </span>
  <span className="font-serif text-xs text-stone-600 uppercase tracking-wide">
    <!-- Opening Detail -->
  </span>
</a>
```

### Image-Heavy Content Band

Images are presented in sharp, edge-to-edge rectangles within medium-guttered grid columns.

```tsx
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 my-12">
  <div className="aspect-[4/3] w-full overflow-hidden bg-gray-200">
    <img 
      src="..." 
      alt="..." 
      className="w-full h-full object-cover transition-transform duration-500 ease-out hover:-translate-y-1" 
    />
  </div>
  <div className="flex flex-col justify-center">
    <h3 className="font-serif text-xl text-stone-950 mb-3">...</h3>
    <p className="font-serif text-sm text-stone-800 leading-snug">...</p>
  </div>
</div>
```

---

## Component Catalog

### Panels (Replacing SaaS Cards)

We do not use floating cards. We use structural, flush panels (pale aluminium) that sit flat on the porcelain canvas.

```tsx
// Pale Aluminium Data Panel
"bg-gray-100 p-6 border-t-2 border-gray-800"

// Flush Editorial Block
"bg-white border-y border-gray-300 py-8 my-4"
```

### Buttons

```tsx
// Primary Action (Burnt-Ruby)
"bg-rose-900 text-white font-serif font-medium text-sm px-6 py-2.5 transition-colors hover:bg-rose-950"

// Secondary Action (Brushed Steel & Soot)
"bg-transparent border border-gray-300 text-stone-950 font-serif font-medium text-sm px-6 py-2.5 transition-colors hover:border-gray-400 hover:bg-gray-50"
```

### Inputs

```tsx
// Editorial Form Field
"w-full bg-transparent border-b border-gray-300 py-2 text-stone-950 font-serif text-base focus:outline-none focus:border-rose-900 transition-colors placeholder:text-stone-400"
```

### Tags & Badges

```tsx
// Opening Detail / Direct Address Tag
"text-[11px] font-serif uppercase tracking-wide text-rose-900 border border-rose-900/20 px-2 py-1 bg-rose-900/5"
```

---

## Quality Checklist

* [ ] Is the hero headline strictly capped at `text-3xl`?
* [ ] Are all photographs perfectly rectangular with `rounded-none`?
* [ ] Do you have a centered credibility paragraph with golden (`text-yellow-600`) review stars near the top of the index?
* [ ] Is the Burnt-Ruby accent (`rose-900`) used extremely sparingly (less than 5% of the page color)?
* [ ] Did you maintain strong left edges and medium gutters instead of wide, empty luxury spacing?
* [ ] Is all typography relying on classic Serif stacks (Prata/Cormorant/Rufina for headings, Source Serif/Vollkorn/Charter for body)?
* [ ] Did you implement brushed-steel rules (`border-gray-300`) to separate menu rows instead of using SaaS-style container cards?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Snow-porcelain (`bg-white`) and pale aluminium (`bg-gray-100`) backgrounds.
* Soot-brown (`text-stone-950`, `text-stone-800`) text for high-contrast, atmospheric reading.
* Heavy imagery defining the aesthetic (polished silver, black coats, white china).
* Strict horizontal rules isolating rows of content.
* Subtle image lift on hover (`-translate-y-1`).

### ✗ Not Allowed

* Typography larger than `3xl`—forces layouts to break their disciplined editorial structure.
* Beige warmth (no warm sand or cream backgrounds; keep the canvas crisp).
* Bright red or vibrant ruby colors—only deep, burnt ruby is acceptable.
* Empty luxury spacing (vertical rhythm must remain compact and information-dense).
* Over-romantic styling (swashes, italics overload, decorative flourishes).
* Rounded corners on imagery or panels.
* Generic icons, SaaS floating cards, or parallax scrolling effects.
Preview