Coastal Market Editorial Design System

/coastalMarketEditorialDesignSystem
A premium editorial system fusing artisan market warmth with restrained coastal minimalism, prioritizing cinematic photography, generous airy spacing, and confident typography for inviting, image-led web interfaces.
Jul 25, 2026
Design System Content
# Coastal Market Editorial Design System

A design language for premium, image-led interfaces blending artisan market warmth with crisp coastal restraint.

---

## Philosophy

> "Warmth invites; restraint elevates."

This system creates interfaces that feel like a high-end physical lifestyle publication—breezy, deeply intentional, and anchored by stunning photography. The design merges the tactile, approachable nature of a curated artisan space with the immaculate spacing and structural discipline of a coastal gallery. It relies on editorial typography and precise modular grids rather than interface clutter.

### Core Beliefs

1. **Images dictate the atmosphere** — Cinematic photography is the primary structural element. The interface acts as a silent, elegant matte board framing the imagery.
2. **Warmth in the whitespace** — Instead of clinical starkness, generous gutters and margins are filled with salt white and oat cream to create an inviting, breathable environment.
3. **Modular discipline** — Layouts employ Framer-level spacing. Centered menu modules, thin dividing lines, and perfectly offset split-sections define a premium rhythm.
4. **Typographic confidence** — Deep scale contrasts between confident, robust headings and highly tracked, crisp navigation labels establish immediate editorial authority.
5. **Calm pacing** — Full-width photographic breaks alternate seamlessly with calm, centered copy panels to create a rhythmic, scrolling narrative.

### Strict Rules

* **Perfect Image Crops Only** — Photography must sit in precise, intentional aspect ratios. No masonry jumbles or awkward scaling.
* **Restrained Tactility** — Interactions rely on subtle hover fades and gentle opacity shifts. No bouncy physics or rapid scaling.
* **No Heavy Shadows** — Interface depth is implied through image overlay, structural dividers, and color blocking, never via muddy drop shadows.
* **Color as Environment, Not Just UI** — Colors like oat cream and misty blue-gray dictate spatial zones. The marine-blue accent is used sparingly to point the way.
* **Strict Font Pairings** — Headings must remain in the designated Grotesk/Manrope families; body copy must remain in the approachable Sans families. Do not mix beyond this architecture.

---

## Color Palette

### The Artisan Coastal Scale

The palette replaces stark tech grays with organic, coastal-inspired neutrals. It transitions from airy whites and creams down to a deeply grounded dark coffee, punctuated by a singular, clear marine-blue.

```css
/* Backgrounds (Lightest to Darkest) */
bg-salt-white         /* Primary canvas background (#FCFCFA) - bright but soft */
bg-oat-cream          /* Secondary panels, calm centered blocks (#F5F2ED) */
bg-oat-cream/60       /* Subtle hover backdrops for interactive zones */
bg-misty-blue/20      /* Soft structural zones, offset image backdrops */
bg-misty-blue         /* Muted accents, inactive states, gentle overlays (#A8B7C2) */

/* Borders & Dividers */
border-misty-blue/30  /* Ultra-thin structural layout dividers */
border-brushed-stone  /* Active borders, input underlines, menu modules (#8A8B88) */
border-dark-coffee    /* High-contrast borders, editorial separations */

/* The Anchor & The Accent */
text-marine-blue      /* Primary interactive focus, links, primary CTA (#006699) */
bg-marine-blue        /* Solid accent blocks, restrained primary buttons */
border-marine-blue    /* Focused input borders, active navigation states */

/* Text Hierarchy */
text-dark-coffee      /* Primary headings, hero text, active navigation (#2A2624) */
text-dark-coffee/80   /* Approachable body copy, intro paragraphs */
text-brushed-stone    /* Metadata, secondary image captions, disabled UI */
text-salt-white       /* Text overlapping dark cinematic image sections */

```

### Destructive Actions (Deletions Only)

```css
hover:bg-red-900/5
hover:text-red-700
hover:border-red-200

```

---

## Typography

A masterful blend of authoritative Grotesk headings and highly legible, approachable Sans-serif body copy. The hierarchy mimics a printed editorial magazine.

### Font Families

```css
font-sans-grotesk   /* Neue Haas Grotesk, Suisse Int’l, or Manrope (Headings) */
font-sans-body      /* DM Sans or Source Sans 3 (Body & UI text) */

```

### Font Size Scale & Weights

```css
text-[11px]      /* Image credits, subtle metadata (Regular) */
text-[13px]      /* Tracked navigation, utility menus, category tags (Medium) */
text-[15px]      /* Secondary UI labels, standard captions (Regular) */
text-[16px]      /* Default body copy (Regular) */
text-[18px]      /* Intro copy, editorial lead-ins, prominent quotes (Regular) */
text-[24px]      /* Standard card titles, subsection headers (Medium) */
text-[36px]      /* Editorial section titles, split-panel headers (Medium) - Up to 42px */
text-[48px]      /* Hero headlines, primary page identities (Medium) - Up to 56px */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Hero headlines (-0.02em) to maintain crisp confident shapes */
tracking-normal  /* Intro text and standard body copy */
tracking-wide    /* Section titles, prominent buttons */
tracking-widest  /* 13px navigation links, small caps tags (0.1em) */

uppercase        /* Navigation links, utility labels, category tags */

```

### Hierarchy Examples

| Element | Size | Family | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 48-56px | Grotesk | dark-coffee | tight | none |
| Section Title | 36-42px | Grotesk | dark-coffee | normal | none |
| Intro Copy | 18px | Body | dark-coffee/80 | normal | none |
| Navigation | 13px | Body | dark-coffee | widest | uppercase |
| Image Caption | 11px | Body | brushed-stone | normal | none |

---

## Animation System

