Snow Porcelain Cranberry Counter Ledger

/snowPorcelainCranberryCounterLedger
A crisp, grounded design system for local service UIs. Focuses on physical, document-like clarity, strict color restraint, accessible typography, and modest visual hierarchy to evoke trust in actively maintained interfaces.
Aug 24, 2026
Design System Content
# Snow Porcelain Cranberry Counter Ledger

A design language for maintained, grounded, and highly credible local service interfaces.

---

## Philosophy

> "Clarity breeds credibility; maintenance is hospitality."

This system creates a crisp, light-themed register environment. It evokes the feeling of a well-kept countertop, an immaculately printed ledger, or a pristine local storefront. The interface is designed to feel readable and actively maintained rather than over-branded, themed, or decorative.

### Core Beliefs

1. **Grounded Reality** — The digital space should feel like a physical extension of a real-world location. Imagery focuses on tangible artifacts: printed receipts, silver trays, and rainy window reflections.
2. **Document-like Structure** — Layouts rely on compact but breathable spacing, utilizing consistent gutters and fine dividers to organize information logically.
3. **Restrained Emphasis** — A single, dry cranberry accent anchors the page's most vital elements. It is deployed with surgical precision for CTAs, review proof, and exactly one confident editorial panel per view.
4. **Immediate Trust** — Golden yellow review stars act as visual anchors for credibility. They are placed strictly and directly under main claims to immediately validate the establishment.
5. **Calm Pacing** — Information is delivered through two calm content bands and document-like menu tables. The eye is never rushed or assaulted by oversized typographic scales.

### Strict Rules

* **No Icons or Avatars** — Rely purely on structural alignment, typography, and photography. The design refuses digital artifice.
* **No Sugary Red or Beige** — The accent is a dry, mature cranberry. Backgrounds must be pure snow-porcelain, completely avoiding muddy beige or warm cream tones.
* **No Stickers or Heavy Borders** — Structural dividers must remain cool, hairline pewter rules. 
* **Required Structural Layout** — Pages must feature an elegant navbar, a split hero section (photography strictly of counter-service, a cake-stand, or rainy frontage), and a highly practical address/hours grid.
* **Modest Typography** — Headings must never be oversized. The hierarchy relies on font-weight and subtle scale shifts, rejecting the "shouting" of modern landing pages.

---

## Color Palette

### The Snow & Pewter Scale

The foundation is built on immaculate whites and cool, structural grays. Typography utilizes a deep, legible charcoal rather than a stark digital black.

```css
/* Backgrounds (Snow Porcelain) */
bg-white              /* Primary canvas, menus, main content bands (#ffffff) */
bg-slate-50           /* Secondary calm content bands, alternating table rows */
bg-slate-100          /* Address/hours grid backgrounds, subtle structural containment */

/* Rules & Dividers (Cool Pewter) */
border-slate-200      /* Fine dividers, document-like table borders */
border-slate-300      /* Structural column dividers, input boundaries */

/* Typography (Charcoal) */
text-slate-900        /* Main headlines, confident editorial panel titles */
text-slate-800        /* Core readable body copy, document-like menu items */
text-slate-600        /* Secondary table data, hours grid details */
text-slate-500        /* Muted addresses, subtle metadata */

```

### The Accents: Cranberry & Gold

Used exclusively to drive action and establish immediate proof.

```css
/* The Dry Cranberry (Action & Editorial) */
bg-rose-900           /* Primary CTAs, Notice Blocks (#4c0519) */
text-rose-900         /* Text links in the editorial panel, critical text buttons */
hover:bg-rose-950     /* Button darkening interaction state */
border-rose-900/20    /* Subtle border for the single editorial panel */

/* The Golden Proof (Trust) */
text-amber-400        /* Review stars ONLY */
fill-amber-400        /* SVG star fills */

```

---

## Typography

Pairing sophisticated geometric or humanist display faces with highly grounded, legible sans-serif body copy. 

**Allowed Headings:** Montserrat Light, Raleway, or Josefin Sans.
**Allowed Body Copy:** Merriweather Sans, Lato, or Source Sans Pro.

### Font Weights

```css
font-light       /* Primary headlines, split hero titles */
font-normal      /* Core menu items, address grids, primary paragraphs */
font-medium      /* Cranberry notice block text, CTA buttons */
font-semibold    /* Subtle table headers, centered proof headlines */

```

### Font Size Scale (Intentionally Restrained)

```css
text-xs          /* Table metadata, specific hours exceptions (12px) */
text-sm          /* Standard document-like menu descriptions (14px) */
text-base        /* Core readable body text, address grid data (16px) */
text-lg          /* Editorial panel subheadings, review excerpts (18px) */
text-xl          /* Standard section markers, calm band titles (20px) */
text-2xl         /* Centered proof headline (24px) */
text-3xl         /* Maximum hero heading size - absolutely NO oversized text (30px) */

```

### Letter Spacing

