Moonlit Zinc Black-Diary & Carmine Review Sheet Design System

/moonlitZincBlackdiaryCarmineReviewSheetDesignSystem
A book-inspired design system for practical, editorial interfaces with tactile authenticity, capped hero scales, cool zinc backgrounds, muted carmine accents, structured modules, and immediate social proof. Ornate flourishes and generic SaaS aesthetics are banned.
Sep 17, 2026
Design System Content
# Moonlit Zinc Black-Diary & Carmine Review Sheet Design System

A design language for meticulously crafted, practical, and highly editorial interfaces.

---

## Philosophy

> "Good design reads like a well-loved diary: structured, legible, and intentionally authored."

This system creates interfaces that feel like they are maintained by a tasteful local owner with a book designer’s eye. It violently rejects the sterile, generated feel of modern SaaS kits. The aesthetic relies on the cool, quiet atmosphere of a moonlit sheet, relying on baseline-led rhythms, purposeful gutters, and tactile editorial restraint rather than vast, luxurious emptiness.

### Core Beliefs

1. **The Book Designer’s Eye** — Typographic rhythm and generous reading line heights govern the layout. Every module must feel authored, not assembled.
2. **Grounded Practicality over Luxury Emptiness** — Space has absolute purpose. We use tidy 2014 gutters and repeatable baseline modules rather than vacuous, sprawling white space.
3. **Immediate Social Proof** — Trust is established instantly. Golden review stars and centered social-proof paragraphs anchor the user's confidence above the fold.
4. **Muted Restraint** — Colors are cool and desaturated; the singular, muted carmine accent is reserved strictly for primary actions and exactly one editorial note per view.
5. **Photographic Authenticity** — Imagery leans into tactile reality: rainlit frontages, silverware, folded menus, and black diary corners.

### Strict Rules

* **Capped Hero Scale** — Hero headings must never exceed `text-3xl`. Screaming typography is strictly forbidden.
* **Rectangular Photographic Heroes** — Hero sections must utilize structured, rectangular photography, never edge-to-edge full-bleed ambient videos or abstract vectors.
* **Document-Like Menus** — Navigation and item lists must be ruled, mimicking physical folded menus or index cards.
* **Practical Anchors** — Address and opening hour rows must be explicitly practical, visible, and unhidden by excessive interaction.
* **No Decorative Embellishments** — Decorative frames, stickers, and ornate flourishes are completely banned.
* **No Beige Washes** — Backgrounds remain strictly in the cool, moonlit spectrum. Warm beige or generic wine-reds are rejected in favor of zinc and carmine.

---

## Color Palette

### Base, Content & Ink

The palette is rooted in cooler moonlit whites and pale zinc-grey bands, creating a crisp, paper-like foundation. Typography avoids harsh pure blacks in favor of softened charcoal-plum to emulate physical ink.

```css
/* Backgrounds (Moonlit Sheet & Zinc Bands) */
bg-slate-50           /* Main canvas background: cooler moonlit white (#f8fafc) */
bg-zinc-100           /* Pale zinc-grey content bands and alternating panels (#f4f4f5) */
bg-zinc-200/50        /* Subtle hover states for document rows */
bg-zinc-800           /* Black-diary corners and dark structural anchors */

/* Borders (Silver Hairlines) */
border-slate-200      /* Ultra-soft internal dividers */
border-zinc-300       /* Primary silver hairlines, document rules (#d4d4d8) */
border-zinc-400       /* Darker silver for emphasized structural borders */
border-zinc-900       /* Black-diary corner framing */

/* The Highlighter: Muted Carmine */
text-rose-700         /* Primary interactive focus, single editorial note (#be123c) */
bg-rose-700           /* Primary call-to-action buttons */
border-rose-700       /* Focused inputs, active menu indicators */
bg-rose-50/50         /* Extremely subtle background for the single editorial callout */

/* Typography: Charcoal-Plum & Softened Ink */
text-zinc-900         /* Primary text, hero headings, softened charcoal ink */
text-stone-800        /* Body copy, maintaining a faint, warm plum undertone */
text-zinc-600         /* Secondary descriptions, practical row data (address/hours) */
text-zinc-500         /* Silver-grey metadata, muted dates */

/* Social Proof */
text-yellow-500       /* Golden review stars - MANDATORY for immediate proof (#eab308) */
```

