Amalfi Wave Pop Minimalism

/amalfiWavePopMinimalism
A design system for light-filled, premium coastal dining apps blending Mediterranean minimalism, bold color pops, organic textures, and oversized typography for elegant, tactile, sun-drenched digital experiences.
0 likes
0 bookmarks
Jun 26, 2026
Design System Content
# Amalfi Wave Pop Minimalism Design System

A design language for premium, light-filled coastal dining interfaces.

---

## Philosophy

> "Sunlight plates the food; color sets the mood."

This system creates interfaces that feel like a sun-drenched Mediterranean afternoon—balancing world-class structural minimalism with bursts of joyful, appetizing color. The design relies on soft, warm base canvases punctured by highly controlled, vibrant pop-art sensibilities. It feels organic yet structurally impressive, trading rigid clinical grids for fluid, rounded confidence.

### Core Beliefs

1. **Deep Navy Anchors the Pop** — Pure black is too harsh for the coastal sun. Deep navy typography provides the perfect high-contrast grounding for bright Mediterranean colors.
2. **Photography as Architecture** — Large, sunlit food photography and secondary street-front or sea-wave image panels act as primary structural blocks, driving the layout.
3. **Joyful Geometry** — Harsh right angles are banished. Soft, oversized rounded corners on cards and buttons invite interaction and evoke a relaxed dining experience.
4. **Tactile Warmth** — Interfaces incorporate soft paper grain, tile-check micro-patterns, and wave-line dividers to emulate the physical menus and ceramics of the Amalfi coast.
5. **Silky Momentum** — Navigation and exploration should feel like a coastal breeze—fluid carousels, gentle parallax, and glossy, frictionless button interactions.

### Strict Rules

* **No Pure Black or Pure White** — Backgrounds use warm "Whipped Cream" and text uses "Deep Navy" to reduce digital eye strain and enhance the natural food aesthetic.
* **Controlled Color-Blocking** — Bright colors (Tomato, Basil, Turquoise, Amalfi Blue) are used in solid, unapologetic blocks for card backgrounds and buttons, never as muddy gradients.
* **No Sharp Corners** — Every container, image, and interactive element must feature distinct, friendly rounded radii.
* **Generous Scale** — Headlines must be confidently oversized, contrasting sharply with a clean, highly compact navigation bar. 

---

## Color Palette

### The Coastal Canvas & Typography

The palette abandons sterile grays, transitioning from warm, appetizing whites to sand, terminating in a rich, inky navy for all primary text and linework.

```css
/* Backgrounds (Lightest to Darkest Canvas) */
bg-whipped-cream      /* Main canvas background (#FDFAF4) */
bg-pale-butter        /* Secondary panels, soft highlight zones (#FEF7D1) */
bg-warm-sand          /* Default menu card containers, muted sections (#EBE4DB) */
bg-warm-sand/50       /* Subtle container zones, hover bases */
bg-warm-sand/80       /* Active states, subtle selection fills */

/* Borders & Dividers */
border-navy-900/10    /* Ultra-subtle divider lines and tile-check patterns */
border-navy-900/20    /* Default structural card borders */
border-navy-900/40    /* Hover states, focused boundaries */

/* Typography (Deep Navy Scale) */
text-navy-900         /* Primary text, bold oversized headlines (#0A1128) */
text-navy-800         /* Secondary text, brand promises, body copy */
text-navy-600         /* Ingredient notes, descriptive text */
text-navy-400         /* Muted metadata, timestamps, secondary icons */

```

### The Mediterranean Pop (Accents)

Vibrant, glossy accents used for color-blocked backgrounds, call-to-actions, and interactive underlines.