```css
tracking-tight   /* Large headings only to maintain structural blockiness */
tracking-normal  /* All body copy for grounded readability */
tracking-wide    /* Uppercase small headers in the address/hours grid */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Main Claim | 3xl | light | slate-900 | tight | none |
| Centered Proof | 2xl | semibold | slate-900 | normal | none |
| Menu Item Title | base | medium | slate-800 | normal | none |
| Action Buttons | sm | medium | white | normal | none |
| Hours Grid Header| xs | semibold | slate-500 | wide | uppercase |

---

## Animation System

### Core Philosophy: Immutable Structure

Interactions should feel like ink drying or a shadow passing over a physical counter. Motion is strictly limited to opacity fades and color darkening. No scaling, no translations, no bouncy spring physics.

### Page Transitions

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

### Micro-Interactions (Button Darkening Only)

```css
/* Standard Tailwind Hover */
className="transition-colors duration-200 ease-in-out hover:bg-rose-950"
```

---

## UI Components

### Split Hero (Counter-Service / Frontage)

The entry point must divide the viewport into a pristine typography block and a grounded photographic anchor. 

```tsx
<header className="grid grid-cols-1 md:grid-cols-2 border-b border-slate-200">
  <div className="flex flex-col justify-center px-12 py-16 bg-white">
    <h1 className="text-3xl font-light text-slate-900 tracking-tight mb-4">
      Morning preparation and seasonal provisions.
    </h1>
    <ReviewProofStars className="mb-8" />
    <button className="w-fit bg-rose-900 text-white px-6 py-2.5 text-sm font-medium transition-colors hover:bg-rose-950">
      Place an Order
    </button>
  </div>
  <div className="relative h-64 md:h-auto bg-slate-100">
    {/* Image: Rainy frontage, counter-service, or silver tray */}
    <img src="/rainy-frontage.jpg" className="absolute inset-0 object-cover w-full h-full mix-blend-multiply" />
  </div>
</header>
```

### Document-like Menu Table

Avoids "cards" in favor of an organized, ledger-like row structure.

```tsx
<div className="w-full border-t border-slate-200">
  {items.map((item) => (
    <div className="flex justify-between py-3 border-b border-slate-200 hover:bg-slate-50 transition-colors">
      <span className="text-base text-slate-800 font-normal">{item.name}</span>
      <span className="text-sm text-slate-600 font-normal tabular-nums">{item.price}</span>
    </div>
  ))}
</div>
```

### Cranberry Notice Block

Used strictly for critical operational updates (e.g., holiday closures, sold-out notices). 

```tsx
<div className="bg-rose-900 text-white px-6 py-4 flex items-center justify-between">
  <span className="text-sm font-medium">Holiday Schedule: Closed through Monday.</span>
</div>
```

---

## Component Catalog

### Practical Address & Hours Grid

```tsx
<div className="grid grid-cols-2 gap-8 p-8 bg-slate-50 border border-slate-200">
  <div>
    <h4 className="text-xs uppercase tracking-wide text-slate-500 font-semibold mb-2">Location</h4>
    <p className="text-sm text-slate-800 leading-relaxed">
      1042 West Ledger Street<br />
      North District, 90210
    </p>
  </div>
  <div>
    <h4 className="text-xs uppercase tracking-wide text-slate-500 font-semibold mb-2">Hours</h4>
    <ul className="text-sm text-slate-800 leading-relaxed space-y-1">
      <li className="flex justify-between"><span>Mon–Fri</span> <span className="text-slate-600">7am — 3pm</span></li>
      <li className="flex justify-between"><span>Sat–Sun</span> <span className="text-slate-600">8am — 4pm</span></li>
    </ul>
  </div>
</div>
```

### Confident Editorial Panel

The only component allowed to break pure utility, offering a short, grounded narrative.

```tsx
<article className="bg-white border-l-4 border-rose-900/80 p-8 my-12 max-w-2xl mx-auto shadow-[0_1px_3px_rgba(0,0,0,0.02)]">
  <h2 className="text-xl text-slate-900 font-light mb-3">Sourced locally, maintained daily.</h2>
  <p className="text-base text-slate-800 font-normal leading-relaxed">
    Our ledger is balanced by the seasons. We prepare small batches to ensure nothing is held over, maintaining the crispness of our daily offerings.
  </p>
</article>
```

### Review Proof Anchors

Always placed directly beneath the main claim or centered headline. 

```tsx
<div className="flex items-center space-x-1">
  {[1, 2, 3, 4, 5].map((star) => (
    <svg className="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20">
      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
    </svg>
  ))}
  <span className="text-sm text-slate-600 ml-2 font-medium border-l border-slate-200 pl-2">Based on 142 local reviews</span>
</div>
```

---

## Quality Checklist

* [ ] Is the primary hero layout strictly a split design featuring counter-service, a cake-stand, or rainy frontage photography?
* [ ] Are golden yellow review stars positioned *directly* beneath the main typographic claim?
* [ ] Are all rules and dividers rendering as fine, cool pewter lines (`border-slate-200`) rather than heavy borders?
* [ ] Have you completely avoided oversized headings? (Max `text-3xl`).
* [ ] Does the menu look like a printable document/ledger table instead of a grid of heavy cards?
* [ ] Is the dry cranberry accent (`bg-rose-900`) strictly reserved for CTAs, the notice block, and the single editorial panel?
* [ ] Does the implementation successfully avoid looking like a themed "Christmas café flyer"?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Pure snow-porcelain whites and cool, structural slate grays.
* Dry cranberry specifically for primary user actions or critical structural notices.
* Golden yellow explicitly for review proof stars.
* Grounded photography: Printed receipts, silver trays, window reflections, physical counter spaces.
* Fine dividers, consistent gutters, and document-like table rows.
* Opacity fades and simple button darkening.

### ✗ Not Allowed

* **No Beige or Sugary Red** — No warm creams, muddy backgrounds, or bright/candy-apple reds.
* **No Icons or Avatars** — Do not use vector icons for services or user avatars for testimonials. Rely on typography.
* **No Decorative Stickers** — Avoid badge overlays, "New!" bursts, or themed café decorations.
* **No Oversized Headings** — Never exceed `text-3xl`. The scale must remain modest and document-like.
* **No Heavy Borders or Shadows** — Avoid thick structural lines. Do not use large drop shadows that lift elements unnaturally off the "ledger."
* **No Movement** — No spatial animations, sliding layouts, or bouncy spring transitions.
Preview