Sunlit Brunch Editorial

/sunlitBrunchEditorial
A tactile, magazine-inspired design system for hospitality—pure daylight palettes, magazine-quality photography, lush whitespace, and editorial sans-serif typography, crafting warm, elegant, and image-led digital experiences.
Jul 25, 2026
Design System Content
# Sunlit Brunch Editorial Design System

A design language for bright, image-led hospitality interfaces.

---

## Philosophy

> "Daylight dictates the mood; typography sets the table."

This system creates interfaces that feel like a high-end culinary magazine—warm, inviting, and effortlessly elegant. The design should feel tactile and organic, relying on breathtaking food photography, generous whitespace, and meticulous typographic hierarchy rather than artificial containers or rigid UI cards.

### Core Beliefs

1. **Photography is the anchor** — Magazine-quality, full-bleed images dictate the flow. The interface exists merely to frame and support the photography.
2. **Warmth over sterility** — True whites and pure blacks are banished. Everything is bathed in a natural, day-time warmth using cream, ivory, and espresso tones.
3. **Pacing through whitespace** — A hospitality experience is unhurried. Generous, almost lavish padding and margins create a feeling of luxury and relaxation.
4. **Editorial rhythm** — Layouts mimic high-end print design, utilizing alternating full-width image bands and unconfined off-white text blocks.
5. **Restrained wayfinding** — Navigation is large, clear, and confident, but dividers and borders are kept to absolute, whisper-thin minimums.

### Strict Rules

* **No Pure Black or Pure White** — Use espresso for high-contrast text and cream-white for primary surfaces. 
* **No Artificial Accents** — No neon blues, primary greens, or bright reds. The palette is derived strictly from coffee, grains, and morning light.
* **No UI Containment Cards** — Avoid boxing text into cards with drop shadows. Let typography sit directly on the off-white surfaces.
* **No Opaque Overlays on Imagery** — Never cover magazine-quality photography with heavy gradients or dark scrims. Place text in dedicated editorial blocks instead.
* **No Emojis** — Visual communication is strictly handled through photography and immaculate typesetting.

---

## Color Palette

### The Morning Scale

The palette transitions seamlessly from cream-white canvases through natural grain tones, culminating in rich, deeply roasted text. 

```css
/* Backgrounds & Surfaces (Lightest to Darkest) */
bg-cream-white        /* Main canvas, pure daylight substitute (#FAFAF7) */
bg-warm-ivory         /* Alternating editorial text blocks (#F4F1EB) */
bg-oat-beige          /* Secondary surfaces, footer areas, gentle highlights (#EAE5D9) */
bg-soft-gray          /* Neutral breaks, disabled states, subtle image framing (#DFDDD8) */

/* Borders & Dividers */
border-oat-beige      /* Restrained dividers, minimal structural lines */
border-soft-gray      /* Input outlines, subtle form boundaries */
border-toasted-brown  /* Active states, focused boundaries */

/* Primary Brand / Accents */
bg-toasted-brown      /* Minimal primary call-to-action buttons (#875C36) */
text-toasted-brown    /* Hover states, subtle inline emphases */
border-toasted-brown  /* Hover underlines for large navigation */

/* Text Hierarchy */
text-espresso         /* Primary headings, body copy, all core typography (#2A2421) */
text-espresso/80      /* Secondary copy, intro paragraphs, meta information */
text-espresso/50      /* Muted details, timestamps, placeholder text */
text-toasted-brown    /* Interactive text hooks, button labels */

```

---

## Typography

The typography leans entirely on modernist, high-clarity sans-serifs to counterbalance the organic warmth of the photography. The font stack prioritizes **Neue Haas Grotesk**, falling back to **Söhne** or **Avenir Next**.

### Font Family

```css
font-sans        /* "Neue Haas Grotesk Display Pro", "Söhne", "Avenir Next", sans-serif */
```

### Font Size Scale (Strict Editorial Sizing)

```css
text-[13px]      /* Minimal secondary navigation, footer links, small metadata */
text-[14px]      /* Primary large navigation, standard button labels */
text-[16px]      /* Standard detailed menu item descriptions */
text-[18px]      /* Intro copy, large editorial lead-in paragraphs */
text-[24px]      /* Menu item names, minor subheadings */
text-[34px]      /* Secondary section titles (responsive mobile) */
text-[42px]      /* Standard section titles (centered menus, editorial bands) */
text-[46px]      /* Hero headline (responsive mobile) */
text-[56px]      /* Hero headline (desktop - highly prominent, left-aligned) */

```

### Font Weights

