Harbor Brunch Editorial Design System

/harborBrunchEditorialDesignSystem
A refined, editorial design system for hospitality brands, pairing spacious layouts, coastal-inspired palettes, and cinematic imagery to evoke elegant, sunlit restaurant experiences with restrained, print-inspired typography.
Jul 25, 2026
Design System Content
# Harbor Brunch Editorial Design System

A design language for refined hospitality interfaces, blending coastal freshness with polished editorial restraint.

---

## Philosophy

> "Sunlight reveals texture; restraint defines elegance."

This system creates digital experiences that feel like stepping into a world-class, daylit coastal restaurant. The interface relies on architectural spaciousness, crisp editorial typography, and high-quality cinematic imagery. It is a masterclass in subtlety—eschewing heavy interface elements in favor of fine rules, off-white canvases, and tasteful, deliberate accents.

### Core Beliefs

1. **Hierarchy through spaciousness** — Generous gutters and off-white backdrops create a calm, luxurious reading environment.
2. **Imagery sets the table** — Cinematic, full-width photography is the anchor; the UI merely frames it. 
3. **Typography as art direction** — The interplay between crisp, structured headings and readable, airy body copy mimics high-end print magazines.
4. **The Accent is a subtle whisper** — Deep marine blue details exist to anchor actions and guide the eye without overwhelming the coastal freshness.
5. **Rhythmic pacing** — Alternating full-width visual immersion with calm, centered copy blocks provides a perfectly paced user journey.

### Strict Rules

* **No Pure Black** — All primary text and deep contrast elements must use "Dark Roast Brown" to maintain warmth.
* **No Stark White** — Backgrounds must utilize ivory or oat beige to ensure a daylit, natural aesthetic.
* **No Heavy Shadows or Gradients** — Depth is achieved through structural whitespace, large imagery, and ultra-fine rules.
* **Centered Intent** — Menu sections and calm copy blocks must be perfectly center-aligned to command elegant attention.
* **Cinematic First Impressions** — The hero section must feature left-aligned branding against world-class imagery.

---

## Color Palette

### The Coastal & Earth Scale

The palette replaces stark tech colors with organic, hospitality-driven tones. It transitions from warm ivory up through salt-grays to a deeply grounded dark roast brown, punctuated by a deep marine blue.

```css
/* Backgrounds (Warm & Natural) */
bg-ivory              /* Main canvas background, warm and daylit (#faf9f6) */
bg-oat-100            /* Secondary panels, soft section dividers (#f4f0ea) */
bg-salt-100           /* Cool subtle contrast blocks, image captions (#e8ecef) */
bg-pale-blue/30       /* Hover states, delicate active tab backdrops */
bg-marine-800         /* Primary call-to-action buttons, dark footer blocks (#002855) */

/* Borders & Rules */
border-salt-200       /* Ultra-fine dividers and elegant menu tabs */
border-oat-300        /* Subtle structural borders */
border-marine-800     /* Focused boundaries, active tab underlines */
border-roast-900      /* Heavy editorial lines when high contrast is needed */

/* The Anchor: Deep Marine Blue (Accent) */
text-marine-800       /* Tasteful details, active links, primary buttons */
bg-marine-800         /* Strong but minimal CTA backdrops */
border-marine-800     /* Fine active tab rules, elegant interaction rings */

/* Text Hierarchy (Warm Contrast) */
text-roast-900        /* Primary hero headlines, massive typography (#2b1e16) */
text-roast-800        /* Standard body copy, section introductions */
text-roast-600        /* Secondary copy, subtle image captions */
text-salt-500         /* Muted metadata, inactive menu tabs */
text-marine-700       /* Interactive text, elegant inline links */

```

### Destructive/Alert Actions

```css
hover:bg-roast-100
hover:text-roast-900
hover:border-roast-200

```

---

## Typography

A strict dual-family system. Crisp, structured sans-serifs define the editorial framework, while readable geometric sans-serifs carry the narrative.

### Font Families

```css
font-sans-heading     /* Suisse Int’l, Manrope, or Neue Haas Grotesk */
font-sans-body        /* DM Sans or Source Sans 3 */

```

### Font Weights

```css
font-light       /* Minimalist secondary titles, large airy quotes */
font-normal      /* Core body copy, intro paragraphs, nav links */
font-medium      /* Strong but minimal CTAs, elegant tabs */
font-semibold    /* Hero headlines, section titles - restricted usage */

```

### Font Size Scale & Rules

```css
text-[11px]      /* Fine print, footer copyright */
text-[13px]      /* Navigation links, elegant menu tabs (MANDATORY wide tracking) */
text-[16px]      /* Standard body copy in calm centered sections */
text-[18px]      /* Intro copy, large readable lead paragraphs */
text-[36px]      /* Mobile/Secondary section titles */
text-[44px]      /* Desktop primary section titles */
text-[50px]      /* Mobile hero headlines */
text-[58px]      /* Desktop hero headlines */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large hero headlines to maintain crispness */
tracking-normal  /* Default readable body copy */
tracking-wide    /* Navigational links (13px), elegant tabs, small caps */
tracking-widest  /* Editorial category labels above titles */

uppercase        /* Nav links, tabs, button labels, fine print */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Heading | 50-58px | semibold | roast-900 | tight |
| Section Title | Heading | 36-44px | medium | roast-900 | tight |
| Intro Copy | Body | 18px | normal | roast-800 | normal |
| Nav Links | Body | 13px | normal | marine-800 | wide (uppercase) |
| Menu Tabs | Heading | 13px | medium | salt-500 | wide (uppercase) |

---

## Animation System

### Core Philosophy: The Coastal Breeze

Animations should never feel mechanical or spring-loaded. They emulate the slow reveal of morning light—subtle, effortless fade-ins and gentle vertical glides.

### Page & Image Transitions (Subtle Fade-In)

```tsx
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }} // Slow, elegant ease-out

