No preview available
Frosted Petrol & Mint Notice Ledger

/frostedPetrolMintNoticeLedger
A design language for premium, editorial ledger interfaces with strict typography, Ink-Petrol horizontal anchors, atmospheric photography, and restrained Mint-Sea accents—rejecting startup minimalism for a sharp, 2014-builder-inspired aesthetic.
Sep 6, 2026
Design System Content
# Frosted Petrol & Mint Notice Ledger

A design language for sharp, 2014-builder-inspired editorial ledger interfaces.

---

## Philosophy

> "Restraint, repetition, and legibility create absolute confidence."

This system creates interfaces that feel like a highly curated, premium editorial ledger. It rejects modern startup minimalism in favor of a slightly sharper, structured, 2014-builder aesthetic. Personality is never injected through UI decoration—it is derived entirely from strict typographic rhythm, architectural information hierarchy, and raw, atmospheric photography.

### Core Beliefs

1. **Hierarchy through strict rhythm** — A compact but breathable typographic scale, aligned to an uncompromising grid, guides the user without screaming at them.
2. **Utilitarian accenting** — The Cool Mint-Sea accent exists sparingly. It is a functional tool used exclusively for primary actions and critical proof notes.
3. **Atmospheric reality over illustration** — Imagery must reflect physical reality (trays, receipts, counter surfaces, windows). Vectors and café clichés are banned.
4. **Information as texture** — Finely ruled tables and repeating editorial blocks provide visual interest through data itself.

### Strict Rules

* **Sans-Serif Exclusivity** — Only specific classic and neo-grotesque sans-serif pairings are permitted. Geometric startup fonts (e.g., Poppins, Montserrat) are strictly forbidden.
* **Dark Horizontal Navigation** — The primary anchor of the page is always a solid Ink-Petrol horizontal navbar.
* **Concise Hero Sections** — Heroes are heavily reduced: a single full-height parallax background image, a readable overlay, and a highly concise heading.
* **No Badges or Avatars** — User representation and statuses are handled through plain text and structural lists, rejecting bubbly UI tropes.
* **No Chalkboard Nostalgia** — The aesthetic is precise and modern, completely refusing beige warmth or rustic decorative clichés.

---

## Color Palette

### Monochromatic & Accent Scale

The palette relies on Frost-White canvases structured by Pale Mineral-Gray rules. Text sits in a Charcoal-Blue space to reduce harsh contrast, while Ink-Petrol anchors the primary navigation.

```css
/* Backgrounds (Lightest to Darkest) */
bg-white              /* Frost-white primary canvas (#ffffff) */
bg-slate-50/80        /* Petrol-tinted alternating editorial block (#f8fafc) */
bg-slate-100          /* Subtle secondary container */
bg-slate-800          /* Dark footer or secondary deep zones */
bg-slate-950          /* Ink-Petrol: Mandatory for horizontal navigation (#020617) */

/* Structural Rules (Pale Mineral-Gray) */
border-slate-150      /* Ultra-fine interior table rules (custom: #e2e8f0 with lower opacity) */
border-slate-200      /* Primary mineral-gray rules for sections and borders */
border-slate-300      /* Hover state borders for interactive table rows */

/* The Accent: Cool Mint-Sea */
bg-teal-400           /* Primary action buttons, subtle highlight bars */
text-teal-600         /* Proof notes, primary text links, isolated data hooks */
bg-teal-50            /* Super subtle mint highlight for selected ledger rows */

/* The Spark: Golden Review Stars */
text-amber-400        /* Exclusively reserved for the centered review-count band */

/* Text Hierarchy (Charcoal-Blue Scale) */
text-slate-950        /* Primary concise headings, hero text */
text-slate-800        /* Charcoal-blue body copy — the core reading color */
text-slate-600        /* Secondary metadata, table headers, hours/location details */
text-slate-400        /* Disabled states, fine-print structural notes */

```

### Interactive & Destructive States