```css
font-light       /* Hero headlines, large section titles (creates a refined, print-like feel) */
font-normal      /* Core body copy, intro paragraphs, menu descriptions */
font-medium      /* Navigation items, CTA buttons, menu item names */
/* font-semibold and font-bold are generally avoided to maintain editorial elegance */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Hero headlines (46-56px) */
tracking-normal  /* All body copy and intro text */
tracking-wide    /* Navigation links (13-14px) to ensure breathing room */

uppercase        /* Small category labels, micro-navigation - used sparingly */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- |
| Hero Headline | 46–56px | light | text-espresso | tight |
| Section Titles | 34–42px | light | text-espresso | normal |
| Intro Copy | 18px | normal | text-espresso/80 | normal |
| Nav / CTA | 13–14px | medium | text-espresso | wide |

---

## Layout & Structure

### The Full-Bleed Opening

The experience must always begin with an immersive, full-bleed hero image. The logo and headline are left-aligned, establishing an immediate, grounded structure, paired with a singular, minimal brown CTA.

```tsx
<header className="relative w-full h-screen min-h-[600px]">
  <img src="hero-food.jpg" className="absolute inset-0 w-full h-full object-cover" />
  <div className="absolute inset-0 bg-cream-white/10" /> {/* Barely-there optical adjustment, NO dark overlays */}
  <div className="relative z-10 flex flex-col justify-end h-full px-8 pb-16 md:px-16 md:pb-24">
    <Logo className="mb-6 text-espresso" />
    <h1 className="text-[46px] md:text-[56px] font-light text-espresso tracking-tight leading-none max-w-2xl">
      Morning light and seasonal provisions.
    </h1>
    <button className="mt-8 bg-toasted-brown text-cream-white text-[14px] font-medium px-6 py-3 w-fit">
      Book a Table
    </button>
  </div>
</header>
```

### Alternating Editorial Bands

Content flows in rhythmic, horizontal bands. A full-width imagery band is immediately followed by a generous, off-white editorial text block, mimicking the turning of a magazine page.

```tsx
<section className="w-full bg-warm-ivory py-24 md:py-32 px-8 flex justify-center">
  <div className="max-w-3xl text-center">
    <h2 className="text-[34px] md:text-[42px] font-light text-espresso mb-8">
      Sourced from the soil, served with the sun.
    </h2>
    <p className="text-[18px] text-espresso/80 leading-relaxed font-normal">
      Introductory editorial copy goes here. It spans generously across the block,
      inviting the reader to pause and absorb the ethos of the kitchen.
    </p>
  </div>
</section>
```

---

## Animation System

### Core Philosophy: The Gentle Morning

Motions are slow, unhurried, and organic. Elements do not snap or bounce; they fade in softly like morning light filling a room.

### Image Reveals

Images are lazily loaded with a slow, prolonged fade and an incredibly subtle scale-down effect to emulate parallax without the performance cost.

```tsx
initial={{ opacity: 0, scale: 1.03 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 1.2, ease: [0.33, 1, 0.68, 1] }}
```

### Text Unveiling

Typographic blocks fade upwards gently as they enter the viewport.

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

---

## Component Catalog

### Navigation (Large & Restrained)

Navigation elements are confidently sized (13-14px) but feature no background pills or heavy borders. Hover states are minimal.

```tsx
// Nav Link
"text-[13px] md:text-[14px] font-medium text-espresso tracking-wide hover:text-toasted-brown transition-colors duration-300"

// Nav Container
"flex items-center space-x-8 md:space-x-12 bg-cream-white px-8 py-6"
```

### Call To Action (Minimal Brown)

Buttons do not have rounded corners or shadows. They are sharp, geometric, and grounded in the `toasted-brown` accent.

```tsx
// Primary CTA
"bg-toasted-brown text-cream-white text-[14px] font-medium px-8 py-3.5 hover:bg-espresso transition-colors duration-300"

// Secondary outline (for forms/reservations)
"border border-toasted-brown text-toasted-brown text-[14px] font-medium px-8 py-3.5 hover:bg-warm-ivory transition-colors duration-300"
```

### Centered Menu Sections

Menus eschew grid-cards in favor of elegant, centered typographic lists separated by restrained, whisper-thin dividers.

```tsx
<div className="max-w-2xl mx-auto py-16">
  <div className="text-center mb-16">
    <h3 className="text-[34px] md:text-[42px] font-light text-espresso">Brunch</h3>
  </div>
  
  <ul className="space-y-8">
    <li className="flex flex-col text-center border-b border-oat-beige pb-8">
      <span className="text-[24px] font-medium text-espresso mb-2">Ricotta Hotcakes</span>
      <span className="text-[16px] text-espresso/80 font-normal">Honeycomb butter, fresh banana, maple syrup.</span>
    </li>
  </ul>
</div>
```

---

## Quality Checklist

* [ ] Is the primary typeface strictly Neue Haas Grotesk, Söhne, or Avenir Next?
* [ ] Does the hero headline sit precisely between 46–56px with a light weight?
* [ ] Is intro copy explicitly set to 18px for editorial readability?
* [ ] Is the primary text color a rich `espresso` instead of pure `#000000`?
* [ ] Are the main background surfaces utilizing `cream-white` or `warm-ivory` rather than `#FFFFFF`?
* [ ] Does the layout open with a full-bleed hero image and a strictly left-aligned logo and headline?
* [ ] Are the layout rhythms alternating between full-width imagery and text blocks?
* [ ] Is the CTA a sharp, minimal `toasted-brown` button?
* [ ] Are dividers restrained (1px solid `oat-beige`) rather than heavy structural borders?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm, natural palettes (ivory, oat, brown, espresso).
* Vast amounts of whitespace between menu items and editorial text blocks.
* Centered text alignment for menus and prominent editorial quotes.
* Full-bleed, edge-to-edge photography.
* Sharp, 0px border-radius on buttons and input fields to maintain an editorial, print-like edge.

### ✗ Not Allowed

* Pure black text or pure white backgrounds.
* Drop shadows, glows, or any artificial depth markers.
* Text overlaid directly on complex parts of photographs (always use editorial blocks or negative space in the image).
* Rounded corners on buttons or cards (feels too "tech" or "app-like").
* Colorful iconography or emojis that distract from the photography and typography.
Preview