```

### Micro-Interactions (The Elegant Rule)

When navigating elegant menu tabs, the fine marine blue underline gracefully glides into place without bouncing.

```tsx
layoutId="activeTabRule"
transition={{ type: "tween", ease: "easeInOut", duration: 0.3 }}

```

---

## UI Components

### Centered Menu Layout

The core of the dining interface. Tabs are centered, divided by fine rules, leading into meticulously spaced menu items.

```tsx
<div className="flex flex-col items-center max-w-2xl mx-auto space-y-12">
  <nav className="flex space-x-8 border-b border-salt-200 pb-4">
    {/* Elegant Tabs */}
  </nav>
  <div className="w-full flex justify-between items-baseline border-b border-salt-200/50 pb-4">
    <h3 className="font-sans-heading text-[18px] text-roast-900">Avocado Tartine</h3>
    <span className="font-sans-body text-[13px] text-roast-600">18</span>
  </div>
</div>

```

### The Cinematic Hero

Left-aligned branding, large simple navigation across the top, resting over a full-width atmospheric background.

```tsx
<header className="relative w-full h-screen flex flex-col justify-between bg-ivory">
  <div className="absolute inset-0 bg-hero-image bg-cover bg-center" />
  <div className="absolute inset-0 bg-roast-900/10" /> {/* Extremely light scrim */}
  
  <nav className="relative z-10 w-full flex justify-between items-center px-12 py-8">
    <div className="text-marine-800 font-sans-heading font-semibold text-[24px]">BrandLogo</div>
    <div className="flex space-x-8 text-[13px] uppercase tracking-wide text-roast-900">
      <a href="#" className="hover:text-marine-800 transition-colors">Menus</a>
      <a href="#" className="hover:text-marine-800 transition-colors">Residences</a>
    </div>
  </nav>

  <div className="relative z-10 px-12 pb-24 max-w-3xl">
    <h1 className="font-sans-heading text-[50px] md:text-[58px] tracking-tight text-ivory leading-tight">
      Coastal freshness meets editorial restraint.
    </h1>
    <button className="mt-8 bg-marine-800 text-ivory uppercase tracking-wide text-[13px] px-8 py-4 hover:bg-marine-700 transition-colors">
      Reserve a Table
    </button>
  </div>
</header>

```

---

## Component Catalog

### Blocks & Containers

Off-white backgrounds with spacious gutters designed to give typography room to breathe.

```tsx
// Calm Centered Copy Section
"w-full bg-ivory py-32 px-6 flex flex-col items-center text-center space-y-6"

// Full-Width Food Imagery Container
"w-full h-[70vh] relative overflow-hidden"

```

### Buttons

```tsx
// Strong but Minimal CTA (Primary)
"bg-marine-800 text-ivory font-sans-heading font-medium text-[13px] uppercase tracking-wide px-10 py-4 hover:bg-roast-900 transition-colors duration-300"

// Secondary Outline CTA
"border border-marine-800 text-marine-800 font-sans-heading font-medium text-[13px] uppercase tracking-wide px-10 py-4 hover:bg-pale-blue/20 transition-colors duration-300"

```

### Navigation & Tabs

```tsx
// Elegant Menu Tab (Inactive)
"font-sans-heading text-[13px] uppercase tracking-wide text-salt-500 hover:text-roast-900 transition-colors pb-2"

// Elegant Menu Tab (Active - with rule)
"font-sans-heading text-[13px] uppercase tracking-wide text-marine-800 border-b border-marine-800 pb-2"

```

### Alternating Editorial Grids

```tsx
// Image Left, Text Right Layout
<section className="grid grid-cols-1 md:grid-cols-2 gap-0 w-full bg-oat-100">
  <div className="w-full h-full min-h-[500px] bg-food-image bg-cover bg-center" />
  <div className="flex flex-col justify-center px-12 md:px-24 py-24 space-y-8">
    <h2 className="font-sans-heading text-[36px] md:text-[44px] tracking-tight text-roast-900">
      Morning Catch
    </h2>
    <p className="font-sans-body text-[18px] text-roast-800 leading-relaxed">
      Locally sourced provisions bathed in morning light.
    </p>
  </div>
</section>

```

---

## Quality Checklist

* [ ] Is the primary hero headline strictly between 50px and 58px?
* [ ] Are all navigational links set to exactly 13px, uppercase, with wide letter tracking?
* [ ] Did you use "Dark Roast Brown" instead of pure black for primary typography?
* [ ] Is the background strictly off-white (Ivory or Oat Beige) to maintain a natural daylight feel?
* [ ] Do elegant tabs and menu items utilize ultra-fine rules (`border-salt-200`)?
* [ ] Does the page rhythm successfully alternate between full-width imagery and centered, calm copy?
* [ ] Are the fade-in animations slow, deliberate, and smooth, avoiding any bouncy spring physics?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Ivory, salt-gray, and oat beige backgrounds for calm, spacious framing.
* Deep marine blue used exclusively for tasteful details and minimal, strong CTAs.
* Massive, generous gutters and centered alignment for menu and copy blocks.
* Left-aligned branding paired with cinematic, full-width hero imagery.
* Ultra-fine rules (1px or lighter) for dividing content.

### ✗ Not Allowed

* Pure blacks (`#000000`) or stark whites (`#ffffff`).
* Box shadows, drop shadows, or heavy elevation effects.
* Bouncy, fast, or heavily eased spring animations.
* Cluttered or multi-column dense data views.
* Any accent color outside of the designated marine blue and roast brown palette.
Preview