Apple Green Morning Editorial

/appleGreenMorningEditorial
A minimalist design system evoking sunlit cafes and premium print, centered on crisp produce photography, generous white space, structured editorial typography, and organic morning colors.
Jul 27, 2026
Design System Content
# Apple Green Morning Editorial Design System

A design language for fresh, world-class restaurant experiences inspired by morning produce, clean counters, and premium editorial print.

---

## Philosophy

> "Freshness demands clarity; space breathes life into form."

This system creates digital environments that feel like stepping into a sunlit, high-end cafe or flipping through a meticulously crafted culinary magazine. The aesthetic relies on an organic interplay between edge-to-edge photography, expansive chalky off-white voids, and highly structured, confident typography. It is minimalist, image-led, and spaciously calming.

### Core Beliefs

1. **Photography is the anchor** — Crisp, evocative imagery of breakfast, lunch, and produce dictates the layout. The UI acts as a silent gallery frame.
2. **Confident restraint** — Oversized typography balanced by massive negative space replaces decorative graphical elements.
3. **Organic architectural lines** — Restrained columns and fine, precise hairlines create order without boxing the content in.
4. **Natural light palette** — Color acts as a subtle wash of morning light—pale greens and soft apricots warm the interface without distracting from the food.
5. **Editorial rhythm** — Pacing alternates between sweeping full-bleed visuals and highly focused, centered typographic moments.

### Strict Rules

* **Typography Above All** — Only use Söhne or General Sans. The system lives and dies by typographic alignment and generous leading.
* **No Heavy Backgrounds** — Deep tones are reserved strictly for typography (Black Olive). Backgrounds must remain pure white or chalky off-white.
* **No Artificial Shadows** — Depth is created through scale, overlapping imagery, and contrast, never via CSS drop shadows or glowing blurs.
* **Photography Must Be Sharp** — Rectangular imagery must have sharp corners (0px border-radius) to maintain an editorial, print-like discipline.
* **No High-Saturation UI** — UI elements, buttons, and accents must use the pale organic palette. Let the food photography provide the vibrant saturation.

---

## Color Palette

### Base & Organic Accent Scale

The palette mirrors a pristine kitchen at dawn. It relies on pure whites, chalky tones, and warm, stone-like grays. Accents are drawn directly from nature: a pale, dewy apple green and a soft, warm apricot. 

```css
/* Canvas & Backgrounds (Light to Deepest Restraint) */
bg-pure-white         /* Primary edge-to-edge canvas (#ffffff) */
bg-chalky-50          /* Core text block backgrounds, soft reading zones (#faf9f6) */
bg-chalky-100         /* Secondary containment, subtle menu sectioning (#f5f4f0) */

/* Structural Lines */
border-warm-gray-200  /* Ultra-fine hairlines, menu column dividers (#e5e5e4) */
border-warm-gray-300  /* Hover state underlines, structural framing (#d6d6d4) */

/* Organic Accents */
bg-apple-green        /* Primary soft accent, highlight backgrounds (#e4f2d8) */
text-apple-green-900  /* Legible text on apple green containers (#2f4f22) */
bg-apricot-soft       /* Secondary warm accent, subtle callouts (#ffeedb) */

/* Text Hierarchy (Warm Grays to Black Olive) */
text-black-olive      /* Primary hero typography, bold prices (#2b2b29) */
text-warm-gray-800    /* Core body copy, menu item descriptions (#57534e) */
text-warm-gray-500    /* Metadata, fine print, secondary labels (#78716c) */
text-warm-gray-400    /* Subtle structural numbers, placeholders (#a8a29e) */
```

---

## Typography

The system utilizes Söhne or General Sans to establish a calm, confident sans-serif presence. The scaling is extreme but deliberate, emulating oversized editorial magazines.

### Font Weights

```css
font-regular     /* The foundation—used for 90% of the interface, including body and section headers */
font-medium      /* Navigation, CTA elements, menu item titles */
font-semibold    /* Reserved strictly for prices or isolated metric data */
/* font-light and font-bold are generally avoided to maintain a steady, uniform typographic color */
```

