Amalfi Ceramic Market Kitchen

/amalfiCeramicMarketKitchen
A Mediterranean-inspired design system that blends tactile ceramic modularity, editorial layouts, and appetizing photography to create premium, location-rich culinary interfaces with disciplined color, type, and sunlit depth.
1 likes
0 bookmarks
Jun 26, 2026
Design System Content
# Amalfi Ceramic Market Kitchen Design System

A design language for premium, Mediterranean-inspired culinary interfaces.

---

## Philosophy

> "Sunlight highlights the ingredients; structural restraint sets the table."

This system creates interfaces that evoke a modern, sun-drenched artisan kitchen on the Mediterranean coast. It marries the vibrant, tactile warmth of ceramic patterning and fresh ingredients with the absolute precision of contemporary editorial design. The layout should feel incredibly appetizing, location-rich, and effortlessly hospitable, relying on oversized typography and crisp framing rather than cluttered ornamentation.

### Core Beliefs

1. **Editorial framing** — Generous canvas space (Chalk White) provides the foundation for Espresso-Black typography, mirroring high-end culinary magazines.
2. **The food is the hero** — Interface elements step back to allow tightly cropped, high-saturation food and harbor photography to dominate the visual hierarchy.
3. **Ceramic modularity** — Components mimic artisan tiles: subtly rounded corners, bright, distinct boundaries, and smooth, glazed hover interactions.
4. **Sun-cast depth** — Shadows are never muddy or gray; they emulate natural sunlight—warm, directional, and distinct.
5. **Restrained embellishment** — Small illustrated wave or ingredient motifs and thin rule lines add tactile character without breaking the contemporary grid.

### Strict Rules

* **No Muddy Shadows** — Only use warm, directional drop shadows that simulate natural coastal sunlight. 
* **Intentional Color Allocation** — Glazed Cobalt, Pomodoro Red, and Olive Green are for high-contrast actions and structural accents. Lemon Cream, Pale Sky Blue, and Terracotta Blush are reserved for soft modular backgrounds and dietary tags.
* **Typographic Discipline** — Use only the approved neo-grotesque typefaces (e.g., Founders Grotesk, Neue Montreal). Never compromise readability; menu items and pricing must be mathematically crisp.
* **Understated Navigation** — The nav must remain minimal, framing the split hero layout rather than competing with the oversized headlines.
* **No Heavy Overlays** — Let the photography breathe. Avoid dimming food imagery with dark gradients.

---

## Color Palette

### The Artisan Scale

The palette replaces sterile grays with a warm, sun-baked foundation, punctuated by rich, vibrant Mediterranean accents. Typography is strictly anchored in a deep, roasted Espresso-Black.

```css
/* Backgrounds (The Canvas & Tiles) */
bg-chalk-white        /* Main canvas background (#FAFAF7) */
bg-lemon-cream        /* Soft highlights, menu card bases (#FFF6D6) */
bg-sky-blue           /* Subtle structural zones, refreshing breaks (#D4E6F1) */
bg-terracotta-blush   /* Warm modular backgrounds, featured tiles (#F2CFC2) */

/* Structural Lines & Borders */
border-chalk-200      /* Ultra-thin rule lines for lists and menus */
border-cobalt/20      /* Subtle glazed borders on interactive tiles */
border-olive/30       /* Natural dividers in editorial sections */

/* The Accents (Interactive & Distinctive) */
bg-glazed-cobalt      /* Primary interactive elements, deep sea contrast (#0047AB) */
text-glazed-cobalt    /* Focused links, active states, nautical motifs */
bg-pomodoro-red       /* Reservation CTAs, urgent highlights, flavor pop (#D9381E) */
text-pomodoro-red     /* Price highlights, striking editorial accents */
bg-olive-green        /* Secondary actions, organic tags (#556B2F) */
text-olive-green      /* Botanical motifs, subtle success states */

/* Text Hierarchy (The Espresso Scale) */
text-espresso-900     /* Oversized hero headlines, primary pricing (#2A2421) */
text-espresso-800     /* Standard dish titles, secondary headers */
text-espresso-600     /* Body copy, ingredient captions, location details */
text-espresso-400     /* Muted metadata, subtle navigational hints */
```

---

## Typography