### Core Philosophy: The Gentle Fade

Motions should feel like turning the page of a high-end magazine or a calm coastal breeze—unhurried, fluid, and entirely opacity-driven.

### Page Transitions (Cinematic Reveal)

Elements ease in with a slight vertical drift, prioritizing a smooth alpha blend over aggressive movement.

```tsx
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}

```

### Micro-Interactions (The Editorial Fade)

Hover states on images and cards utilize a very slow, subtle zoom coupled with color-muting, avoiding stark snaps.

```tsx
whileHover={{ scale: 1.02 }}
transition={{ duration: 0.8, ease: "easeOut" }}
// Associated text links fade opacity slowly rather than changing colors abruptly

```

---

## Layout & Spatial Components

### The Left Identity Stack

The top of the page structures the brand and identity firmly to the left, allowing the rest of the canvas to breathe.

```tsx
<header className="w-full flex justify-between items-start pt-12 pb-8 px-12">
  <div className="flex flex-col gap-2 max-w-xs">
    <Logo className="text-dark-coffee" />
    <span className="text-[13px] tracking-widest uppercase text-brushed-stone">
      Artisan Goods
    </span>
  </div>
</header>

```

### Centered Menu Module

Navigation sits in a centered modular block, separated by ultra-thin brushed dividers.

```tsx
<nav className="flex items-center justify-center border-y border-misty-blue/30 py-4 mx-12">
  <ul className="flex gap-12 text-[13px] tracking-widest uppercase text-dark-coffee">
    <li className="hover:text-marine-blue transition-colors duration-300">Shop</li>
    <li className="hover:text-marine-blue transition-colors duration-300">Journal</li>
    <li className="hover:text-marine-blue transition-colors duration-300">Studio</li>
  </ul>
</nav>

```

### Split Editorial Section

Photography offset to one side with perfectly aligned typography on the other, utilizing Framer-level gutters (e.g., `gap-24`).

```tsx
<section className="grid grid-cols-2 gap-24 py-32 px-12 items-center bg-salt-white">
  <div className="aspect-[4/5] overflow-hidden bg-oat-cream">
    <img src="..." className="w-full h-full object-cover hover:scale-105 transition-transform duration-1000" />
  </div>
  <div className="flex flex-col gap-6 max-w-md">
    <h2 className="font-sans-grotesk text-[42px] leading-[1.1] text-dark-coffee">
      Crafted by the Coast
    </h2>
    <p className="font-sans-body text-[18px] text-dark-coffee/80 leading-relaxed">
      A curated selection of handmade ceramics, blending raw earth textures with refined coastal aesthetics.
    </p>
  </div>
</section>

```

---

## Component Catalog

### Calm Centered Copy Panels

Used as pacing breaks between full-width cinematic images.

```tsx
"w-full bg-oat-cream py-32 px-6 flex flex-col items-center text-center space-y-8"
"max-w-2xl font-sans-grotesk text-[36px] text-dark-coffee leading-snug"
"w-12 h-[1px] bg-brushed-stone" // Elegant center divider
```

### Restrained Buttons

Utilitarian but elegant. Minimal borders, generous horizontal padding.

```tsx
// Primary Restrained Button
"bg-marine-blue text-salt-white font-sans-body text-[13px] tracking-widest uppercase px-8 py-4 hover:bg-marine-blue/90 transition-all duration-300"

// Secondary Outline Button
"border border-brushed-stone text-dark-coffee font-sans-body text-[13px] tracking-widest uppercase px-8 py-4 hover:bg-oat-cream transition-all duration-300"

```

### Editorial Inputs

Stripped back, relying on thin underlines or seamless oat-cream fills rather than heavy boxes.

```tsx
// Newsletter / Search Input
"w-full bg-transparent border-b border-brushed-stone py-3 text-[16px] font-sans-body text-dark-coffee placeholder-brushed-stone focus:outline-none focus:border-marine-blue transition-colors"

```

### Photographic Image Breaks

Full-bleed images that act as chapters in the scrolling narrative.

```tsx
<div className="w-full h-[70vh] relative overflow-hidden">
  <img src="..." className="absolute inset-0 w-full h-full object-cover" />
  <div className="absolute inset-0 bg-dark-coffee/20" /> {/* Gentle matte overlay */}
</div>

```

---

## Quality Checklist

* [ ] Does the hero headline sit precisely between 48px and 56px in a Grotesk typeface?
* [ ] Is all navigational text set to exactly 13px, uppercase, with ultra-wide tracking?
* [ ] Are the gutters exceptionally generous (`gap-16` to `gap-24`) to maintain an airy, gallery-like layout?
* [ ] Did you use `salt-white` and `oat-cream` for backgrounds instead of pure #FFFFFF to preserve artisan warmth?
* [ ] Are images perfectly cropped into intentional aspect ratios (e.g., 4:5, 16:9, 1:1) without masonry staggering?
* [ ] Is the `marine-blue` accent used strictly for key interactive elements, preserving the dominance of photography?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Flat, solid color blocking using the oat cream and misty blue-gray scale.
* Large, uninterrupted cinematic image breaks.
* Ultra-thin divider lines (`border-misty-blue/30`) to organize header menus and editorial sections.
* Generous, almost excessive padding and margins (Framer-level spatial discipline).
* Slow, smooth opacity transitions on hover.

### ✗ Not Allowed

* Drop shadows, outer glows, or heavy elevation effects on cards/images.
* Rounded, bubbly button shapes (buttons must be sharp or slightly eased rectangles).
* Bright, synthetic colors (neons, pure tech-blues, energetic greens).
* Cluttered text overlays on complex imagery (use clean image blocks beside text blocks).
* Mixing serif fonts into the system (strictly Grotesk/Manrope and Sans combinations).
Preview