### Font Size Scale & Leading

```css
/* Micro & Utility */
text-xs leading-relaxed       /* Fine print, dietary tags (12px) */
text-sm leading-loose         /* Subtle navigational links, captions (14px) */

/* Core Interface */
text-[17px] leading-[1.65]    /* Primary body copy, menu descriptions (17-18px) */
text-[18px] leading-[1.65]    /* Slightly elevated body copy for feature text */

/* Section Framing */
text-2xl leading-normal       /* Secondary subtitles, large interactive buttons (24px) */
text-[42px] leading-tight     /* Standard section titles (42-48px) */
text-[48px] leading-tight     /* Elevated section titles */

/* Editorial Hero */
text-[70px] leading-[1.05]    /* Primary display headers, short titles */
text-[80px] leading-[1.05]    /* Maximum hero headlines (desktop) */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Leading |
| --- | --- | --- | --- | --- |
| Hero Headlines | 70-80px | regular | black-olive | 1.05 (tight) |
| Section Titles | 42-48px | regular | black-olive | 1.1 (tight) |
| Menu Item Title | 18px | medium | black-olive | 1.5 (normal) |
| Body / Descriptions | 17-18px | regular | warm-gray-800 | 1.65 (loose) |
| Dietary Tags | 12px | medium | warm-gray-500 | 1.5 (normal) |

---

## Animation System

### Core Philosophy: The Slow Breath

Movement is unhurried. Transitions mimic the turning of a heavy, matte magazine page. No snapping, no bouncing.

### Editorial Reveal (Images & Typography)

Images and large text blocks reveal with a slow, smooth upward drift and a gentle fade. 

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

### Hover States (Subtle Warmth)

Hovering over interactive elements yields a subtle color wash rather than a structural shift.

```tsx
// Buttons and Links gently fill with the soft apple green or apricot over 300ms
className="transition-colors duration-300 ease-in-out hover:bg-apple-green hover:text-black-olive"
```

---

## UI Components & Structural Modules

### The Editorial Introduction (Hero)

The page always begins with a full-bleed, edge-to-edge photograph of fresh produce, breakfast, or lunch. The logo and heading overlay or sit directly below on the left side, establishing immediate print-like anchoring.

```tsx
<header className="w-full min-h-[80vh] flex flex-col justify-end pb-12 bg-pure-white">
  <div className="w-full h-full absolute inset-0">
    <img src="/hero-produce.jpg" className="object-cover w-full h-full" alt="Fresh morning spread" />
  </div>
  <div className="relative z-10 px-8 md:px-16 w-full max-w-7xl mx-auto flex flex-col items-start text-pure-white">
    {/* If overlaid on dark image. If below, text is text-black-olive */}
    <h1 className="text-[70px] md:text-[80px] font-regular tracking-[-0.02em] leading-[1.05]">
      Morning Rituals.
    </h1>
  </div>
</header>
```

### Centered Menu Section with Hairlines

Menu text sits in restrained, centered columns, supported by chalky off-white backgrounds and ultra-fine hairlines to guide the eye.

```tsx
<section className="bg-chalky-50 py-24 px-4 flex flex-col items-center">
  <h2 className="text-[42px] md:text-[48px] text-black-olive font-regular mb-16">
    Breakfast
  </h2>
  <div className="w-full max-w-3xl flex flex-col border-t border-warm-gray-200">
    
    {/* Single Menu Item */}
    <article className="py-6 border-b border-warm-gray-200 flex justify-between items-start">
      <div className="max-w-[75%]">
        <h3 className="text-[18px] font-medium text-black-olive">Heirloom Tomato Toast</h3>
        <p className="text-[17px] leading-[1.65] text-warm-gray-800 mt-2">
          Whipped ricotta, sea salt, cold-pressed olive oil on sourdough.
        </p>
      </div>
      <span className="text-[18px] font-semibold text-black-olive">$14</span>
    </article>

  </div>
