Blueglass Harbour Notice Folio

/blueglassHarbourNoticeFolio
A publication-inspired design system for calm, authentic, and highly structured local business interfaces—anchored in photographic realism, crisp harbour tones, and literary clarity, with precise accenting and rigorously documented visual rules.
Sep 6, 2026
Design System Content
# Blueglass Harbour Notice Folio

A design language for structured, calm, and publication-refined local business interfaces.

---

## Philosophy

> "A well-maintained space speaks for itself; structural calm invites trust."

This system creates interfaces that feel like a highly curated, maintained local-business establishment refined by a master publication designer. The aesthetic is anchored in photographic realism and structured, document-style clarity. It completely rejects the sterile corporate aesthetic, operating instead with crisp harbour tones, soft separations, and exact, methodical accents.

### Core Beliefs

1. **Photographic anchoring** — Imagery (frontage glass, table settings, printed menus, rain reflections) provides the atmospheric weight. 
2. **Literary precision** — The hero is quiet. A single, perfectly typeset literary heading does the work of ten visual gimmicks.
3. **Modest, steady rhythm** — Space is utilized efficiently. There are steady gutters and modest vertical rhythms. We completely reject excessive "luxury emptiness."
4. **Document-style utility** — Data and menu rows are structured like a beautifully printed folio. Crisp dividers structure the information effortlessly.
5. **The exact accent** — Sky-cyan is used with absolute surgical precision for interactive highlights, while golden stars serve purely for reputation and review validation.

### Strict Rules

* **No Icons** — UI comprehension is achieved through clear, document-style typography and purposeful layout, never through symbolic iconography.
* **No SaaS Gradients or Beige Warmth** — Backgrounds strictly alternate between crisp white and harbour-blue. No warm or muddy tones are permitted.
* **Mandatory Architecture** — Every page must include: a simple dark navbar, a wide image-led opening, a centered review-count band, and alternating section backgrounds.
* **The Notice Panel** — Every layout requires exactly one full-width/full-height photographic panel with overlayed notice copy.
* **Slow, Invisible Motion** — Animation is restricted exclusively to slow opacity fades. No scaling, no springs, no spectacle.

---

## Color Palette

### Harbour, Slate & Exact Accents

The palette relies on blueglass-white surfaces, deep harbour tones, and charcoal-slate typography. Dividers are rigidly defined by a soft specific hex, and accents are highly restricted.

```css
/* Background Surfaces */
bg-slate-50           /* Blueglass-white primary surfaces */
bg-white              /* Pure white document-style containers */
bg-slate-800          /* Harbour-blue alternating sections */
bg-slate-950          /* Ink-harbour mandatory dark navbar */
bg-black/40           /* Notice panel photographic overlays */

/* Structural Dividers */
border-[#d9dcd6]      /* The mandatory soft divider for all document rows */
border-slate-700      /* Dividers used exclusively on Harbour-blue sections */

/* Typography (Charcoal-Slate & Harbour) */
text-slate-900        /* Charcoal-slate primary headings */
text-slate-700        /* Standard body typography, menu descriptions */
text-slate-500        /* Subtle metadata, proof snippets */
text-slate-50         /* Text on Harbour-blue and Notice panels */
text-slate-300        /* Muted text on dark panels */

/* Exact Accents */
text-cyan-500         /* Sky-cyan: buttons, table highlights, proof snippets */
bg-cyan-500           /* Sky-cyan: primary action backgrounds */
border-cyan-500       /* Sky-cyan: precise active-state borders */
text-amber-400        /* Golden stars: exclusively for review/reputation bands */
fill-amber-400        /* Golden stars: SVG fill for reputation */
```

---

## Typography

The typographic system pairs elegant, literary serifs with highly legible, utilitarian sans-serifs. It mimics a finely printed folio or local publication.

### Font Families

```css
font-serif       /* Libre Baskerville, Zodiak Text, or Georgia. Used for literary headings. */
font-sans        /* Myriad Pro, Gill Sans Nova, or IBM Plex Sans. Used for document/menu rows. */
```

### Font Weights

```css
font-normal      /* Core body copy, menu row items, standard data */
font-medium      /* Navbar links, buttons, active document filters */
font-semibold    /* Subtle bolding for pricing, review counts, or sub-headers */
/* Extreme weights (ultra-light or ultra-black) are strictly forbidden */
```

### Font Size Scale & Rhythm

```css
text-xs          /* Proof snippets, localized metadata (12px) */
text-sm          /* Standard document-style menu rows, table data (14px) */
text-base        /* Core body paragraphs, standard button labels (16px) */
text-lg          /* Review count bands, intro paragraphs (18px) */
text-xl          /* Sub-section headings, Notice panel titles (20px) */
text-3xl         /* The quiet literary hero heading (30px) - Maximum size permitted */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Spacing |
| --- | --- | --- | --- | --- | --- |
| Quiet Hero Heading | Serif | 3xl | normal | text-slate-900 | normal |
| Menu Row Item | Sans | sm | medium | text-slate-900 | normal |
| Menu Description | Sans | sm | normal | text-slate-700 | normal |
| Review Count Band | Sans | lg | semibold| text-slate-900 | normal |
| Proof Snippet | Sans | xs | normal | text-cyan-500 | normal |
| Navbar Links | Sans | sm | medium | text-slate-300 | normal |

---

## Animation System

### Core Philosophy: Slow Fades

Spectacle is banned. Motion is used purely to soften transitions and prevent jarring cuts, behaving like a slow-exposure photograph.

### Transitions & States

```tsx
/* Page & Image Load (Framer Motion) */
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: "easeInOut" }}

