Blue-Pewter Window Counter Sheet

/bluepewterWindowCounterSheet
A disciplined design system for practical, grounded interfaces inspired by high-functioning local institutions—featuring structured layouts, restrained teal accents, editorial sans typography, and atmospheric photography to establish trust and clarity.
Sep 6, 2026
Design System Content
# Blue-Pewter Window Counter Sheet Design System

A design language for world-class, practical local-business interfaces.

---

## Philosophy

> "Discipline elevates the practical into the world-class."

This system creates interfaces that feel like a high-functioning, established local institution. It rejects artificial luxury in favor of disciplined ratios, practical content delivery, and exceptional typographic structure. The result is a cool, photographic template system that feels authoritative, grounded, and inherently trustworthy.

### Core Beliefs

1. **Practicality over luxury** — A local-business page achieves a world-class feel through excellent sans typography and disciplined structure rather than decorative luxury styling.
2. **Atmosphere through photography** — Wide, atmospheric imagery of tangible reality—printed menus, table service, and glass reflections—grounds the digital experience in physical space.
3. **Structured pacing** — Space is used efficiently. Repeatable modules and modest gutters create rhythm. We refuse empty, floating showroom spacing.
4. **Document-driven utility** — Content is delivered in highly readable, document-style rows. Information is practical, direct, and clearly delineated.
5. **Restrained emphasis** — The singular accent color is applied with extreme restraint, used only for critical links, primary buttons, and vital table emphasis.

### Strict Rules

* **Navbar Structure** — The navigation bar must be dark, plain, and strictly utilitarian.
* **Hero Architecture** — The hero must contain a single-line heading accompanied by a wide atmospheric image.
* **Immediate Proof** — Review proof (golden yellow stars and metrics) must sit immediately below the hero image.
* **Alternating Rhythm** — Feature sections must alternate strictly between milk-white and muted blue.
* **Full-Bleed Notice** — The layout must include exactly one full-bleed image notice panel.
* **Opacity Motion Only** — Interactions and transitions are restricted entirely to opacity fades. No scaling, sliding, or spring animations.

---

## Color Palette

### Base & Structural Scale

The palette replaces corporate sterility with cool, grounded tones. Backgrounds alternate between milk-white and muted blue, divided by cool blue-pewter lines. Text is a highly legible slate-navy.

```css
/* Backgrounds */
bg-white                /* Primary canvas: Milk-white */
bg-slate-50             /* Alternating feature sections: Muted cool blue/white */
bg-slate-100            /* Secondary modules and document row hovers */
bg-slate-900            /* Deep harbour navbar and footer block */

/* Borders & Dividers */
border-slate-200        /* Subtle document-row separators */
border-slate-300        /* Primary blue-pewter dividers */
border-slate-400        /* Stronger structural delineations */

/* Typography */
text-slate-900          /* Primary headings, heavy slate-navy text */
text-slate-700          /* Core body copy, document row details */
text-slate-500          /* Secondary metadata, timestamp details */
text-white              /* Inverse text on deep harbour navbar and accent buttons */

/* Trust Indicators */
text-yellow-400         /* Golden yellow stars for immediate review proof */
fill-yellow-400         /* SVG fill for star iconography */
```

### The Restrained Accent

The accent is a highly specific, controlled teal-blue (`#24738f`). It is never used for backgrounds or large decorative blocks.

```css
/* Restrained Accent: #24738f */
text-[#24738f]          /* Inline links, table emphasis, interactive text */
bg-[#24738f]            /* Primary action buttons only */
border-[#24738f]        /* Input focus rings, selected state borders */
hover:bg-[#1d5c72]      /* Button hover state (darkened accent) */
```

---

## Typography

Typography relies on exceptional sans-serif combinations rather than delicate luxury serifs. The pairings must feel solid, editorial, and highly legible. 

**Approved Pairings:** 
* Myriad Pro (Headings) + FF Meta (Body)
* Frutiger (Headings) + Source Sans 3 (Body)
* Gill Sans Nova (Headings) + Benton Sans (Body)

### Font Weights

```css
font-normal      /* Core body copy, document row descriptions */
font-medium      /* Button labels, table headers, secondary navigation */
font-semibold    /* Single-line hero headings, section titles, review metrics */
/* font-light and font-black are excluded to maintain structural practicality */
```

### Font Size Scale & Leading

Generous leading is mandatory for body copy to offset the modest layout gutters and dense practical content.

```css
text-sm leading-normal     /* Utility metadata, fine print (14px) */
text-base leading-relaxed  /* Standard document body copy (16px) */
text-lg leading-relaxed    /* Large body copy, introductory paragraphs (18px) */
text-xl leading-snug       /* Section subheadings, feature callouts (20px) */
text-[42px] leading-tight  /* Standard section headings */
text-[56px] leading-tight  /* Single-line hero heading */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Leading |
| --- | --- | --- | --- | --- |
| Hero Heading | 56px | semibold | slate-900 | tight |
| Section Title | 42px | semibold | slate-900 | tight |
| Body Text | 18px | normal | slate-700 | relaxed |
| Menu Row Item | 16px | medium | slate-900 | relaxed |
| Table Emphasis| 16px | medium | [#24738f]| relaxed |

---

## Animation System

### Core Philosophy: Strict Opacity

Motion is utilitarian. Elements do not bounce, scale, or slide. They appear and disappear through simple, measured opacity fades to emulate the static reliability of printed media.

### Page & State Transitions

```tsx
// Exclusively Opacity Fades
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2, ease: "linear" }}
```

### Micro-Interactions

Hover states rely purely on color transitions and opacity shifts.

```tsx
// Button Hover
className="transition-colors duration-200 ease-in-out"