</section>
```

### The Signature Split Navigation Module

This signature block alternates down the page. Left side: massive typographic navigation and a minimal CTA. Right side: a perfectly sharp, zero-radius rectangular photograph.

```tsx
<section className="w-full flex flex-col md:flex-row bg-pure-white">
  {/* Left: Oversized Typography & Minimal CTA */}
  <div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center items-start">
    <h2 className="text-[70px] leading-[1.05] tracking-tight text-black-olive mb-8">
      Sourced <br/> Locally.
    </h2>
    <a href="/farms" className="text-[17px] font-medium text-black-olive border-b border-black-olive pb-1 hover:text-warm-gray-500 hover:border-warm-gray-500 transition-colors">
      Meet our purveyors
    </a>
  </div>
  
  {/* Right: Sharp Rectangular Image */}
  <div className="w-full md:w-1/2 aspect-square md:aspect-auto h-full">
    <img 
      src="/apple-harvest.jpg" 
      className="w-full h-full object-cover rounded-none" 
      alt="Apple harvest" 
    />
  </div>
</section>
```

---

## Component Catalog

### Buttons & CTAs

Buttons are extremely minimal. The primary call-to-action is often just an underlined text link or a simple, sharp-cornered block.

```tsx
// Text-led CTA (Primary)
"text-[17px] font-medium text-black-olive border-b border-black-olive pb-0.5 hover:opacity-60 transition-opacity"

// Solid Block CTA (Secondary / Reservations)
"bg-black-olive text-pure-white text-[17px] font-medium px-8 py-4 rounded-none hover:bg-apple-green hover:text-black-olive transition-colors duration-300"
```

### Badges & Tags

Used sparingly for dietary requirements or time-specific menus (e.g., "Served until 11am").

```tsx
// Dietary Tag
"inline-block bg-chalky-100 text-warm-gray-500 text-xs font-medium px-3 py-1 uppercase tracking-widest rounded-none"

// Highlight Accent Tag (Uses Soft Apricot)
"inline-block bg-apricot-soft text-black-olive text-xs font-medium px-3 py-1 uppercase tracking-widest rounded-none"
```

### Alternating Photo Blocks

Images stretch fully to the edges (`w-full`) to break up the chalky white text containers. Text blocks are strictly centered for an elegant, poetic rhythm.

```tsx
<div className="w-full h-[60vh] bg-warm-gray-200">
  <img src="/interior-counter.jpg" className="w-full h-full object-cover" />
</div>
<div className="w-full bg-pure-white py-32 flex justify-center text-center">
  <p className="max-w-2xl text-[18px] leading-[1.65] text-warm-gray-800">
    Every morning begins at 4:00 AM. Our bakers laminate the pastry dough by hand, ensuring every croissant achieves the perfect honeycomb structure before the doors ever open.
  </p>
</div>
```

---

## Quality Checklist

* [ ] Are the hero headlines between 70px and 80px using `font-regular`?
* [ ] Is the body copy highly legible at 17-18px with generous leading?
* [ ] Are all photographs sharp-edged (no border-radius anywhere)?
* [ ] Does the page rhythm alternate correctly between edge-to-edge photography and breathable chalky voids?
* [ ] Are the structural dividers limited to ultra-fine 1px hairlines (`border-warm-gray-200`)?
* [ ] Is the signature split module utilized for major cross-navigation?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast typography featuring purely Black Olive (`text-black-olive`).
* Extensive use of chalky off-whites for central text blocks to create tactile warmth.
* Pale apple green and soft apricot solely for hover states, soft accent backgrounds, and tags.
* Sharp, unrounded corners on all containers, buttons, and images.
* Large, unbroken expanses of negative space.

### ✗ Not Allowed

* Drop shadows, glows, or depth-of-field blur effects on UI elements.
* Border radii (`rounded-lg`, `rounded-full`) on photography or primary buttons.
* High-saturation primary colors (no bright reds, blues, or vibrant greens in the UI).
* Cluttered multi-column text arrays—keep text blocks centered, restrained, and linear.
* Decorative iconography—rely on typography and photography to communicate context.
Preview