Rainlit Harbour Tile & Cyan Notice Grid

/rainlitHarbourTileCyanNoticeGrid
A tactile, cinematic design system emphasizing authentic local photography, disciplined grids, and cool, utilitarian interface elements—eschewing polish, icons, and artificial warmth for world-class realism and clarity.
Sep 7, 2026
Design System Content
# Rainlit Harbour Tile & Cyan Notice Grid

A cool, photographic design system built for world-class local interfaces that demand tactile realism over glossy artifice. 

---

## Philosophy

> "A world-class local page feels designed without feeling glossy; the grid must make reality effortless."

This system is built around the raw, atmospheric beauty of actual business operations—rain-streaked windows, physical receipts, reflective counters, and stainless trays. It refuses artificial warmth and overly polished vectors. Instead, it relies on strict asymmetrical discipline, cool temperatures, and typographic rigor to elevate authentic photography.

### Core Beliefs

1. **Reality over Polish** — We reject AI-generated perfection and corporate vectors. Imagery focuses on the physical textures of commerce: frontage glass, trays, and receipts. 
2. **Cool & Atmospheric** — The color temperature strictly avoids beige or artificial warmth, relying instead on frost-whites, icy panels, and graphite text.
3. **The Grid is Absolute** — An asymmetrical but intensely disciplined image grid ensures that adding new photos and text feels effortless and looks intentional.
4. **Cinematic Anchors** — A single full-screen background image grounds the experience, overlaid with a quiet, simple notice panel.
5. **Utilitarian Elegance** — Icons and stickers are rejected. We rely purely on immaculate typography, fine blue-gray hairlines, and structural spacing.

### Strict Rules

* **Sans-Serif Only** — Absolutely no serif typefaces. Typography must be functional, modernist, and highly legible.
* **Narrow Dark Nav** — The navigation bar must remain compact, dark, and harbor-toned. 
* **Quiet Hero Heading** — Main headings are deliberately understated to let the rainlit photography command the visual hierarchy.
* **Alternating Panels** — Information sections strictly alternate between pure white and `#e8f2f2` for rhythm and separation without heavy borders.
* **No Motion Distractions** — Opacity fades only. No sliding, springing, or blurring.

---

## Color Palette

### The Environment & Accent

The palette is derived from a moody, coastal commercial environment. Backgrounds oscillate between frost-white and ice-cyan, text is a deep graphite-blue, and a single sharp-but-muted cyan slices through for necessary actions. Golden yellow is strictly reserved for review stars.

```css
/* Backgrounds & Canvas */
bg-white              /* Frost-white primary content fields (#ffffff) */
bg-[#e8f2f2]          /* Alternating information panel background (Ice Cyan) */
bg-slate-900          /* Dark harbour navbar background */
bg-slate-800/80       /* Cinematic full-screen image overlay tint */

/* Borders & Dividers */
border-slate-300      /* Blue-gray hairlines for table-like lists */
border-slate-200      /* Subtle panel boundaries and image tile borders */

/* Typography */
text-slate-800        /* Primary graphite-blue text, body copy */
text-slate-600        /* Secondary metadata, compact proof rows */
text-slate-400        /* Disabled states, fine print */
text-white            /* Inverse text for dark harbour navbar & overlay notices */

/* The Sharp-but-Muted Accent: Cyan Notice */
text-[#24738f]        /* Primary text links, active navigation hooks */
bg-[#24738f]          /* Action buttons, active UI highlights */
border-[#24738f]      /* Form focus rings, crucial boundaries */

/* Golden Review Stars (Strictly for Ratings) */
text-amber-400        /* Review star filled states */
```

---

## Typography

Typography prioritizes mild compression and quiet authority. Serifs are entirely forbidden. We employ specific humanist and geometric sans-serif pairings to create a highly legible, utilitarian feel.

### Approved Font Pairings
1. **Primary Stack:** FF Meta (Headers) with Myriad Pro (Body)
2. **Alternative Stack A:** Humanist 521 (Headers) with Source Sans 3 (Body)
3. **Alternative Stack B:** Frutiger (Headers) with Avenir Next (Body)

### Font Weights

```css
font-normal      /* Core body copy, quiet hero headings, general UI text */
font-medium      /* Structural labels, navbar links, table headers */
font-semibold    /* Accented data points, button labels */
/* font-light and font-black are generally avoided to maintain a steady, unforced utilitarian weight */
```

### Font Size Scale & Spacing

Spacing relies on mild compression and visible alignment—elements should feel neatly packed but perfectly aligned along consistent gutters.