---

## Typography

Typography emulates high-end print design. The system pairs elegant, historic serif headings with highly legible, generous serif body copy. Ink is always slightly softened to reduce screen fatigue.

### Font Families

```css
/* Headings: Libre Caslon Text, Fanwood Text, or Linden Hill */
font-serif font-heading

/* Body: Charter, Spectral, or Crimson Pro */
font-serif font-body
```

### Font Weights

```css
font-normal      /* Dominates the interface. Used for all body copy and most headers */
font-medium      /* Used sparingly for practical address rows or opening hours */
font-semibold    /* Reserved for button labels and specific document rule headers */
/* font-bold is rarely used; emphasis is achieved through italicization or color */
```

### Font Size Scale & Line Height (Baseline-Led Rhythm)

```css
text-xs          /* Captions, metadata, tiny diary dates (12px) */
text-sm          /* Secondary practical data, address rows, footer links (14px) */
text-base        /* Core editorial body copy (16px) */
text-lg          /* Introductory social-proof paragraphs (18px) */
text-xl          /* Standard section titles, menu category headers */
text-2xl         /* Sub-heroes, primary alternating panel headers */
text-3xl         /* MAXIMUM SCALE: Hero headings, book titles. Never exceed this. */

/* Generous Baseline Rhythm */
leading-relaxed  /* Standard for short paragraphs */
leading-loose    /* Standard for long-form editorial content */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Line Height |
| --- | --- | --- | --- | --- |
| Hero Heading | 3xl | normal | zinc-900 | tight |
| Social Proof | lg | normal | stone-800 | relaxed |
| Alternating Header| 2xl | normal | zinc-900 | tight |
| Body Copy | base | normal | stone-800 | loose |
| Practical Rows | sm | medium | zinc-600 | normal |
| Editorial Note | base | normal | rose-700 (Carmine) | relaxed |

---

## Animation System

### Core Philosophy: The Gentle Tactile Shift

Motion should mimic the physical interaction with a menu or diary page—quiet, deliberate, and subtle.

### Opacity Reveals

Pages and alternating panels fade in softly without aggressive zooming or bouncing.

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

### Hover Darkening & Image Lift

Instead of glowing or lightening, elements darken to simulate shadow and depth, while images experience a mild, physical lift.

```tsx
// Image Lift Hover
className="transition-transform duration-500 ease-out hover:-translate-y-1 hover:shadow-md"

// Button/Link Hover Darkening
className="transition-colors duration-300 hover:brightness-90 hover:bg-zinc-200"
```

---

## UI Components

### The Slim Light Navbar

A strictly utilitarian navigation bar that provides wayfinding without dominating the viewport.

```tsx
<nav className="w-full bg-slate-50 border-b border-zinc-300 py-3 px-6 flex justify-between items-center text-sm font-medium text-zinc-900">
  {/* Content */}
</nav>
```

### The Rectangular Photographic Hero

A structured, capped-width hero block featuring constrained typography and immediate social proof.

```tsx
<header className="max-w-4xl mx-auto pt-12 pb-8 px-4 flex flex-col items-center text-center">
  <div className="flex gap-1 mb-4 text-yellow-500">
    <StarIcon /><StarIcon /><StarIcon /><StarIcon /><StarIcon />
  </div>
  <h1 className="text-3xl font-serif text-zinc-900 mb-6">
    Rainlit Frontage & Silverware
  </h1>
  <p className="text-lg text-stone-800 max-w-2xl leading-relaxed mb-8">
    "The finest local establishment we've encountered this year."
  </p>
  <div className="w-full aspect-[16/9] bg-zinc-200 relative overflow-hidden border border-zinc-900">
    {/* Rectangular Photography Here */}
  </div>