```css
hover:bg-slate-900    /* Hover darkening for Ink-Petrol elements */
hover:bg-slate-100    /* Hover darkening for Frost-White elements */
hover:opacity-80      /* Slow fade application for image links */

```

---

## Typography

Typography must feel like a sharply printed modern ledger. Geometric fonts are banned. 

**Approved Pairings:**
1. Avenir Next (Headings) + Freight Sans (Body)
2. Neue Haas Grotesk Text (Headings) + Gill Sans Nova (Body)
3. Scala Sans (Headings) + Source Sans 3 (Body)

### Font Weights

```css
font-light       /* Rarely used, reserved only for massive parallax overlay text */
font-normal      /* The workhorse: body copy, menu items, table data */
font-medium      /* Section headings, button labels, location module headers */
/* font-semibold and font-bold are explicitly restricted to avoid oversized, loud visual noise */

```

### Font Size Scale (Restricted)

*Oversized headings are a common mistake. The scale is intentionally capped.*

```css
text-xs          /* Fine rules, hours of operation metadata, proof notes (12px) */
text-sm          /* Menu table data, ledger entries, navigation links (14px) */
text-base        /* Charcoal-blue body copy, standard reading size (16px) */
text-lg          /* Editorial block intros, primary location names (18px) */
text-xl          /* Standard section dividers (20px) */
text-2xl         /* Concise hero headings ONLY (24px) */
/* text-3xl+ is forbidden to maintain the restrained 2014-builder aesthetic */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Concise headings */
tracking-normal  /* All body and menu table text */
tracking-wide    /* Dark horizontal navigation links ONLY */

uppercase        /* Navigation links, table headers, small proof notes */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Heading | 2xl | medium | white | tight | none |
| Nav Links | sm | normal | slate-300 | wide | uppercase |
| Body Copy | base | normal | slate-800 | normal | none |
| Menu Table Item | sm | normal | slate-950 | normal | none |
| Proof Notes | xs | normal | teal-600 | normal | uppercase |

---

## Animation System

### Core Philosophy: Slow and Deliberate

Motion relies entirely on slow fades and hover darkening. There is absolutely no spectacle, no spring physics, and no scaling.

### Page & Image Transitions (Slow Fade)

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

### Micro-Interactions (Hover Darkening)

```tsx
// Buttons and interactive rows simply darken in value. No movement.
className="transition-colors duration-300 ease-in-out hover:bg-slate-800"
```

---

## UI Components

### Parallax Hero Overlay

Full-height background image with a strict, readable overlay. The image must feature architectural or tactile elements (windows, counter surfaces).

```tsx
<div className="relative h-screen w-full bg-fixed bg-center bg-cover" style={{ backgroundImage: 'url(/counter-surface.jpg)' }}>
  <div className="absolute inset-0 bg-slate-950/40 transition-opacity duration-700" />
  <div className="relative z-10 flex h-full items-center justify-center">
    <h1 className="text-2xl font-medium tracking-tight text-white">Concise Heading</h1>
  </div>
</div>
```

### Finely Ruled Menu Table

Data relies on pale mineral-gray rules. No alternating background colors within the table itself—just strict, clean lines.

```tsx
<table className="w-full text-sm text-slate-800 border-t border-slate-950">
  <thead>
    <tr className="border-b border-slate-200 uppercase tracking-wide text-xs text-slate-600">
      <th className="py-3 text-left font-normal">Item</th>
      <th className="py-3 text-right font-normal">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b border-slate-150 hover:bg-slate-50 transition-colors duration-300">
      <td className="py-4">Pour Over</td>
      <td className="py-4 text-right tabular-nums">4.50</td>
    </tr>
  </tbody>
</table>
```

### Centered Review-Count Band

A structural, full-width band dedicated exclusively to trust metrics, featuring the Golden Review Stars.

```tsx
<div className="w-full bg-slate-50 py-6 border-y border-slate-200 flex justify-center items-center gap-4">
  <div className="flex gap-1 text-amber-400">
    <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>
  <span className="text-sm text-slate-800 font-medium">Based on 1,402 verified ledger entries</span>