```css
/* Vivid Amalfi Blue */
bg-amalfi-blue        /* Primary call-to-action buttons (#004DD4) */
text-amalfi-blue      /* Primary interactive focus, bright accent underlines */

/* Marina Turquoise */
bg-marina-turquoise   /* Playful secondary cards, hover overlays (#16C1B1) */
text-marina-turquoise /* Success states, fresh ingredient tags */

/* Glossy Tomato Red */
bg-glossy-tomato      /* Urgent actions, featured menu item badges (#EB3F25) */
text-glossy-tomato    /* Price highlights, striking visual breaks */

/* Basil Leaf */
bg-basil-leaf         /* Organic labels, vegan/vegetarian indicators (#2B824B) */
text-basil-leaf       /* Supporting natural motifs */
```

---

## Typography

Typography blends confident scale with friendly readability. The stack embraces personality through bold, wide geometry and clean, ultra-legible body text. 

**Approved Typographic Stack:** Sharp Grotesk or Gabarito (Headlines); Neue Montreal, Rebond Grotesque, or Moderat (Body).

### Font Weights

```css
font-normal      /* Core body copy, ingredient notes, compact nav items */
font-medium      /* Confident CTA text, menu item titles, hover states */
font-bold        /* Bold oversized headlines, primary brand promises */
font-black       /* Massive hero typographic lockups */
/* font-light is strictly forbidden — coastal pop requires visual weight and presence */

```

### Font Size Scale