// Image Loading
className="transition-opacity duration-500 ease-in opacity-0 data-[loaded=true]:opacity-100"
```

---

## Structural Layouts

### The Deep Harbour Navbar

A dark, plain, strictly utilitarian structural anchor at the top of the viewport.

```tsx
<nav className="w-full bg-slate-900 text-white px-6 py-4 flex items-center justify-between">
  <div className="text-lg font-semibold tracking-wide">BUSINESS NAME</div>
  <div className="flex gap-6 text-sm font-medium opacity-90">
    <a href="#" className="hover:opacity-100 transition-opacity">Menu</a>
    <a href="#" className="hover:opacity-100 transition-opacity">Location</a>
  </div>
</nav>
```

### Alternating Feature Sections

Modest gutters and repeatable modules without empty showroom spacing.

```tsx
<section className="w-full bg-white py-12 px-6 border-b border-slate-300">
  {/* Content */}
</section>
<section className="w-full bg-slate-50 py-12 px-6 border-b border-slate-300">
  {/* Content */}
</section>
```

### Full-Bleed Notice Panel

Exactly one per page. Wide atmospheric image acting as a breaker.

```tsx
<div className="w-full h-80 relative bg-slate-900">
  <img 
    src="/atmospheric-table-service.jpg" 
    alt="Table service" 
    className="w-full h-full object-cover opacity-60 mix-blend-overlay"
  />
  <div className="absolute inset-0 flex items-center justify-center">
    <h2 className="text-[42px] text-white font-semibold">Reservations Available</h2>
  </div>
</div>
```

---

## Component Catalog

### Immediate Review Proof

Must sit strictly below the wide atmospheric hero image.

```tsx
<div className="flex items-center gap-3 py-4 border-b border-slate-300">
  <div className="flex gap-1 text-yellow-400">
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
    <StarIcon className="w-5 h-5 fill-current" />
  </div>
  <span className="text-base text-slate-700 font-medium">4.9 / 5 based on 342 local reviews</span>
</div>
```

### Document-Style Menu Rows

Replacing bento grids and heavy cards. Pure, practical data alignment using blue-pewter dividers.

```tsx
<div className="flex justify-between items-baseline py-4 border-b border-slate-300 hover:bg-slate-50 transition-colors">
  <div className="flex-1 pr-6">
    <h4 className="text-lg font-medium text-slate-900">House Roasted Coffee</h4>
    <p className="text-base text-slate-700 leading-relaxed mt-1">Ethically sourced, medium roast with notes of cocoa and hazelnut.</p>
  </div>
  <div className="text-lg font-semibold text-[#24738f] whitespace-nowrap">
    $4.50
  </div>
</div>
```

### Buttons & Links

```tsx
// Primary Action Button (Restrained Accent)
"bg-[#24738f] text-white font-medium text-base rounded px-6 py-3 hover:bg-[#1d5c72] transition-colors"

// Standard Inline Link
"text-[#24738f] hover:opacity-80 transition-opacity underline decoration-slate-300 underline-offset-4"
```

---

## Quality Checklist

* [ ] Is the navbar a dark, plain, unembellished "deep harbour" (`bg-slate-900`)?
* [ ] Does the hero section feature a strictly single-line heading?
* [ ] Is the immediate review proof (golden yellow stars) positioned right below the hero imagery?
* [ ] Do the layout sections alternate perfectly between milk-white and muted blue?
* [ ] Is the layout populated by document-style list rows rather than scattered icon grids or heavy cards?
* [ ] Are all transition animations strictly opacity fades (`opacity-0` to `opacity-100`)?
* [ ] Does the imagery focus strictly on atmospheric reality (printed menus, table service, glass reflections)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, atmospheric photography of physical spaces (glass reflections, printed materials, table service).
* Document-style typographic rows with generous leading.
* Blue-pewter lines (`border-slate-300`) to separate practical content.
* Strict alternating section backgrounds.
* Modest, disciplined spacing (e.g., `py-12`, `gap-6`).

### ✗ Not Allowed

* SaaS gradients, colored glows, or mesh backgrounds.
* Icon grids or illustrated stickers.
* Beige, cream, or warm background tints.
* Corporate blue sterility (e.g., bright system blues or standard `#007aff`).
* Cramped rows with insufficient line height.
* Glossy, sterile stock photography.
* Empty "showroom" spacing (excessive white space that disrupts practical reading).
* Spring, scale, or slide animations.
Preview