/* Hover States (Tailwind) */
className="transition-opacity duration-500 ease-in-out hover:opacity-70"
```

---

## UI Components

### Mandatory Architecture Elements

Every page must contain these structural foundations, applied with modest padding (`py-12` or `py-16`, never `py-32`).

```tsx
// Ink-Harbour Navbar
<nav className="w-full bg-slate-950 text-slate-50 px-6 py-4 flex justify-between items-center">
  <span className="font-serif text-lg">Folio.</span>
  {/* Document-style links */}
</nav>

// Quiet Hero (Wide Image-Led)
<header className="w-full bg-slate-50 px-6 pt-12 pb-8">
  <h1 className="font-serif text-3xl text-slate-900 max-w-2xl mb-8">
    One literary heading goes here.
  </h1>
  <img src="/frontage-glass.jpg" className="w-full h-auto object-cover grayscale-[20%]" />
</header>
```

### Document-Style Menu Rows

Crisp, highly structured tabular rows separated strictly by the `#d9dcd6` divider. Refuses cramped padding; demands steady gutters.

```tsx
<div className="flex justify-between items-baseline py-4 border-b border-[#d9dcd6]">
  <div className="flex flex-col gap-1">
    <span className="font-sans font-medium text-sm text-slate-900">Autumn Table Setting</span>
    <span className="font-sans font-normal text-sm text-slate-700">Detailed description of the service or item.</span>
  </div>
  <span className="font-sans font-semibold text-sm text-slate-900">$45</span>
</div>
```

### Review-Count Band

A centered structural band that relies on golden stars and charcoal-slate typography to establish trust.

```tsx
<div className="w-full bg-white py-8 border-y border-[#d9dcd6] flex flex-col items-center justify-center gap-3">
  <div className="flex gap-1 text-amber-400">
    {/* 5x SVG Stars */}
  </div>
  <span className="font-sans text-lg font-semibold text-slate-900">
    Trusted by 1,240 local patrons
  </span>
</div>
```

### The Photographic Notice Panel

A full-width, full-height image panel with a dark overlay, used exclusively once per layout.

```tsx
<section className="relative w-full min-h-[80vh] flex items-center justify-center px-6">
  <img src="/rain-reflections.jpg" className="absolute inset-0 w-full h-full object-cover" />
  <div className="absolute inset-0 bg-black/40" />
  <div className="relative z-10 max-w-xl text-center flex flex-col gap-6">
    <h2 className="font-serif text-xl text-slate-50">Evening Notice</h2>
    <p className="font-sans text-base text-slate-300">
      Overlayed notice copy structured cleanly against the photographic background.
    </p>
  </div>
</section>
```

### Component Catalog

```tsx
// Sky-Cyan Precise Button
"bg-cyan-500 text-white font-sans font-medium text-sm px-6 py-2.5 rounded-none hover:opacity-80 transition-opacity duration-500"

// Sky-Cyan Proof Snippet
"font-sans text-xs text-cyan-500 bg-cyan-500/10 px-2 py-1 uppercase tracking-wide"

// Table Highlight (Hover Row)
"hover:bg-slate-50 transition-colors duration-500 border-b border-[#d9dcd6] border-l-2 border-transparent hover:border-l-cyan-500"
```

---

## Imagery Guidelines

Photography is the lifeblood of this aesthetic. It must feel authentic, atmospheric, and distinctly local.

* **Required Subjects:** Frontage glass, empty but maintained table settings, printed paper menus, rain reflections on pavement.
* **Banned Subjects:** Corporate handshakes, brightly lit vector illustrations, over-polished stock-photo perfection.
* **Treatment:** Slightly desaturated, deep contrast, natural lighting.

---

## Quality Checklist

* [ ] Does the navbar strictly use the Ink-harbour (`bg-slate-950`) color?
* [ ] Is there only *one* quiet, serif literary heading in the hero, capping out at `text-3xl`?
* [ ] Are all dividers strictly mapped to `#d9dcd6` (except on dark sections)?
* [ ] Did you avoid all icons in the layout, opting instead for structural typography?
* [ ] Is the spacing constrained to a modest vertical rhythm (e.g., `py-12`), avoiding luxury emptiness (`py-32`) and cramped tables (`py-1`)?
* [ ] Does the page feature exactly one full-height Notice Panel with a photographic background?
* [ ] Are the golden stars (`text-amber-400`) isolated entirely to the centered review band?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Alternating Harbour-blue (`bg-slate-800`) and blueglass-white (`bg-slate-50`) sections.
* Specific, sharp use of Sky-cyan for actionable buttons and proof snippets.
* Photographic authenticity (rain reflections, frontage glass).
* Slow opacity fades (`duration-500` or `duration-700`).
* Serif and Sans-serif pairings mirroring a printed folio.

### ✗ Not Allowed

* SaaS gradients, glows, or colorful drop shadows.
* Beige, warm-gray, or brown surfaces of any kind.
* Icons (FontAwesome, Heroicons, etc. are completely banned).
* Sterile, saturated corporate blue (`#0055ff` style).
* Spring physics, translations, scaling, or "bouncy" interactions.
* Cramped data tables or excessive whitespace ("luxury emptiness").
Preview