Coastal Flour Minimalism Design System

/coastalFlourMinimalismDesignSystem
A premium maritime hospitality UI system blending tactile minimalism, editorial typography, and a restrained coastal palette to create calm, expansive, and highly refined digital restaurant experiences.
0 likes
0 bookmarks
Jun 26, 2026
Design System Content
# Coastal Flour Minimalism Design System

A design language for premium, restrained maritime hospitality interfaces.

---

## Philosophy

> "Hospitality begins in the empty space; warmth is found in the texture."

This system creates interfaces that feel like stepping into a highly refined coastal restaurant—calm, tactile, and effortlessly impressive. The design relies on the balance between organic warmth (dough, warm stone) and disciplined structure (clean maritime lines, pure minimalist typography). It feels expansive and deeply polished, substituting harsh digital lines with soft grain, warm natural shadows, and editorial coastal photography.

### Core Beliefs

1. **Tactile Minimalism** — The interface must feel like a physical space. Flour-like textures and subtle grain elevate vast emptiness from sterile to inviting.
2. **Atmospheric Hierarchy** — Large, disciplined typography acts as the architectural framework, allowing food and coastal imagery to provide the color and life.
3. **Restrained Elegance** — Motion should mimic the gentle pull of the tide—slow, deliberate, and undeniably smooth. Nothing snaps aggressively; everything breathes.
4. **Organic Geometry** — Strict, straight lines are softened by generous border radii on imagery and understated, tile-like borders that evoke high-end ceramics.
5. **The Coastal Palette** — Colors exist in a washed, muted state. Contrast is achieved through tonal shifts rather than pure black-and-white extremes.

### Strict Rules

* **No Pure Black or Pure White** — Use Charcoal Olive for deep contrast and Flour White for primary canvases.
* **No Harsh Drop Shadows** — Depth is created using warm, natural, dispersed shadows that mimic sunlight hitting warm stone.
* **No Aggressive Easing** — All animations must use highly refined, fluid Framer-level spring or cubic-bezier curves. Jarring transitions are forbidden.
* **Editorial Imagery Only** — Photography must be coastal, atmospheric, and highly curated. Food imagery must be soft and inviting, never harshly lit.
* **Generous Vertical Rhythm** — Line heights must be expansive, allowing text to breathe like sea air.

---

## Color Palette

### The Coastal & Earth Scale

The palette rejects artificial web colors in favor of organic pigments. Flour white and soft limestone create the foundation, while denim and charcoal olive provide structural contrast.

```css
/* Backgrounds & Canvas */
bg-flour-white         /* Main canvas background (#F9F8F6) */
bg-limestone-100       /* Secondary sections, soft structural panels (#EFECE7) */
bg-driftwood-200       /* Tertiary elements, image placeholders, footers (#DFDCD6) */
bg-flour-white/80      /* High-clarity backdrop blurs for floating navs */

/* Borders (Understated Tile Aesthetic) */
border-limestone-200   /* Default ultra-subtle dividers */
border-denim-300       /* Understated blue tile borders for cards & active states (#9CA8BA) */
border-ocean-400       /* Deep muted blue for focused inputs (#6B7C93) */

/* Accents (Restrained use for status, badges, and hovers) */
text-coral-500         /* Subtle warmth for primary CTAs or special menu tags (#DE6B58) */
bg-coral-500           /* Primary call-to-action button fills */
text-basil-600         /* Vegetarian tags, fresh ingredients, success states (#5A7658) */
bg-basil-50            /* Soft green backdrop for dietary badges */
bg-ocean-100           /* Muted wash for active navigational states */

/* Text Hierarchy (Charcoal Olive replaces Black) */
text-charcoal-900      /* Primary hero text, main navigation (#2C2F2B) */
text-charcoal-700      /* Subheadings, primary menu item titles */
text-charcoal-500      /* Body copy, atmospheric descriptions */
text-denim-600         /* Interactive text elements, secondary links */
text-driftwood-400     /* Disabled states, subtle timestamps */
```

---

## Typography

