Pewter Rain Design System

/pewterRainDesignSystem
A tactile, cool-toned editorial design system for small-business and café interfaces, featuring strictly structured panels, deep blue-black typography, rich photography, and a luxury feel that avoids startup polish or decorative icons.
Oct 12, 2026
Design System Content
# Pewter Rain Café Panels & Blue-Black Fountain Pen Marks

A design language for cool, editorial, image-led small-business interfaces.

---

## Philosophy

> "Quietly expensive, strictly structured, deeply tactile."

This system builds interfaces that feel like flipping through a heavy-stock, independent café editorial. It relies on the rigid architecture of white pages and pewter-grey panels, anchored by striking blue-black typography. The aesthetic is calm, maintainable, and firmly rejects the polished, overly-slick agency look in favor of structured authenticity.

### Core Beliefs

1. **Editorial Calm** — The design must breathe. White or pale grey sections create a stoic backdrop that allows high-quality photography to dictate the mood.
2. **Image-Led Hierarchy** — Text supports the imagery, never the other way around. Content blocks must accommodate and champion rich, textural photography.
3. **Structured Restraint** — The single accent color (Fountain-Pen Navy) is treated like a master’s ink signature: used sparingly, decisively, and only for critical interactions. 
4. **Quietly Expensive** — Luxury is achieved through sharp corners, absolute alignment, visible dividers, and premium typography. Flat, architectural panels outclass rounded SaaS bubbles.
5. **Atmospheric Contrast** — The visual temperature remains distinctly cool. Warmth is introduced exclusively through imagery (dark wool coats, steel, wet pavements) rather than UI colors.

### Strict Rules

* **No Rounded SaaS Modules** — All panels, buttons, and structural elements remain resolutely flat and sharp-cornered.
* **Light Navbar Only** — Navigation must be airy, utilizing white backgrounds with sharp bottom borders.
* **No Decorative Icons** — Icons are banned unless strictly functional. Remove generic vector art; rely on typography and photography instead.
* **Modest Centered Hero** — Hero sections must be centered, tightly constrained, and modest in scale. No full-bleed aggressive typography.
* **No Gradients** — Backgrounds, buttons, and panels must be completely flat solids.
* **No Beige Warmth or Startup Blue** — The palette remains strictly cool. Standard corporate hues are forbidden.

---

## Color Palette

### Monochromatic & Accent Scale

The palette eschews standard grays for cooler, blue-tinted Pewter tones. Text is an ultra-dense Blue-Black, resembling fountain pen ink on heavy paper.

```css
/* Backgrounds (Cool & Flat) */
.w3-white                /* Main editorial canvas (#ffffff) */
.pr-bg-pale-grey         /* Secondary wide sections, light W3 panels (#f2f3f5) */
.pr-bg-pewter            /* Structured offer rows, inactive states (#d9dbde) */
.pr-bg-pewter-dark       /* Hover states for pewter panels (#c4c7cb) */

/* Structural Borders & Dividers */
.pr-border-pale          /* Ultra-subtle grid lines (#e5e7eb) */
.pr-border-pewter        /* Visible dividers, standard card borders (#d9dbde) */
.pr-border-blueblack     /* Focused input borders, structural column rules (#0d1117) */

/* Typography */
.pr-text-blueblack       /* Primary text, headings, hero text (#0d1117) */
.pr-text-slate           /* Body copy, captions, structural metadata (#4a5568) */
.pr-text-pewter          /* Disabled text, placeholder text (#a0aab2) */

/* The Signature Accent: Fountain-Pen Navy */
.pr-text-navy            /* Specific text links, critical values (#0f2a4a) */
.pr-bg-navy              /* Primary flat CTAs (#0f2a4a) */
.pr-hover-navy           /* Button hover states (#1a3b5c) */

/* Review Stars Only */
.pr-text-gold            /* Reserved strictly for review stars (#c69c6d) */
```