The typographic system heavily relies on high-end neo-grotesques (Founders Grotesk, Neue Montreal, Aperçu, Basis Grotesque, or Untitled Sans). The styling contrasts massive, tight-tracked display weights against highly legible, breathable ingredient lists.

### Font Weights

```css
font-light       /* Ingredient captions, elegant descriptive paragraphs */
font-normal      /* Core editorial body, navigational links */
font-medium      /* Crisp pricing, dish titles, reservation CTAs */
font-semibold    /* Small module headers, dietary tags, localized labels */
```

### Font Size Scale

```css
text-[10px]      /* Micro-motifs, dietary abbreviations (GF, V) */
text-xs          /* Short ingredient captions, secondary metadata (12px) */
text-sm          /* Crisp pricing, standard navigational links (14px) */
text-base        /* Standard editorial descriptions, short reviews (16px) */
text-lg          /* Menu carousel titles, section subheaders (18px) */
text-2xl         /* Distinctive module headers, large dish names */
text-4xl         /* Secondary page titles, featured editorial hooks */
text-6xl-8xl     /* Oversized split-hero headlines (responsive) */
```

### Letter Spacing & Transforms

```css
tracking-tighter /* Oversized hero headlines to create solid typographic blocks */
tracking-normal  /* Legible, balanced body copy and ingredient lists */
tracking-wide    /* Navigational elements, simple reservation CTAs */
tracking-widest  /* Tiny ceramic tile labels, categorical menu headers */

uppercase        /* Categorical headers (e.g., "ANTIPASTI"), dietary tags, simple CTAs */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Split Hero Headline | 7xl | normal | espresso-900 | tighter | none |
| Menu Category | sm | semibold | glazed-cobalt | widest | uppercase |
| Dish Title | 2xl | medium | espresso-800 | normal | none |
| Ingredient Caption| xs | light | espresso-600 | normal | none |
| Crisp Pricing | sm | medium | pomodoro-red | wide | none |
| Reservation CTA | base | medium | chalk-white | wide | uppercase |

---

## Animation System

### Core Philosophy: The Sunlit Reveal

Animations mimic the gentle progression of natural sunlight and the physical tactile slide of ceramic tiles. Nothing is rushed; everything is elegantly revealed.

### Scroll-Based Reveals

As the user scrolls, sections emerge with a refined, upward drift, unmasking from a clipping path rather than just fading in, mimicking editorial pagination.

```tsx
initial={{ opacity: 0, y: 24, clipPath: 'inset(100% 0 0 0)' }}
whileInView={{ opacity: 1, y: 0, clipPath: 'inset(0% 0 0 0)' }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
```

### Micro-Interactions (The Glaze Reflection)

Hovering over a tile-like menu card produces a slight physical lift and introduces a warm, directional shadow, as if the tile is catching the Mediterranean sun.

```tsx
whileHover={{ 
  y: -4, 
  boxShadow: '4px 12px 24px -8px rgba(139, 69, 19, 0.15)' 
}}
transition={{ type: "spring", stiffness: 400, damping: 25 }}
```

---

## UI Components

### The Split Hero

A defining layout feature. The left side houses an oversized editorial headline and understated navigation on a Chalk White canvas, while the right side bleeds edge-to-edge with location-rich sea or harbor imagery.

```tsx
<section className="flex flex-col lg:flex-row min-h-screen bg-chalk-white">
  <div className="w-full lg:w-1/2 flex flex-col justify-between p-12 lg:p-24">
    <Navigation className="text-espresso-900 tracking-wide" />
    <h1 className="text-7xl font-normal tracking-tighter text-espresso-900 leading-none">
      Taste the Coast.
    </h1>
    <CTA className="bg-pomodoro-red text-chalk-white uppercase" />
  </div>
  <div className="w-full lg:w-1/2 relative overflow-hidden">
    <Image src="/harbor-view.jpg" className="object-cover w-full h-full scale-105" />
  </div>
</section>
```

### Ceramic Menu Carousel

A horizontal scrolling module where items feel like bright, individual ceramic tiles. 

```tsx
<div className="flex gap-6 overflow-x-auto snap-x snap-mandatory py-12 px-8 hide-scrollbar">
  {menuItems.map(item => (
    <div className="snap-center shrink-0 w-80 bg-chalk-white rounded-3xl p-4 border border-chalk-200 shadow-sm hover:shadow-sunlight transition-all duration-300">
      {/* Component details mapped below */}
    </div>
  ))}
</div>
```

### Decorative Thin Rule Lines & Motifs

Delicate structural elements that break up content without adding visual weight, often capped with a tiny illustrative wave or botanical sprig.

```tsx
<div className="flex items-center gap-4 py-8">
  <div className="h-[1px] flex-grow bg-chalk-200" />
  <WaveMotif className="w-4 h-4 text-glazed-cobalt opacity-70" />
  <div className="h-[1px] flex-grow bg-chalk-200" />
</div>
```

---

## Component Catalog

### Menu Cards

Tile-like cards featuring a massive, cropped food image, a crisp title, a short ingredient list, and highly visible pricing.

```tsx
// Artisan Dish Tile
"bg-chalk-white rounded-2xl p-3 border border-chalk-200 shadow-sm flex flex-col gap-3 group hover:-translate-y-1 hover:shadow-sunlight transition-all duration-300"

// Image Wrapper within Tile
"w-full h-64 rounded-xl overflow-hidden bg-lemon-cream relative"

// Crisp Pricing Element
"absolute bottom-3 right-3 bg-chalk-white/90 backdrop-blur px-3 py-1 rounded-full text-pomodoro-red font-medium text-sm shadow-sm"
```

### Buttons

```tsx
// Primary Reservation CTA
"bg-pomodoro-red text-chalk-white font-medium text-sm tracking-wide uppercase rounded-full px-8 py-4 hover:bg-pomodoro-red/90 transition-colors"

// Secondary Outline Action
"border border-glazed-cobalt text-glazed-cobalt font-medium text-sm tracking-wide uppercase rounded-full px-8 py-4 hover:bg-glazed-cobalt hover:text-chalk-white transition-all"
```

### Badges & Dietary Tags

Small, rounded modules utilizing the lighter pastel spectrum of the palette.

```tsx
// Gluten Free Tag
"px-2.5 py-1 text-[10px] font-semibold uppercase tracking-widest rounded-full bg-lemon-cream text-olive-green"

// Vegan Tag
"px-2.5 py-1 text-[10px] font-semibold uppercase tracking-widest rounded-full bg-sky-blue text-glazed-cobalt"
```

### Seamless Ceramic Textures

Applied strictly as macro-backgrounds to give the Chalk White canvas a tactile, real-world feel.

```tsx
// Background Texture Overlay
<div className="absolute inset-0 pointer-events-none opacity-[0.03] bg-[url('/textures/ceramic-glaze.png')] mix-blend-multiply" />
```

---

## Quality Checklist

* [ ] Does the hero section utilize a distinct split layout with edge-to-edge imagery on one side and a Chalk White canvas on the other?
* [ ] Is the primary typography exclusively rendered in Espresso-Black (`text-espresso-900`) for high contrast?
* [ ] Are menu cards styled as bright, rounded ceramic tiles with tightly cropped food photography?
* [ ] Do all interactive shadows have a warm, directional tint (`shadow-sunlight`) rather than standard muddy system grays?
* [ ] Is pricing rendered completely distinct and crisp, ideally in Pomodoro Red or Glazed Cobalt?
* [ ] Have you included thin rule lines (`border-chalk-200`) and small illustrated motifs to separate editorial content gracefully?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast editorial layouts with massive whitespace breathing room.
* Oversized, tightly tracked headlines juxtaposed with tiny, widely tracked labels.
* Bright, sun-baked accent colors (Pomodoro, Cobalt, Olive) used deliberately for CTAs and pricing.
* Beautifully cropped, highly appetizing food and architectural photography.
* Subtle, smooth scroll reveals that mimic flipping through a high-end magazine.

### ✗ Not Allowed

* Dark mode variants or true black backgrounds (breaks the sunny, airy aesthetic).
* Heavy gradients, opaque colored overlays, or sterile flat-gray borders.
* Cartoonish UI vectors instead of high-fidelity artisan photography.
* Complex, heavy navigation bars that distract from the hero photography.
* Standard system box-shadows that look like floating UI; everything must feel grounded or sun-cast.