Mineral Blue Notice Board & Milkglass Folio

/mineralBlueNoticeBoardMilkglassFolio
A disciplined hybrid design system for hospitality, inspired by tactile order and legibility. It uses strict grids, humble type, modular content blocks, and a mineral-cool palette to create beautiful, editorial local interfaces.
Sep 7, 2026
Design System Content
# Mineral Blue Notice Board & Milkglass Folio

A cleaner editorial-builder hybrid design system for world-class local and hospitality interfaces.

---

## Philosophy

> "A world-class local page finds beauty through legibility, strict repetition, and humble structure."

This system rejects glossy, artificial polish. It evokes the tactile reality of physical spaces—folded napkins, printed receipts, counter service, and rain reflections on windows. It behaves like an immaculately organized notice board layered over frosted milkglass, where deep ink typography and pristine image ratios do all the heavy lifting.

### Core Beliefs

1. **Humble Content Structure** — Information should be presented plainly, relying on flawless alignment and sizing rather than decorative containers.
2. **Repeated Modules** — Consistency breeds trust. Layouts rely on rigorous, predictable grid repetitions.
3. **Excellent Image Ratios** — Photography is structural. Images dictate the grid, establishing rhythm through precise, unyielding aspect ratios.
4. **Legibility as Aesthetic** — The beauty of the interface is entirely dependent on how effortlessly the user can read and parse the information.
5. **Quiet Action** — The interface does not scream for attention. Booking actions and inline proof use a hushed, desaturated accent that guides without interrupting.

### Strict Rules

* **Sans-Serif Only** — No exceptions. Typography relies entirely on specific sans-serif pairings and variations in weight, tracking, and size.
* **No Decorative Overlays on Hero** — The opening must be image-heavy with raw, unfiltered photography. 
* **Minimal Hero Headings** — Large, boastful typography is forbidden. The hero heading is compact; the review count sits immediately below it.
* **No Icons or Avatars** — Rely purely on text labels, layout, and raw photography. Remove all vector illustrations and user profile bubbles.
* **No Beige** — Warm, muddy tones are strictly forbidden. The canvas is cool, crisp, and mineral.
* **No Glossy Restaurant Polish** — Reject generic template aesthetics, heavy drop shadows, and hyper-saturated, staged food photography.

---

## Color Palette

### The Environment Scale

The interface fluctuates between translucent milkglass whites and deep nautical inks, separated by mineral-blue structural lines. 

```css
/* Backgrounds (Canvas & Structure) */
bg-[#f7fafa]          /* Milkglass Base — the default canvas for primary content */
bg-white/70           /* Milkglass overlay for sticky headers (backdrop-blur applied) */
bg-[#092b3a]          /* Ink Navbar — ultra-deep, grounding navigation */
bg-[#031d2a]          /* Marine-Blue Alternating Section — creates pacing in long scrolls */

/* Separators & Rules */
border-[#b5c7d3]      /* Mineral-blue separators — used for fine table rules and lists */
border-[#092b3a]/10   /* Ultra-subtle dividers within milkglass sections */
border-[#f7fafa]/20   /* Fine rules used against marine-blue backgrounds */

/* Typography */
text-[#092b3a]        /* Primary ink for body copy and heavy lists */
text-[#003d65]        /* Deep Headings — rich, focused marine tones for titles */
text-[#4a6b7c]        /* Muted supporting text, metadata, tabular secondary data */
text-[#f7fafa]        /* Inverse text for ink navbars and marine-blue sections */

/* The Quiet Accent: Booking & Inline Proof */
bg-[#5fa6a3]          /* Primary booking actions, reservation buttons */
text-[#5fa6a3]        /* Inline proof strings ("3 people booked today") */
hover:bg-[#4d8f8c]    /* Subtle, grounded hover state for actions */

/* Trust Indicators */
text-[#d4af37]        /* Golden review stars — strictly for rating modules */
```

---

## Typography

Typography is exclusively sans-serif, acting as the primary tool for interface hierarchy. Fonts must be paired intelligently to create an editorial-builder feel. 

**Approved Pairings:**
1. Avenir Next (Headings) + Freight Sans (Body)
2. Humanist 521 (Headings) + IBM Plex Sans (Body)
3. Frutiger (Headings) + Gill Sans Nova (Body)

### Font Weights

Hierarchy is established through contrast in weight and tracking, never through sheer oversized scale.

```css
font-normal      /* Core body copy, list items, table data */
font-medium      /* Structural labels, booking actions, minimal hero headings */
font-semibold    /* Small inline proofing, metadata, structured list headers */
/* font-light and font-black are intentionally omitted to maintain a humble mid-tone */
```

### Font Size Scale & Tracking