### Common Mistake Prevention
To avoid nautical or generic corporate aesthetics, never pair the Navy accent with bright whites and reds, and never use standard `#0000FF` blue.

---

## Typography

The typographic system pairs high-end editorial serifs with sturdy, working-class sans-serifs, creating a grounded but intellectual atmosphere.

### Font Families

```css
/* Primary Headings */
font-family: 'Newsreader', 'Tiempos', serif;
/* Body Copy & General UI */
font-family: 'Source Sans 3', 'Public Sans', 'PT Sans', sans-serif;
/* Small Headings & Labels */
font-family: 'IBM Plex Sans', sans-serif;
```

### Font Weights

```css
font-weight: 400; /* Serif headings, primary body copy - calm, unforced */
font-weight: 500; /* IBM Plex small headings, button labels - structural */
font-weight: 600; /* Subtle emphasis in body copy */
/* font-weight: 700+ is avoided to maintain editorial elegance */
```

### Font Size Scale

```css
.pr-text-caption  /* Cramped captions are forbidden; generous 13px */
.pr-text-body     /* Core narrative text, paragraph blocks (16px) */
.pr-text-lead     /* Introduction paragraphs (18px) */
.pr-text-h4       /* Small IBM Plex headings (14px, uppercase tracking) */
.pr-text-h3       /* Section serifs, structured offer titles (24px) */
.pr-text-h2       /* Editorial column titles (32px) */
.pr-text-h1       /* Modest centered hero (48px - never massive) */
```

### Hierarchy Examples

| Element | Typeface | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Modest Hero | Newsreader | h1 | 400 | blueblack | normal | none |
| Sub-headings | IBM Plex Sans | h4 | 500 | slate | wide | uppercase |
| Body Copy | Source Sans 3 | body | 400 | blueblack | normal | none |
| CTAs | IBM Plex Sans | body | 500 | white | normal | none |
| Captions | Source Sans 3 | caption | 400 | slate | normal | none |

---

## Spacing & Motion System

### Tidy 2021 Builder Cadence
Layouts rely on explicit, visible grid structures. Sections don't float into each other; they are separated by rigid gutters and precise lines.

```css
/* Medium Gutters in W3.CSS */
.w3-row-padding /* Generous but controlled horizontal spacing */
.w3-padding-48  /* Standard vertical cadence for pale grey sections */
.w3-padding-64  /* Main white page vertical cadence */
```

### Opacity Reveals & Simple Hovers
Motion is strictly utilitarian. No scaling, no bounding spring animations. Elements simply fade in or shift background tones.

```html
<!-- W3 Simple Opacity Reveal on Load -->
<div class="w3-animate-opacity">...</div>

<!-- W3 Flat Hover States -->
<button class="w3-button pr-bg-navy w3-text-white w3-hover-opacity transition-opacity duration-200">
  Reserve Table
</button>
```

---

## UI Components (W3.CSS Framework)

### The Light Navbar
Strictly white, no shadows, separated only by a precise bottom border.

```html
<div class="w3-bar w3-white w3-border-bottom pr-border-pewter w3-padding-16">
  <a href="#" class="w3-bar-item pr-text-blueblack" style="font-family: 'Newsreader', serif; font-size: 20px;">Café Meridian</a>
  <a href="#" class="w3-bar-item w3-right w3-button w3-hover-none pr-text-navy">Bookings</a>
</div>
```

### Structured Offer Rows
Architectural flat W3 panels sitting on a pale canvas, separated by medium gutters.

```html
<div class="w3-row-padding w3-padding-48 pr-bg-pale-grey">
  <div class="w3-third">
    <!-- No rounded corners, sharp W3 Panel -->
    <div class="w3-panel w3-white w3-border pr-border-pewter w3-padding-24">
      <h4 class="pr-text-slate w3-margin-bottom" style="font-family: 'IBM Plex Sans'; text-transform: uppercase; letter-spacing: 1px; font-size: 14px;">Morning Service</h4>
      <h3 class="pr-text-blueblack w3-margin-top" style="font-family: 'Newsreader';">Pour-Over & Pastry</h3>
      <p class="pr-text-slate">Single-origin filter offerings prepared on the slate counter.</p>
    </div>
  </div>
</div>
```

