Snowpaper Graphite Cornflower Café Notice Design System

/snowpaperGraphiteCornflowerCafNoticeDesignSystem
A practical, elegant design system evoking the clarity and warmth of local business notices, using crisp whites, restrained typography, and authentic photography for trustworthy, document-like interfaces.
Sep 3, 2026
Design System Content
# Snowpaper Graphite Cornflower Café Notice Design System

A design language for crisp, elegant, and highly practical local-business interfaces.

---

## Philosophy

> "Warmth through clarity; trust through restraint."

This system creates interfaces that feel like a beautifully typeset community notice—a perfect fusion of daylight, practical information, and unpretentious elegance. The aesthetic relies heavily on typographical contrast and document-like structure. It builds an atmosphere of a well-run, trustworthy local establishment through extreme structural restraint rather than decorative flourishes.

### Core Beliefs

1. **Restraint creates warmth** — Warmth is achieved through beautifully balanced typesetting, human-scale imagery, and daylight-infused backgrounds, not through heavy colors or illustrations.
2. **Daylight as a canvas** — The background must feel like crisp "snowpaper"—bright, slightly cool, and completely free of muddy beige tones.
3. **Useful information first** — The primary goal is utility. Location data, operating hours, and document-like menus anchor the user experience.
4. **Believable review density** — Social proof is highly structured, boxed, and precise, lending authenticity to the establishment's reputation without feeling like a marketing gimmick.

### Strict Rules

* **Structure is Non-Negotiable** — Layouts must feature a slim light navbar, centered hero copy, and a modest image strip directly below the hero.
* **Review Placement** — The star rating lives *directly* under the primary headline. Review-count statements must be enclosed in a boxed proof section.
* **Document-Like Menus** — Menus and service lists act as structured tables with fine, pale silver-gray row rules. 
* **The Location Module** — A practical, highly legible location module is required on the primary view.
* **No Stickers or Icons** — Visual clutter is strictly prohibited. No arbitrary UI icons, no trendy graphic stickers, no emojis.
* **No Illustrations or Gradients** — Backgrounds are flat. Photography carries the visual weight.
* **No Beige** — Warmth comes from imagery and typography, never from artificial yellow or beige background tints.

---

## Color Palette

### Snowpaper, Graphite & Cornflower Scale

The palette rejects modern, sterile tech-grays in favor of crisp "snowpaper" whites, high-contrast "graphite" text, and a highly specific "cornflower" blue acting as a singular, precise accent for conversion and navigation.

```css
/* Snowpaper Backgrounds */
bg-white              /* Primary canvas (#ffffff) */
bg-zinc-50            /* Secondary modules, subtle boxed sections (#fafafa) */
bg-zinc-100/50        /* Hover states for interactive menu rows */

/* Pale Silver-Gray Dividers */
border-zinc-200       /* Default document dividers, fine row rules */
border-zinc-300       /* Stronger borders for boxed proof sections */

/* Graphite Typography */
text-zinc-900         /* Primary headings, hero text (Dark Graphite) */
text-zinc-700         /* Main body copy, menu descriptions (Medium Graphite) */
text-zinc-500         /* Timestamps, fine print, metadata (Light Graphite) */

/* The Cornflower Accent (Links, Booking, Callouts) */
bg-blue-500           /* Primary booking buttons, active states */
text-blue-600         /* Text links, actionable highlights */
border-blue-500       /* Focused input rings, accented module borders */
bg-blue-50            /* Extremely subtle backgrounds for social-proof callouts */

/* Golden Yellow (Reviews Only) */
text-yellow-400       /* Strict reservation: Review stars ONLY */
```

---

## Typography

Typography merges traditional editorial authority with modern legibility. A high-quality serif anchors the headings to provide a "printed notice" feel, while a clean, unpretentious sans-serif delivers dense, useful information effortlessly. Headings remain elegant and never oversized.

### Font Families