```css
text-xs          /* Ingredient notes, micro-patterns, fine print (12px) */
text-sm          /* Compact nav links, button labels (14px) */
text-base        /* Concise brand promises, standard body (16px) */
text-lg          /* Menu item titles, secondary image panel captions (18px) */
text-xl          /* Sub-headlines, category dividers (20px) */
text-3xl         /* Standard section headers */
text-5xl-8xl     /* Bold oversized headlines (responsive, tightly stacked) */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Oversized headlines (forces a compact, poster-like feel) */
tracking-normal  /* Default paragraph flow text */
tracking-wide    /* Compact nav items, small button text */

uppercase        /* Compact nav links, ingredient tags, CTA pairs */
lowercase        /* Playful secondary callouts, aesthetic typography elements */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Oversized Headline | 7xl | bold | navy-900 | tighter | none |
| Brand Promise | base | medium | navy-800 | normal | none |
| Compact Nav | sm | medium | navy-900 | wide | uppercase |
| Menu Item Title | lg | bold | navy-900 | normal | none |
| Ingredient Note | xs | normal | navy-600 | normal | none |

---

## Animation System

### Core Philosophy: The Coastal Breeze

Motion should feel effortless, silky, and tactile, simulating the gentle slide of a heavy ceramic plate or the snap of a physical menu.

### Page Transitions & Gentle Parallax

Images drift slightly within their containers to create depth without overwhelming the eye.

```tsx
// Gentle Parallax for Large Sunlit Food Imagery
initial={{ y: 20, scale: 1.05 }}
animate={{ y: 0, scale: 1 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}

```

### Silky Carousel Motion

Menu carousels slide with high-momentum, low-friction physics.

```tsx
// Image-Rich Menu Carousel Drag
drag="x"
dragConstraints={{ left: -1000, right: 0 }}
dragElastic={0.2}
transition={{ type: "spring", bounce: 0, duration: 0.6 }}

```

### Glossy Button Interactions

Hover states "lift" and gain saturation, mimicking a glossy, tactile surface reflecting sunlight.

```tsx
// Confident CTA Hover
whileHover={{ scale: 1.02, y: -2, filter: "brightness(1.1)" }}
whileTap={{ scale: 0.98, y: 0 }}

```

---

## UI Components

### Soft Paper Grain

A global texture applied over the whipped cream background to establish a tactile dining feel. 

```tsx
<div 
  className="pointer-events-none absolute inset-0 opacity-[0.03] mix-blend-multiply"
  style={{ backgroundImage: "url('/textures/paper-grain.png')" }}
/>
```

### Wave-Line Divider

Used in place of straight borders to separate large layout sections, adding Mediterranean rhythm.

```tsx
<div 
  className="w-full h-4 bg-repeat-x opacity-20"
  style={{ backgroundImage: "url('/vectors/wave-line-navy.svg')" }}
/>
```

### Bright Accent Underlines

Links in body text or sub-navigation don't change color; instead, a thick, glossy block of color slides underneath them.

```tsx
<span className="relative inline-block group cursor-pointer text-navy-900">
  Coastal Sourced
  <span className="absolute bottom-0 left-0 w-full h-2 bg-amalfi-blue/30 group-hover:bg-amalfi-blue transition-colors duration-300 -z-10 rounded-sm" />
</span>
```

---

## Component Catalog

### Cards (Menu Carousel)

Playful, color-blocked backgrounds with significant border radii and polished hover states.

```tsx
// Playful Color-Blocked Menu Card
"relative overflow-hidden bg-pale-butter rounded-[2rem] p-6 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(10,17,40,0.1)] transition-all duration-400 group"

// Ingredient Notes Panel (Inside Card)
"mt-4 p-3 rounded-xl bg-whipped-cream/80 backdrop-blur-sm border border-navy-900/5 text-xs text-navy-600"

```

### Buttons & Nav

```tsx
// Confident CTA Pair (Primary)
"bg-amalfi-blue text-whipped-cream font-bold text-sm uppercase tracking-wide rounded-full px-8 py-4 shadow-[0_8px_20px_-6px_rgba(0,77,212,0.4)] hover:shadow-[0_12px_24px_-6px_rgba(0,77,212,0.5)] transition-all"

// Confident CTA Pair (Secondary)
"bg-whipped-cream text-navy-900 border-2 border-navy-900 font-bold text-sm uppercase tracking-wide rounded-full px-8 py-4 hover:bg-navy-900 hover:text-whipped-cream transition-colors"

// Clean Compact Nav Menu
"flex items-center gap-6 px-6 py-3 bg-whipped-cream/90 backdrop-blur-md rounded-full border border-navy-900/10 shadow-sm"

```

### Imagery Panels

```tsx
// Large Sunlit Food Image Container
"w-full aspect-[4/3] rounded-[2.5rem] overflow-hidden bg-warm-sand relative shadow-inner"

// Secondary Sea-Wave / Street-Front Image Panel
"w-full md:w-1/3 aspect-[3/4] rounded-[2rem] overflow-hidden rotate-[-2deg] hover:rotate-0 transition-transform duration-500 border-8 border-whipped-cream shadow-xl"

```

### Tile-Check Micro-Patterns

Used for empty states, footer backgrounds, or secondary graphic elements.

```tsx
<div className="bg-[length:24px_24px] bg-[url('/vectors/tile-check.svg')] opacity-5" />
```

---

## Quality Checklist

* [ ] Are all dark texts and outlines using **Deep Navy** instead of pure black?
* [ ] Is the primary canvas set to **Whipped Cream** rather than pure #FFFFFF?
* [ ] Do headlines utilize confident, oversized typography with tight letter spacing?
* [ ] Are all structural cards, buttons, and image panels using generous, friendly rounded corners?
* [ ] Is the paper grain texture visible but subtle enough not to obscure text?
* [ ] Are the pop colors (Amalfi Blue, Tomato, Turquoise, Basil) applied as solid, bold blocks rather than faded gradients?
* [ ] Does the menu carousel utilize silky, spring-based motion for sliding?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm, appetizing canvas tones (Whipped Cream, Warm Sand).
* Vibrant, unapologetic solid pop colors for accents and card backgrounds.
* Massive, tightly tracked typographic headers.
* Soft, tactile overlays like paper grain and tile-check patterns.
* Oversized border radii (e.g., `rounded-[2rem]`, `rounded-full`).

### ✗ Not Allowed

* Pure digital black (#000000) or pure digital white (#FFFFFF).
* Sharp 90-degree corners on prominent UI elements.
* Muddy, translucent color gradients that dilute the "pop" aesthetic.
* Light or wispy font weights that lose presence against strong backgrounds.
* Cluttered or oversized navigation bars that detract from the food imagery.