Ice Grey Receipt Folio & Morello-Red Proof Strip

/iceGreyReceiptFolioMorelloredProofStrip
A documentary UI system built on restrained utility, sharp structure, and photographic honesty—evoking premium receipt folios through disciplined grids, mature colors, and credible, compact layouts.
Sep 18, 2026
Design System Content
# Ice Grey Receipt Folio & Morello-Red Proof Strip

A design language for credible, transaction-focused, and photographically honest interfaces.

---

## Philosophy

> "Restraint builds credibility; structure establishes trust."

This system creates interfaces that feel like a meticulous folio of high-end receipts and architectural dossiers. It is built on rigid alignment, compact utility, and physical textures. The aesthetic rejects decorative fluff, "SaaS-y" exaggerated whitespace, and generic modernism in favor of a crisp, baseline-led, highly practical interface.

### Core Beliefs

1. **Credibility through readable hierarchy** — Trust is earned via immaculate baseline grids and typographic discipline, not through illustration or decoration.
2. **Photographic honesty** — Imagery must anchor the design in reality. We rely on raw, tactile textures (receipt paper, porcelain, black leather sleeves, rainlit frontage) rather than abstracted graphics.
3. **Repeatable modules** — Practical layouts (simple three-column blocks, full-width menu tables, plain location rows) are standardized and unvarying.
4. **Restraint over decoration** — The interface rejects "café styling." It is an objective document, functioning as a crisp folio.

### Strict Rules

* **Headlines are capped at 3XL** — Typography must remain utilitarian. Massive, oversized hero text is strictly forbidden.
* **No Badges, Avatars, or Icons** — Pure typography, photography, and structural layout replace illustrative shorthand.
* **Golden Yellow Review Stars Only** — Golden yellow exists exclusively for visible review stars within the centered social-proof block.
* **One Narrow Proof Strip** — The morello-red accent is used sparingly for primary actions, active navigation, and a single, defining architectural line (the proof strip).
* **Compact Navbar & Image-Heavy Hero** — Navigation is light and tight, instantly giving way to heavy, atmospheric photography.
* **No Glossy Gradients or Beige** — Backgrounds are strictly ice-white or pale blue-grey.

---

## Color Palette

### Base, Neutral, and Accent Scale (Vanilla CSS)

The palette is rooted in cold, crisp document colors. Backgrounds are ice-white or pale blue-grey. Typography is a deep charcoal-navy. Borders are cool steel. The accent is a muted, mature morello-red, sharply contrasting with the single permitted decorative element: golden yellow stars.

```css
:root {
  /* Canvas & Panels */
  --color-ice-white: #ffffff;
  --color-pale-blue-grey: #eef1f4;
  --color-pale-blue-grey-dark: #e1e6eb;

  /* Typography & Structure */
  --color-charcoal-navy: #151a22;
  --color-charcoal-muted: #3a424e;
  --color-charcoal-light: #5d6876;
  --color-cool-steel: #c5ccd4;
  
  /* Accents */
  --color-morello-red: #721c24;
  --color-morello-red-hover: #5a161c;
  --color-morello-red-active: #8b232c;
  
  /* Singular Exception Color */
  --color-golden-yellow: #d4af37; /* Strictly for review stars */
}

/* Background Utility Classes */
.bg-ice-white { background-color: var(--color-ice-white); }
.bg-pale-blue-grey { background-color: var(--color-pale-blue-grey); }
.bg-morello-red { background-color: var(--color-morello-red); }

/* Text Utility Classes */
.text-charcoal-navy { color: var(--color-charcoal-navy); }
.text-charcoal-muted { color: var(--color-charcoal-muted); }
.text-morello-red { color: var(--color-morello-red); }
.text-golden-yellow { color: var(--color-golden-yellow); }

/* Border Utility Classes */
.border-cool-steel { border-color: var(--color-cool-steel); }
.border-morello-red { border-color: var(--color-morello-red); }
```

---

## Typography

The typographic system pairs industrial, structured display faces with highly legible, utilitarian body copy. It explicitly avoids the default "Inter-only" aesthetic of generic software.

### Font Families

```css
:root {
  /* Univers-style, DIN Next, or Apex New-style for Headings */
  --font-heading: 'DIN Next', 'Univers', 'Apex New', sans-serif;
  
  /* Chivo, IBM Plex Sans, or Public Sans for Body */
  --font-body: 'IBM Plex Sans', 'Chivo', 'Public Sans', sans-serif;
}
```

### Font Size Scale & Limits

Strict enforcement of a 3XL cap for all headlines. 

```css
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }   /* Menu rows, practical blocks */
.text-base { font-size: 1rem; line-height: 1.5rem; }      /* Default paragraph body */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }   /* Subheadings, social proof */
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }    /* Section headers */
.text-2xl { font-size: 1.5rem; line-height: 2rem; }       /* Article/Page titles */
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }  /* MAXIMUM HERO SIZE - DO NOT EXCEED */
```