```css
font-serif       /* Headings: Times New Roman, Charter, or Zodiak Text */
font-sans        /* Body & UI: Myriad Pro, Karla, or Freight Sans */
```

### Font Weights

```css
font-normal      /* Core body copy, menu descriptions, general text */
font-medium      /* Subheadings, strong document labels, booking buttons */
font-semibold    /* Reserved for review counts, prices, and precise data points */
/* font-light and font-bold are generally avoided to maintain an even, medium typographic color */
```

### Font Size Scale

Headings are purposefully restrained to maintain a refined, human-scale feel. Oversized typography is strictly forbidden.

```css
text-xs          /* Fine print, location metadata, opening hours labels (12px) */
text-sm          /* Menu descriptions, standard body copy (14px) */
text-base        /* Primary readable text, introductory paragraphs (16px) */
text-lg          /* Menu section titles, secondary headings (18px) */
text-xl          /* Standard page headings, module titles (20px) */
text-2xl         /* Subdued Hero headlines (24px) - Max size for desktop standard */
text-3xl         /* Absolute maximum hero size for critical impact (30px) */
```

### Spacing & Transforms

```css
tracking-normal  /* Default for all standard text */
tracking-wide    /* Used sparingly for small, uppercase section headers */
uppercase        /* Small location labels, day-of-the-week indicators */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Serif | 2xl-3xl | normal | zinc-900 | none |
| Menu Section | Serif | lg | medium | zinc-900 | none |
| Item Name | Sans | base | medium | zinc-900 | none |
| Item Desc. | Sans | sm | normal | zinc-700 | none |
| Price | Sans | base | semibold | zinc-900 | none |
| Meta Label | Sans | xs | medium | zinc-500 | uppercase |

---

## Animation & Motion System

### Core Philosophy: Quiet Utility

Motion is entirely utilitarian. It exists only to confirm interactions. There are no dramatic sweeps, no spring physics, and no scaling animations. Elements simply transition in opacity and shade.

### Interactions (Simple Darkening & Opacity)

```tsx
// Button Interaction (Simple darkening)
transition-colors duration-200 ease-in-out hover:bg-blue-600

// Link Interaction (Simple opacity shift)
transition-opacity duration-200 hover:opacity-70

// Menu Row Hover (Subtle background reveal)
transition-colors duration-150 hover:bg-zinc-100/50
```

---

## UI Components & Layout Rules

### The Modest Image Strip

Directly below the centered hero copy, a horizontally scrolling or neatly gridded strip of images sits. Photography must be authentic: frontage glass, printed menus resting on tables, and counter details.

```tsx
<div className="flex gap-4 overflow-x-auto pb-4 mt-8 snap-x">
  <img src="/frontage.jpg" className="h-48 w-72 object-cover snap-center" alt="Front window" />
  <img src="/menu-detail.jpg" className="h-48 w-72 object-cover snap-center" alt="Printed menu" />
  <img src="/counter.jpg" className="h-48 w-72 object-cover snap-center" alt="Countertop" />
</div>
```

### Boxed Proof Section

Review counts and social proof sit in tightly bordered, highly structured boxes to convey believable review density.

```tsx
<div className="inline-flex items-center gap-3 border border-zinc-300 bg-zinc-50 px-4 py-2 mt-4">
  <div className="flex text-yellow-400 text-sm">
    ★★★★★
  </div>
  <span className="text-sm font-semibold text-zinc-900">4.8</span>
  <span className="text-sm text-zinc-700">from 342 local reviews</span>
</div>
```

### Document-Like Menu Table

Menus use extreme restraint, relying on fine silver-gray row rules. No boxes around individual items.

```tsx
<div className="flex flex-col border-t border-zinc-200">
  <div className="flex justify-between py-4 border-b border-zinc-200 hover:bg-zinc-100/50 transition-colors">
    <div className="flex flex-col">
      <span className="font-sans text-base font-medium text-zinc-900">Pour Over</span>
      <span className="font-sans text-sm text-zinc-700 mt-1">Single origin, gently brewed.</span>
    </div>
    <span className="font-sans text-base font-semibold text-zinc-900">$4.50</span>
  </div>