```css
text-xs tracking-tight    /* Fine print, compact proof rows */
text-sm tracking-tight    /* Standard table-like lists, panel descriptions */
text-base tracking-normal /* Primary body copy within alternating panels */
text-lg tracking-normal   /* Secondary section identifiers */
text-xl tracking-tight    /* Quiet hero headings, overlay notice titles */
text-2xl tracking-tight   /* Cinematic overlay numbers, highest level data */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Quiet Hero Heading | xl | normal | slate-800 | tight | none |
| Harbour Nav Links | sm | medium | white | normal | none |
| Table-List Items | sm | normal | slate-800 | tight | none |
| Proof Row Metrics | xs | normal | slate-600 | tight | uppercase |
| Overlay Notice | lg | normal | white | normal | none |

---

## Animation System

### Core Philosophy: Utilitarian State Changes

Motion must never distract from the photography or the data. There are no spatial translations, springs, or blurs. Elements either exist or they do not.

### Standard Transitions (Opacity Only)

```tsx
// React Framer Motion Example
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2, ease: "linear" }}

// Tailwind CSS Example
"transition-opacity duration-200 ease-linear hover:opacity-80"
```

---

## Layout & Imagery System

### The Cinematic Background & Notice Overlay

Every page is anchored by a single, full-screen background image of a physical location, heavily darkened to support a simple notice.

```tsx
<div className="relative w-full h-screen bg-slate-900">
  <img src="rainlit-frontage.jpg" className="absolute inset-0 w-full h-full object-cover opacity-40" />
  <div className="absolute inset-0 flex items-center justify-center">
    <div className="bg-white/10 backdrop-blur-none border border-white/20 p-8 text-white max-w-md">
      <h1 className="text-xl tracking-tight mb-2">Notice of Operation</h1>
      <p className="text-sm">Standard utilitarian overlay notice.</p>
    </div>
  </div>
</div>
```

### Asymmetrical Disciplined Image Grid

Images are deployed in masonry-like formats, but heavily disciplined by strict horizontal and vertical gutters. Crops must be intentional, showcasing reflective surfaces, trays, and receipts.

```tsx
<div className="grid grid-cols-12 gap-1 md:gap-2 bg-slate-200">
  <div className="col-span-8 aspect-video bg-slate-100 overflow-hidden">
    <img src="tray-receipt.jpg" className="w-full h-full object-cover" />
  </div>
  <div className="col-span-4 aspect-square bg-slate-100 overflow-hidden">
    <img src="rainlit-glass.jpg" className="w-full h-full object-cover" />
  </div>
</div>
```

---

## Component Catalog

### Navigation

```tsx
// Narrow Dark Harbour Navbar
"w-full h-12 bg-slate-900 text-white flex items-center px-6 border-b border-slate-800"
```

### Information Panels

```tsx
// Alternating Ice Panel
"w-full px-6 py-12 bg-[#e8f2f2] text-slate-800"

// Frost-White Panel
"w-full px-6 py-12 bg-white text-slate-800"
```

### Table-Like Lists

Information must be structured meticulously, resembling spreadsheets with fine, blue-gray hairlines.

```tsx
// List Container
"w-full border-t border-slate-300"

// List Row
"flex justify-between items-center py-3 border-b border-slate-300 text-sm tracking-tight text-slate-800 hover:bg-[#e8f2f2] transition-opacity"
```

### Compact Proof Row

A densely packed row used to establish trust and physical footprint (e.g., location coordinates, operating licenses).

```tsx
"flex items-center gap-4 py-2 text-xs text-slate-600 uppercase tracking-tight border-y border-slate-200"
```

### Interactive Elements

```tsx
// Primary Sharp Cyan Button
"bg-[#24738f] text-white font-medium text-sm px-5 py-2.5 hover:opacity-90 transition-opacity rounded-none"

// Golden Review Stars Display
"flex items-center gap-1 text-amber-400 text-sm"
```

---

## Quality Checklist

* [ ] Are the main headings quiet (`text-xl` or `text-2xl`, normal weight) instead of loud and heavy?
* [ ] Do the layout backgrounds alternate strictly between pure white and `#e8f2f2`?
* [ ] Is the navigation narrow, dark, and harbor-toned (`bg-slate-900`)?
* [ ] Have all icons and illustrative stickers been completely stripped from the interface?
* [ ] Does the image grid maintain strict, visible alignment with deliberate, un-messy gutters?
* [ ] Is all animation restricted entirely to opacity fading?
* [ ] Do the photographs feature authentic local textures (glass, receipts, steel trays, rain) without AI polish?

---

## Allowed vs Not Allowed

### ✓ Allowed
* Strict sans-serif font pairings (e.g., FF Meta / Myriad Pro).
* Cool, unembellished grays and sharp `#24738f` cyan.
* Table-like list layouts with hairline dividers (`border-slate-300`).
* Asymmetrical grid layouts that lock tightly into a disciplined framing.
* Golden stars specifically for review/rating utility.
* Opacity-based hover states and transitions.

### ✗ Not Allowed
* Warm grays, beige, or any color temperatures that suggest artificial warmth.
* Over-designed, chaotic masonry layouts with irregular spacing.
* Emojis, stickers, or vector iconography.
* AI-generated imagery or overly polished corporate lifestyle photos.
* Drop shadows, blurs, or spatial animations (slides, springs).
* Corporate-blue sterility (`#0000FF`, `#1E90FF`).
* Serif fonts or bold/black font weights for main headings.
Preview