The system uses highly disciplined grotesques (Haffer, Switzer, General Sans, Theinhardt, or Matter) to contrast the organic textures of the palette. Navigational labels are tight, while body copy flows generously.

### Font Weights

```css
font-regular     /* Main body copy, atmospheric short texts */
font-medium      /* Nav labels, CTA buttons, menu titles */
font-semibold    /* Subtle categorical tags, prices */
/* Light weights are avoided to maintain readability against soft textures */
/* Bold weights are forbidden to keep the aesthetic calm and refined */
```

### Font Size Scale & Line Height

```css
text-xs leading-relaxed       /* Metadata, dietary tags, refined footer links (12px) */
text-sm leading-loose         /* Atmospheric short copy, secondary descriptions (14px) */
text-base leading-loose       /* Standard menu descriptions, body text (16px) */
text-lg leading-relaxed       /* Section labels, CTA pairings (18px) */
text-2xl leading-normal       /* Standard menu item titles */
text-4xl leading-tight        /* Secondary section headers */
text-6xl leading-none         /* Hero headlines (Desktop) */
text-7xl leading-none         /* Hero headlines (Large Displays) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Navigation labels, large hero typography */
tracking-normal  /* Standard body copy */
tracking-wide    /* Small metadata, dietary tags, sub-navigation */

uppercase        /* Small dietary tags, footer headings, tiny system labels */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Line-Height |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6xl | medium | charcoal-900 | tight | none |
| Nav Labels | sm | medium | charcoal-900 | tight | normal |
| Atmospheric Copy| sm | regular | charcoal-500 | normal | loose |
| Menu Titles | 2xl | medium | charcoal-700 | normal | normal |
| Special Tags | xs | semibold | coral-500 | wide | relaxed |

---

## Animation System

### Core Philosophy: The Coastal Drift

Elements do not pop; they drift into existence. Motion feels fluid, expensive, and grounded, utilizing elegant fade-ins and subtle parallax to create depth without distraction.

### Framer-Level Fade-Ins (Hero & Typographic Reveal)

```tsx
initial={{ opacity: 0, y: 20, filter: 'blur(4px)' }}
animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }} // Ultra-smooth ease-out
```

### Gentle Image Parallax

```tsx
const y = useTransform(scrollYProgress, [0, 1], ["0%", "15%"]);
// Applied to the image wrapper inside a hidden overflow container
```

### Smooth Carousel Motion

```tsx
drag="x"
dragConstraints={{ right: 0, left: -1200 }}
dragElastic={0.15}
transition={{ type: "spring", bounce: 0.1, damping: 25, mass: 0.8 }}
```

---

## UI Components

### Subtle Grain Overlay

Applied to the absolute top layer of the application to give the flour-white canvas a tactile, print-like quality.

```css
.coastal-grain {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  background-image: url('/grain-texture.png'); /* 5-10% opacity noise */
  mix-blend-mode: multiply;
  opacity: 0.4;
  z-index: 50;
}
```

### Soft Coastal Gradients

Used exclusively for atmospheric section transitions or image overlays to ensure text legibility.

```tsx
<div className="absolute inset-0 bg-gradient-to-t from-limestone-100 via-flour-white/50 to-transparent" />
```

### The Clean Menu Carousel

Located directly beneath the hero. Displays rounded food imagery with refined hover states.

```tsx
<div className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-8 py-10 px-6">
  {menuItems.map((item) => (
    <div className="min-w-[280px] snap-center flex-shrink-0 group cursor-pointer">
      <div className="overflow-hidden rounded-2xl border border-limestone-200 transition-all duration-500 group-hover:shadow-warm group-hover:border-denim-300">
        <img 
          src={item.image} 
          className="w-full h-[340px] object-cover transition-transform duration-700 ease-out group-hover:scale-105" 
        />
      </div>
      <h3 className="mt-4 text-2xl font-medium text-charcoal-700">{item.title}</h3>
      <p className="text-sm text-charcoal-500 mt-2 leading-relaxed">{item.desc}</p>
    </div>
  ))}