</div>
```

---

## Component Catalog

### Navigation

```tsx
// Slim Light Navbar
<nav className="w-full bg-white border-b border-zinc-200 py-3 px-6 flex justify-between items-center">
  <span className="font-serif text-lg font-medium text-zinc-900">Café Name</span>
  <div className="flex gap-6 items-center font-sans text-sm text-zinc-700">
    <a href="#" className="hover:text-blue-600 transition-colors">Menu</a>
    <a href="#" className="hover:text-blue-600 transition-colors">Location</a>
  </div>
</nav>
```

### Buttons

```tsx
// Booking / Primary Action (Cornflower Accent)
"bg-blue-500 text-white font-sans text-sm font-medium px-5 py-2.5 hover:bg-blue-600 transition-colors"

// Secondary Action (Document Style)
"bg-white text-zinc-900 font-sans text-sm font-medium px-5 py-2.5 border border-zinc-300 hover:bg-zinc-50 transition-colors"
```

### The Practical Location Module

A sharply divided, data-dense block focusing entirely on wayfinding and operating hours.

```tsx
<div className="grid grid-cols-1 md:grid-cols-2 border border-zinc-200 bg-white">
  <div className="p-6 border-b md:border-b-0 md:border-r border-zinc-200">
    <h3 className="font-serif text-lg text-zinc-900 mb-2">Location</h3>
    <p className="font-sans text-sm text-zinc-700">123 Main Street<br/>Suite 100<br/>City, State 12345</p>
    <a href="#" className="inline-block mt-3 text-sm text-blue-600 font-medium hover:opacity-70 transition-opacity">Get Directions →</a>
  </div>
  <div className="p-6">
    <h3 className="font-serif text-lg text-zinc-900 mb-2">Hours</h3>
    <ul className="font-sans text-sm text-zinc-700 space-y-1">
      <li className="flex justify-between"><span>Mon - Fri</span> <span>7am - 4pm</span></li>
      <li className="flex justify-between"><span>Sat - Sun</span> <span>8am - 3pm</span></li>
    </ul>
  </div>
</div>
```

---

## Quality Checklist

* [ ] Is the hero copy perfectly centered with the star rating seated directly underneath the main headline?
* [ ] Does the page feature a modest, horizontally aligned image strip (frontage, menus, counters) directly below the hero content?
* [ ] Are all background colors strictly crisp whites or pale cool grays (no beige, no yellow tints)?
* [ ] Is the primary accent color strictly Cornflower Blue (`blue-500`/`blue-600`), and is it reserved only for links, buttons, and social-proof boxes?
* [ ] Are all menus and lists structured like printed documents with fine, pale silver-gray bottom borders (`border-zinc-200`)?
* [ ] Did you avoid all oversized typography? (Headings should not exceed `text-3xl`).
* [ ] Are the review stars the only element on the page utilizing Golden Yellow (`text-yellow-400`)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast graphite text (`text-zinc-900`) for dominant readability.
* Authentic, human-scale photography (frontage glass, printed menus, counter details).
* Symmetrical, steady, owner-editable layout grids.
* Simple opacity shifts and button darkening for hover states.
* Boxed structures with sharp or slightly rounded corners (`rounded-none` or `rounded-sm`) to emulate paper documents.

### ✗ Not Allowed

* Generic blue brochure layouts with massive hero background images.
* Sterile, heavily produced stock photography featuring fake customers.
* Oversized Calls-To-Action (CTAs) that scream for attention.
* Beige, cream, or warm-tinted backgrounds.
* Icons, emojis, decorative graphic stickers, or illustrations of any kind.
* Trendy gradients, heavy drop shadows, or bouncy, complex animations.
Preview