### Visible Dividers
Used to create a sense of mechanical precision in lists and articles.

```html
<ul class="w3-ul w3-border-top pr-border-pewter">
  <li class="w3-padding-16 w3-border-bottom pr-border-pewter">
    <span class="pr-text-blueblack">Colombian Washed</span>
    <span class="w3-right pr-text-slate">08:00 — 11:00</span>
  </li>
</ul>
```

### Image-Heavy Content Blocks
Images take precedence. Text is pushed aside or placed cleanly below, with strictly maintained, generous captions (never cramped).

```html
<div class="w3-row w3-margin-top w3-margin-bottom">
  <div class="w3-col l8 w3-padding-right">
    <!-- Photography: Wet pavements, steel milk jugs, slate counters -->
    <img src="slate-counter.jpg" class="w3-image w3-grayscale-min" alt="Slate preparation counter" style="width:100%;">
  </div>
  <div class="w3-col l4 w3-padding-large">
    <p class="pr-text-slate pr-text-caption">Fig 1. — The slate counter preparation space prior to morning service.</p>
  </div>
</div>
```

---

## Component Catalog

### Buttons
Absolutely flat. No borders on the primary button, stark outlines on the secondary.

```html
<!-- Fountain-Pen Navy CTA -->
<button class="w3-button w3-block pr-bg-navy w3-text-white w3-hover-opacity w3-padding-16" style="font-family: 'IBM Plex Sans';">
  Explore Menu
</button>

<!-- Secondary Pewter Action -->
<button class="w3-button w3-block w3-white w3-border pr-border-pewter pr-text-blueblack w3-hover-light-grey w3-padding-16">
  Read the Journal
</button>
```

### Golden Review Stars
The only permitted instance of a warm color. Used to break up the cool pewter and navy.

```html
<div class="w3-padding-small">
  <span class="pr-text-gold">★★★★★</span>
  <span class="pr-text-slate w3-margin-left pr-text-caption">The Independent</span>
</div>
```

---

## Quality Checklist

* [ ] Is the primary hero layout centered, modest, and free of massive, overwhelming display text?
* [ ] Are all corners strictly sharp (no `w3-round` classes used anywhere)?
* [ ] Are all panels either pure white or pewter/pale grey?
* [ ] Have all vector art and decorative icons been removed in favor of high-quality, moody photography?
* [ ] Do your photographs reflect the aesthetic: wet pavements, steel milk jugs, slate counters, or dark wool coats?
* [ ] Are image captions given generous padding to avoid looking cramped?
* [ ] Is the Fountain-Pen Navy used *only* for the primary CTA and specific interactive links?
* [ ] Is the interface completely devoid of shadows, overlays, and gradients?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Strict W3.CSS flat elements (`w3-panel`, `w3-button` without roundness).
* Serifs (Newsreader/Tiempos) for main structured headings.
* IBM Plex Sans for small, structural, uppercase labels.
* Solid, visible borders (`w3-border`, `w3-border-bottom`) between list items.
* Simple opacity fades for hover and load states (`w3-animate-opacity`, `w3-hover-opacity`).
* High-contrast, cool-toned imagery featuring textures like steel, slate, and wool.

### ✗ Not Allowed

* Standard "Startup Blue", beige, or warm UI backgrounds.
* Rounded edges on buttons, inputs, or content cards.
* Drop shadows, glassmorphism, or blurred backdrops.
* Large, full-bleed hero typography that yells at the user.
* Cramped text leading or tight margins near photography.
* Generic nautical styling (e.g., anchors, stripes, or combining navy with bright red).
* Emojis, line-art icons, or illustrations.
Preview