</header>
```

### Alternating Image/Text Panels

Tidy 2014 gutters with a strict, repeatable rhythmic module for narrative flow.

```tsx
<section className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 py-12 items-center">
  <div className="order-2 md:order-1 px-8">
    <h2 className="text-2xl font-serif text-zinc-900 mb-4">A Quiet Evening</h2>
    <p className="text-base text-stone-800 leading-loose">
      Content goes here, rendered with generous line-height and softened ink.
    </p>
  </div>
  <div className="order-1 md:order-2">
    <img src="..." className="w-full h-auto border border-zinc-300 shadow-sm transition-transform duration-500 hover:-translate-y-1" />
  </div>
</section>
```

---

## Component Catalog

### Practical Address & Opening Rows

Highly legible, unhidden utility information formatted like a physical ledger.

```tsx
<div className="flex justify-between items-baseline border-b border-zinc-300 py-3">
  <span className="text-sm font-medium text-zinc-900">Tuesday – Saturday</span>
  <span className="text-sm text-zinc-600">17:00 — 23:00</span>
</div>
```

### Ruled Document-Like Menu

```tsx
<ul className="max-w-2xl mx-auto border-t border-zinc-300">
  <li className="flex justify-between items-baseline py-4 border-b border-zinc-300 bg-slate-50 hover:bg-zinc-100 transition-colors">
    <div>
      <h3 className="text-lg font-serif text-zinc-900">Braised Endive</h3>
      <p className="text-sm text-zinc-600 mt-1 italic">Walnut vinaigrette, pecorino</p>
    </div>
    <span className="text-base text-zinc-900 tabular-nums">14</span>
  </li>
</ul>
```

### Black Diary Corner Callouts

Used for structural accents or imagery framing, enforcing the tactile book-designer aesthetic.

```tsx
<div className="relative p-6 bg-zinc-100 border border-zinc-300">
  {/* Top Left Corner Accent */}
  <div className="absolute top-0 left-0 w-3 h-3 bg-zinc-900" />
  {/* Bottom Right Corner Accent */}
  <div className="absolute bottom-0 right-0 w-3 h-3 bg-zinc-900" />
  
  <p className="text-rose-700 font-serif text-base italic text-center">
    * Editorial note: Substitutions politely declined.
  </p>
</div>
```

### Buttons

```tsx
// Primary Action (Muted Carmine)
"bg-rose-700 text-slate-50 font-medium text-sm px-6 py-2.5 rounded-sm hover:brightness-90 transition-all"

// Secondary Action (Ruled Paper Style)
"bg-transparent border border-zinc-400 text-zinc-900 font-medium text-sm px-6 py-2.5 rounded-sm hover:bg-zinc-100 transition-all"
```

---

## Quality Checklist

* [ ] Is the hero heading strictly capped at `text-3xl` or smaller?
* [ ] Does the hero use a rectangular photograph with no full-bleed background images?
* [ ] Is the immediate golden star social proof visible above the fold?
* [ ] Are the menus and data lists separated by pure `border-zinc-300` silver hairlines?
* [ ] Did you avoid all use of beige backgrounds and generic wine-reds, favoring zinc and carmine?
* [ ] Are the practical address and opening hour rows instantly readable and not hidden behind accordions?
* [ ] Is the carmine accent used strictly for primary calls-to-action or one solitary editorial note?
* [ ] Does the body text have a generous `leading-loose` or `leading-relaxed` rhythm?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Cool moonlit backgrounds (`bg-slate-50`) and pale zinc-grey bands (`bg-zinc-100`).
* Muted carmine accents for primary buttons and targeted editorial highlights.
* Golden review stars combined with centered social-proof paragraphs.
* Rectangular, bordered photography displaying authentic tactile subjects (silverware, rainlit frontage).
* Simple opacity reveals, hover darkening, and subtle physical image lifts.
* Tidy, repeatable 2014-style gutters and document-like list rules.

### ✗ Not Allowed

* Type sizes exceeding `text-3xl` (Screaming hero typography is forbidden).
* Luxury emptiness (vacuous whitespace without structural rhythm or modular purpose).
* Low-contrast greys (text must remain highly legible, using softened charcoal-plum ink).
* Decorative frames, stickers, or ornate flourishes.
* Warm beige washes or standard, generic wine-red accents.
* Abstract vectors or edge-to-edge ambient video backgrounds.
Preview