</div>
```

---

## Component Catalog

### Hero Layout Structure

Large left-aligned or centered headline, minimal short copy, refined CTA pairing.

```tsx
<section className="min-h-[80vh] flex flex-col justify-center px-8 max-w-7xl mx-auto">
  <div className="max-w-3xl">
    <h1 className="text-6xl tracking-tight text-charcoal-900 mb-6">
      Wood-fired warmth by the water.
    </h1>
    <p className="text-lg leading-loose text-charcoal-500 mb-10 max-w-xl">
      <!-- Short atmospheric copy here -->
    </p>
    <div className="flex items-center gap-4">
      {/* Refined CTA Pair */}
      <button className="bg-charcoal-900 text-flour-white font-medium text-sm tracking-tight rounded-full px-8 py-3.5 hover:bg-coral-500 transition-colors duration-400">
        Book a Table
      </button>
      <button className="bg-transparent text-charcoal-900 font-medium text-sm tracking-tight px-6 py-3.5 hover:text-denim-600 transition-colors duration-400">
        View Menu
      </button>
    </div>
  </div>
</section>
```

### Elegant Top Navigation

```tsx
<nav className="sticky top-0 w-full bg-flour-white/80 backdrop-blur-md border-b border-limestone-200 z-40">
  <div className="flex justify-between items-center px-8 py-5 max-w-7xl mx-auto">
    <div className="text-xl font-medium tracking-tight text-charcoal-900">Logo</div>
    <div className="flex gap-8">
      <a href="#" className="text-sm font-medium tracking-tight text-charcoal-500 hover:text-charcoal-900 transition-colors">Menu</a>
      <a href="#" className="text-sm font-medium tracking-tight text-charcoal-500 hover:text-charcoal-900 transition-colors">Space</a>
      <a href="#" className="text-sm font-medium tracking-tight text-charcoal-500 hover:text-charcoal-900 transition-colors">Journal</a>
    </div>
  </div>
</nav>
```

### Cards & Imagery

```tsx
// Standard Editorial Card
"bg-flour-white rounded-2xl overflow-hidden shadow-none border border-limestone-200 group transition-all duration-500 hover:shadow-[0_12px_40px_-12px_rgba(44,47,43,0.08)] hover:border-denim-300"

// Warm Natural Shadow (Custom Tailwind Configuration required)
box-shadow: 0 20px 40px -10px rgba(110, 105, 95, 0.12); /* Driftwood/warm undertone shadow */
```

### Badges & Tags

```tsx
// Refined Dietary/Status Tag
"px-2.5 py-1 text-xs font-semibold uppercase tracking-wide rounded-sm bg-basil-50 text-basil-600"
```

---

## Quality Checklist

* [ ] Is the primary typography completely devoid of true black (`#000000`), using `charcoal-900` instead?
* [ ] Do all food and coastal images have soft `rounded-2xl` corners?
* [ ] Is the hero headline massive (`text-6xl` or larger) with tightly tracked typography?
* [ ] Are hover states utilizing slow, elegant duration classes (e.g., `duration-500` or `duration-700`) rather than instant snaps?
* [ ] Is the subtle coastal grain overlay active and set to a low, non-obtrusive opacity?
* [ ] Do standard card borders use `limestone-200` and shift subtly to `denim-300` on hover?
* [ ] Does the menu carousel sit directly underneath the hero section to immediately showcase the tactile food imagery?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Flour white backgrounds with subtle typographic grain.
* Warm, dispersed natural shadows (`rgba` values with brown/yellow undertones).
* Rounded corners on all editorial and food photography (`rounded-2xl` to `rounded-3xl`).
* Refined tonal shifts for hover states (e.g., charcoal text turning to muted denim).
* Slow, deliberate image scaling on hover (`scale-105` over `700ms`).

### ✗ Not Allowed

* Harsh, cold drop shadows with black/gray hex values.
* Pure black or pure white values anywhere in the UI.
* Sharp, un-rounded corners on large photographic elements.
* Bouncy or overly aggressive spring animations that distract from the calm aesthetic.
* Cluttered navigation headers with chunky buttons or highly prominent icons.