```css
text-xs tracking-widest uppercase   /* Section identifiers, fine-print rules */
text-sm tracking-normal             /* Standard tabular data, metadata */
text-base tracking-tight            /* Core reading text */
text-lg tracking-tight              /* Standard module headings */
text-xl tracking-tight              /* Minimal hero headings, cinematic notice titles */
/* Anything above text-2xl is considered a generic template mistake and is forbidden */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Minimal Hero | xl | medium | #003d65 | tight | none |
| Review Count | sm | semibold | #4a6b7c | normal | none |
| Booking Button| sm | medium | #f7fafa | normal | none |
| Table Header | xs | semibold| #092b3a | widest | uppercase |
| Body Copy | base | normal | #092b3a | tight | none |

---

## Animation & Motion System

### Core Philosophy: Restrained & Grounded

Motion should mimic the physical scanning of a notice board. No bouncing, no expanding. Only restrained parallax, soft fades, and crisp underline hovers.

### Underline Hovers

Interactive text elements do not shift or change background color. They reveal a precise underline.

```css
/* Standard Text Link Hover */
"transition-all duration-200 underline decoration-transparent hover:decoration-[#5fa6a3] underline-offset-4"
```

### Cinematic Notice Fades

When scrolling into the singular cinematic full-height image section, the overlay fades in softly.

```tsx
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 0.8, ease: "easeInOut" }}
viewport={{ once: true, margin: "-100px" }}
```

### Restrained Parallax

Images inside the marine-blue alternating sections use a micro-parallax effect—moving no more than 3-5% vertically to create subtle depth without distraction.

---

## Imagery & Texture

Imagery is the soul of this system. Photography must be raw, physical, and evocative. 
*   **Approved Subjects:** Folded linen napkins, printed receipts, blurred counter service, rain reflections on glass, raw ingredients on stainless steel.
*   **Forbidden Subjects:** Smiling staff looking at the camera, highly retouched glossy food, artificial lighting setups.

---

## UI Components

### Minimal Hero Block

An image-heavy opening grid (no overlays). The heading is compact, immediately followed by the golden review count.

```tsx
<header className="grid grid-cols-1 md:grid-cols-3 gap-1 px-4 pt-24 pb-12 bg-[#f7fafa]">
  <div className="col-span-2 aspect-[4/3] bg-neutral-200 overflow-hidden">
    {/* Raw photography, no overlay */}
    <img src="/counter-service.jpg" className="w-full h-full object-cover" />
  </div>
  <div className="flex flex-col justify-end p-6">
    <h1 className="text-xl font-medium text-[#003d65] tracking-tight mb-1">
      St. John's Counter
    </h1>
    <div className="flex items-center gap-2 mb-6">
      <div className="flex text-[#d4af37] text-sm">★★★★★</div>
      <span className="text-sm font-semibold text-[#4a6b7c]">1,284 Reviews</span>
    </div>
  </div>
</header>
```

### Structured Service Tables

Tables reject generic borders and rely entirely on fine mineral-blue rules and baseline alignment.

```tsx
<div className="w-full border-t border-[#b5c7d3]">
  <div className="flex justify-between py-3 border-b border-[#b5c7d3]">
    <span className="text-sm font-normal text-[#092b3a]">Morning Service</span>
    <span className="text-sm font-normal text-[#4a6b7c]">07:00 — 11:30</span>
  </div>
  <div className="flex justify-between py-3 border-b border-[#b5c7d3]">
    <span className="text-sm font-normal text-[#092b3a]">Lunch</span>
    <span className="text-sm font-normal text-[#4a6b7c]">12:00 — 15:00</span>
  </div>
</div>
```

### Cinematic Full-Height Notice

The only place an overlay is permitted. A singular, full-height image block used to deliver high-contrast, critical information.

```tsx
<section className="relative w-full h-[80vh] flex items-center justify-center">
  <img src="/rain-reflections.jpg" className="absolute inset-0 w-full h-full object-cover" />
  <div className="absolute inset-0 bg-[#092b3a]/60 mix-blend-multiply" />
  
  <div className="relative z-10 max-w-md p-8 bg-[#f7fafa]/95 backdrop-blur-sm border border-[#b5c7d3]">
    <h2 className="text-lg font-medium text-[#003d65] mb-2 tracking-tight">Walk-ins Only</h2>
    <p className="text-sm text-[#092b3a]">
      We do not accept reservations for parties under six. Please join the queue at the counter.
    </p>
  </div>
</section>
```

### Simple Footer Columns

No massive logos or complex sitemaps. Just quiet, structured data.

```tsx
<footer className="grid grid-cols-2 md:grid-cols-4 gap-8 px-6 py-12 bg-[#092b3a] text-[#f7fafa]">
  <div>
    <h4 className="text-xs uppercase tracking-widest text-[#b5c7d3] mb-4">Location</h4>
    <p className="text-sm font-normal">142 Mineral Street<br/>North Quarter</p>
  </div>
  {/* Additional columns follow same precise structure */}
</footer>
```

### Booking Action Button

Buttons are extremely modest. No large pills, no drop shadows.

```tsx
<button className="px-5 py-2.5 bg-[#5fa6a3] hover:bg-[#4d8f8c] text-[#f7fafa] text-sm font-medium transition-colors">
  Reserve a Table
</button>
<span className="block mt-2 text-xs font-semibold text-[#5fa6a3]">
  4 bookings in the last hour
</span>
```

---

## Quality Checklist

* [ ] Is the hero heading strictly `text-xl` or smaller, avoiding generic oversized typography?
* [ ] Are the golden review stars positioned *immediately* below the hero heading?
* [ ] Are there absolutely zero vector icons or user avatars on the screen?
* [ ] Do all tables use fine, 1px mineral-blue (`border-[#b5c7d3]`) rules with generous horizontal spacing?
* [ ] Is the quiet accent (`#5fa6a3`) reserved strictly for booking actions and inline proof?
* [ ] Is there only *one* cinematic full-height image section with an overlayed notice panel?
* [ ] Are all background colors restricted to milkglass (`#f7fafa`), marine-blue (`#031d2a`), or ink (`#092b3a`)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-density, structured list tables with strict baseline alignment.
* Alternating full-width marine-blue and `#f7fafa` sections.
* Unfiltered, raw photography (napkins, receipts, architecture).
* Underline hovers on interactive text.
* Deep ink `#092b3a` navbars for high-contrast grounding.

### ✗ Not Allowed

* Over-large buttons (padding exceeding `py-3`).
* Low-contrast notice panels (must use solid or heavily blurred milkglass over dark overlays).
* Decorative gradients or gradient text.
* Generic template layouts (e.g., massive center-aligned bold hero text).
* Avatars, emojis, or line-art icons of any kind.
Preview