</div>
```

---

## Component Catalog

### Alternating Editorial Blocks

Sections must alternate between Frost-White and a subtle Petrol-Tint to create rhythm down the page.

```tsx
// Block A: Frost-White
"w-full bg-white py-16 px-8 border-b border-slate-200"

// Block B: Petrol-Tinted
"w-full bg-slate-50/80 py-16 px-8 border-b border-slate-200"
```

### Dark Horizontal Navigation

```tsx
// Mandatory Ink-Petrol Anchor
"w-full h-14 bg-slate-950 flex items-center justify-between px-8 text-white fixed top-0 z-50"
```

### Buttons & Actions

The Cool Mint-Sea accent is used sparingly, primarily for the most important action on the view.

```tsx
// Primary Mint Action
"bg-teal-400 text-slate-950 font-medium text-sm px-6 py-2.5 transition-colors duration-300 hover:bg-teal-500 rounded-none"

// Secondary Ledger Action (Mineral-Gray outline)
"bg-transparent border border-slate-200 text-slate-800 font-medium text-sm px-6 py-2.5 transition-colors duration-300 hover:bg-slate-50 rounded-none"
```

### Simple Location/Hours Module

Strictly textual, grid-aligned, without map embeds or decorative icons.

```tsx
<div className="grid grid-cols-2 gap-8 py-8 border-t border-slate-950">
  <div>
    <h3 className="text-xs uppercase tracking-wide text-slate-600 mb-4">Location</h3>
    <p className="text-sm text-slate-800 leading-relaxed">
      1042 Meridian Ave.<br />
      Suite 200<br />
      North District
    </p>
  </div>
  <div>
    <h3 className="text-xs uppercase tracking-wide text-slate-600 mb-4">Hours</h3>
    <ul className="text-sm text-slate-800 space-y-1">
      <li className="flex justify-between border-b border-slate-150 py-1">
        <span>Mon–Fri</span> <span>07:00 – 19:00</span>
      </li>
      <li className="flex justify-between border-b border-slate-150 py-1">
        <span>Sat–Sun</span> <span>08:00 – 16:00</span>
      </li>
    </ul>
  </div>
</div>
```

---

## Quality Checklist

* [ ] Is the primary navigation purely horizontal and set to a strict Ink-Petrol (`bg-slate-950`)?
* [ ] Did you strictly avoid geometric sans-serifs (like Poppins) in favor of classic grotesque pairings?
* [ ] Is the Hero section reduced to just a parallax image, readable overlay, and a *concise* heading?
* [ ] Are the review stars the only instance of yellow/gold (`text-amber-400`) on the page?
* [ ] Does all primary body copy utilize Charcoal-Blue (`text-slate-800`) instead of pure black?
* [ ] Are all UI elements sharply squared (no rounded corners/pills)?
* [ ] Is the Cool Mint-Sea accent (`teal-400`/`teal-600`) used extremely sparingly (only for primary buttons and critical proof notes)?
* [ ] Did you avoid all "muddy petrol" colors by sticking to clear, high-contrast slate/teal values?
* [ ] Are headings capped at `text-2xl` to prevent oversized visual noise?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Specific font pairings (Avenir Next/Freight Sans, etc.).
* Deep Ink-Petrol (`slate-950`) for top navigational structure.
* Pale mineral-gray (`slate-200`) hairline rules to divide information grids.
* Slow fade transitions (`0.6s easeInOut`) and hover darkening.
* Atmospheric photography focusing strictly on tactile reality: receipts, trays, glass windows, counter surfaces, and light hitting architectural angles.

### ✗ Not Allowed

* Geometric startup typography.
* Avatars, profile circles, or bubbly notification badges.
* Beige warmth or rustic chalkboard aesthetic elements.
* Spring-physics animations, scaling effects on hover, or fast snappy motions.
* Oversized text sizes above `text-2xl`.
* Colored text outside of Mint-Sea (for proof notes) or Gold (for review stars).
* Vectors, illustrations, or decorative café clichés (e.g., steaming coffee cup icons, bean patterns).
Preview