### Typographic Rhythm

```css
.heading {
  font-family: var(--font-heading);
  color: var(--color-charcoal-navy);
  letter-spacing: -0.01em;
  font-weight: 600;
}

.body-text {
  font-family: var(--font-body);
  color: var(--color-charcoal-muted);
  letter-spacing: 0;
  font-weight: 400;
}
```

---

## Spacing & Cadence

Spacing follows a **compact 2015 cadence**. Interfaces must feel tight, organized, and structurally sound, rejecting the hyper-spaced, airy layouts of modern SaaS. Grids rely on strict alignment and baseline-led rows.

```css
:root {
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px - Standard gutter */
  --space-lg: 1.5rem;   /* 24px - Section separation */
  --space-xl: 2.5rem;   /* 40px - Maximum structural break */
}

/* Baseline-led Menu Rows */
.menu-row {
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-xs);
  line-height: 1.4;
  border-bottom: 1px solid var(--color-cool-steel);
}
```

---

## Animation System

### Core Philosophy: Restrained Fades

Motion is heavily restricted to maintain a documentary, static feel. Elements do not bounce, scale, or slide. They only fade in or darken gently upon hover.

```css
/* Standard Fade Arrival */
.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hover Darkening (Restrained) */
.hover-darken {
  transition: background-color 0.2s linear, color 0.2s linear;
}

.hover-darken:hover {
  background-color: var(--color-pale-blue-grey-dark);
}
```

---

## Component Catalog

### The Narrow Proof Strip

A single, continuous Morello-Red line used to ground navigation or emphasize the active state. 

```css
.proof-strip {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-morello-red);
}

.nav-item-active {
  color: var(--color-charcoal-navy);
  border-bottom: 3px solid var(--color-morello-red);
}
```

### Receipt Panels (Practical Blocks)

Three-column practical blocks and panels that sit squarely on the ice-white canvas.

```css
.receipt-panel {
  background-color: var(--color-pale-blue-grey);
  border: 1px solid var(--color-cool-steel);
  padding: var(--space-md);
  border-radius: 0; /* Strict adherence to sharp, paper-like corners */
}

.three-column-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
```

### Primary Actions (Buttons)

Strictly functional. No rounded pills, no drop shadows. 

```css
.btn-primary {
  background-color: var(--color-morello-red);
  color: var(--color-ice-white);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

.btn-primary:hover {
  background-color: var(--color-morello-red-hover);
}
```

### Full-Width Document Menu Table

Spans the container edge-to-edge, utilizing cool steel rules. Menu copy must be generously legible (never cramped).

```css
.document-menu-table {
  width: 100%;
  border-collapse: collapse;
}

.document-menu-table th,
.document-menu-table td {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-cool-steel);
  text-align: left;
  vertical-align: baseline;
}

.document-menu-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-charcoal-navy);
}
```

### Centered Social Proof & Review Stars

```css
.social-proof-container {
  text-align: center;
  max-width: 600px;
  margin: var(--space-xl) auto;
}

.review-stars {
  color: var(--color-golden-yellow);
  font-size: 1.25rem;
  letter-spacing: var(--space-xs);
  margin-bottom: var(--space-sm);
}
```

---

## Quality Checklist

* [ ] Are all headlines capped at `text-3xl` (1.875rem) or smaller?
* [ ] Is the spacing tight, aligned, and utilizing a compact 2015 cadence instead of floaty SaaS spacing?
* [ ] Are all icons, avatars, and badges completely removed from the layout?
* [ ] Is Morello-Red the only accent color used, avoiding any bright "candy-red" tones?
* [ ] Are the review stars the only elements using Golden Yellow?
* [ ] Is the charcoal-navy typography distinctly avoiding standard hex blacks or generic software navies?
* [ ] Does the menu copy have baseline-led alignment without feeling cramped?
* [ ] Did you pair a DIN Next/Univers/Apex New heading with a Chivo/Plex/Public Sans body? (No Inter allowed).

---

## Allowed vs Not Allowed

### ✓ Allowed

* Sharp, square-cornered rectangular panels and buttons.
* Deep charcoal-navy text for optimal, high-contrast reading against ice-white pages.
* Heavy, honest, unmanipulated photography (leather, rain, porcelain, paper).
* Full-width horizontal cool steel rules (`1px solid var(--color-cool-steel)`).
* Simple, direct fade-in animations.

### ✗ Not Allowed

* **SaaS Spacing:** Do not use massive 96px gaps between simple textual elements.
* **Candy-Red Accents:** No bright, saturated reds. Strict adherence to muted Morello-Red.
* **Generic Typography:** Absolutely no default Inter or Roboto. 
* **Decorative Elements:** No icons, no avatars, no colorful badges. 
* **Oversized Text:** No typography larger than 3XL.
* **Gradients & Softness:** No glossy gradients, no drop shadows, no beige backgrounds, no rounded corners (`border-radius` should be `0`).
Preview