Dusk Ceramic Kitchen Editorial Design System

/duskCeramicKitchenEditorialDesignSystem
An immersive design system merging tactile editorial aesthetics and coastal dining atmospheres, evoking ceramic warmth, large-format photography, and slow animations for premium culinary digital experiences.
0 likes
0 bookmarks
Jun 26, 2026
Design System Content
# Dusk Ceramic Kitchen Editorial Design System

A design language for world-class, atmospheric culinary interfaces.

---

## Philosophy

> "Light shapes the stone; ingredients shape the space."

This system creates interfaces that feel like a high-end physical publication merged with a coastal dining experience. It evokes the tactile elegance of blue ceramic tiles, evening shoreline light, artisan dough, and candlelit stone interiors. The design must feel incredibly immersive, relying on large-format photography, disciplined typographic pairings, and atmospheric depth rather than standard digital UI patterns.

### Core Beliefs

1. **Editorial over digital** — Layouts should mimic premium food and architecture magazines. Use generous image crops, asymmetrical balance, and thin, structural rules.
2. **Materiality brings warmth** — Subtle paper grain textures and tile-fragment motifs replace standard digital drop shadows and rounded containers.
3. **Pacing through space** — A spacious hero and minimal navigation force the user to slow down and absorb the visual texture of the food and environment.
4. **Confident stillness** — Animations are slow, smooth, and deliberate. Transitions should feel like an evening shadow shifting across a dining room table.
5. **The photography does the heavy lifting** — UI elements step back. Large food photography and right-aligned coastal image panels dictate the structure of the grid.

### Strict Rules

* **Typographic Duality** — You must strictly pair a high-contrast serif (Canela, Tiempos, Signifier, or Reckless Neue) with a stark, utilitarian sans-serif (ABC Favorit, Söhne, Untitled Sans, or Roobert).
* **No Drop Shadows** — Depth is created through image placement, thin rules (`1px` borders), and paper grain overlaps.
* **No Bubbly Radii** — Corner radii are sharp (`0px`) or extremely subtle (`2px`) to mimic cut stone and ceramic tiles.
* **Muted Backgrounds** — Absolute white (`#FFFFFF`) is forbidden. The canvas must always be a warm Ceramic White or Limestone Beige.

---

## Color Palette

### The Atmospheric Scale

The palette transitions from the warmth of an artisan kitchen to the cool stillness of an evening shoreline. Elements rest on warm stones and are punctuated by deep inks and vibrant culinary accents.

```css
/* Canvas & Architecture (Backgrounds) */
bg-ceramic-white      /* Main canvas background, warm & creamy (#F9F8F6) */
bg-limestone-beige    /* Secondary panels, location section backdrop (#EBE7E0) */
bg-sea-glass-gray/10  /* Subtle container fills, inactive carousel items */
bg-sea-glass-gray/20  /* Hover states for secondary UI elements */

/* Structural Borders */
border-sea-glass-gray /* Default thin rules, grid lines, dividers (#B4B8B9) */
border-charcoal-ink   /* Strong editorial dividers, primary focus outlines */
border-dusk-blue      /* Active carousel borders, tile fragment accents */

/* Typography */
text-charcoal-ink     /* Primary text, hero headlines, heavy editorial (#2A2C2B) */
text-dusk-blue        /* Secondary headers, atmospheric captions (#4A6B82) */
text-sea-glass-gray   /* Muted metadata, subtle dietary tags, footer links */

/* Culinary & Evening Accents */
bg-roasted-tomato     /* Confident primary CTAs (Reservations/Orders) (#C85C41) */
text-roasted-tomato   /* Urgent alerts, sold-out indicators */
bg-dusk-blue          /* Secondary CTAs, deep evening panels */
text-basil-olive      /* Vegetarian/Organic markers, subtle positive states (#73795C) */
border-lemon-gold     /* Micro accents, hairline active states, star ratings (#DEB86A) */
text-lemon-gold       /* Micro typographic highlights */

```

### Destructive/Unavailable Actions

```css
opacity-50
line-through
text-sea-glass-gray
hover:text-roasted-tomato

```

---

## Typography

A strict dance between expressive, high-contrast serifs (Hero text, story framing) and disciplined, Swiss-style sans-serifs (CTAs, metadata, navigation).

### Font Families

```css
font-serif       /* Canela, Tiempos, Signifier, or Reckless Neue */
font-sans        /* ABC Favorit, Söhne, Untitled Sans, or Roobert */

```

### Font Weights

```css
font-light       /* Hero serif headlines, elegant editorial pull-quotes */
font-normal      /* Core serif body copy, sans-serif UI labels */
font-medium      /* Confident sans-serif CTAs, active menu tabs */
/* font-bold is strictly forbidden — use font-medium sans or scale increases instead */

```

### Font Size Scale

```css
text-[10px]      /* Micro accents, lemon-gold dietary badges, image credits */
text-xs          /* Minimal navigation links, carousel elegant captions (12px) */
text-sm          /* Body copy for location atmosphere, button labels (14px) */
text-base        /* Standard editorial paragraphs (16px) */
text-xl          /* Secondary carousel item titles (20px) */
text-3xl         /* Section headers (Menu, Location) (30px) */
text-5xl         /* Primary coastal image panel overlays (48px) */
text-7xl-9xl     /* Spacious hero headlines (Responsive, ultra-large display) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large serif hero headlines to tightly pack letterforms */
tracking-normal  /* Default reading flow */
tracking-widest  /* All sans-serif micro-typography and minimal navigation */

uppercase        /* Sans-serif navigation, CTAs, location pins, metadata */
capitalize       /* Serif elegant captions and menu items */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Hero Title | Serif | 8xl | light | charcoal-ink | tight | none |
| Navigation | Sans | xs | medium | charcoal-ink | widest | uppercase |
| Menu Caption | Serif | xl | normal | dusk-blue | normal | capitalize |
| Primary CTA | Sans | sm | medium | ceramic-white| widest | uppercase |
| Micro Accent | Sans | [10px]| normal | lemon-gold | widest | uppercase |

---

## Animation System

### Core Philosophy: Framer-Level Stillness

Movements mimic physical optics—slowly zooming camera lenses, gentle fading of evening light, and the fluid but grounded shift of sliding a ceramic plate across a table.

### Page Transitions (The Evening Fade)

```tsx
initial={{ opacity: 0, filter: 'blur(12px)', scale: 1.02 }}
animate={{ opacity: 1, filter: 'blur(0px)', scale: 1 }}
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}

```

### Refined Hover Zooms (Image Panels & Carousel)

Images slowly expand within strict, unmoving clipped containers. 

```tsx
// Container
className="overflow-hidden border border-sea-glass-gray/30"

// Image Asset
className="transition-transform duration-700 ease-out hover:scale-105"

```

### Carousel Drag & Snap

```tsx
drag="x"
dragConstraints={{ right: 0, left: -1200 }}
transition={{ type: "spring", stiffness: 200, damping: 40 }}

```

---

## UI Components

### Paper Grain Overlay

A mandatory fixed layer that applies a physical, tactile finish to the crisp editorial layout, blending the UI elements together visually.

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

```

### Tile Fragments

Subtle 4x4 pixel squares or hairline right-angle braces used at the corners of vast image panels, evoking ceramic tile work.

```tsx
<div className="absolute top-0 left-0 w-2 h-2 border-t border-l border-dusk-blue" />
<div className="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-dusk-blue" />

```

### Thin Rules

Sections are divided by hairline rules rather than white space alone. This reinforces the blueprint/magazine structure.

```tsx
<hr className="w-full border-t border-sea-glass-gray/40 my-16" />

```

---

## Component Catalog

### Hero Section

A massive, deeply atmospheric introduction.
```tsx
<section className="relative min-h-[90vh] flex flex-col justify-between bg-ceramic-white p-8">
  <nav className="flex justify-between items-center text-xs uppercase tracking-widest font-sans border-b border-sea-glass-gray pb-4">
    {/* Minimal Navigation */}
  </nav>
  <div className="flex-grow flex items-center justify-center">
    <h1 className="font-serif text-8xl text-charcoal-ink tracking-tight">Dusk & Dough</h1>
  </div>
  <div className="grid grid-cols-2 gap-8 h-64">
    {/* Large Food Photography */}
    <div className="bg-limestone-beige overflow-hidden relative">
      <img src="..." className="w-full h-full object-cover hover:scale-105 transition-transform duration-700" />
    </div>
    {/* Secondary Coastal Image Panel */}
    <div className="bg-dusk-blue overflow-hidden relative">
      <img src="..." className="w-full h-full object-cover opacity-80 mix-blend-luminosity hover:scale-105 transition-transform duration-700" />
    </div>
  </div>
</section>
```

### Horizontal Menu Carousel

Generous image crops pushed right up to the thin borders, supported by elegant typography underneath.

```tsx
<div className="flex gap-6 overflow-x-auto snap-x snap-mandatory py-12 px-8 hide-scrollbar border-b border-sea-glass-gray">
  <article className="min-w-[300px] snap-center group cursor-pointer">
    <div className="aspect-[4/5] overflow-hidden mb-4 relative">
      {/* Tile Fragments */}
      <div className="absolute top-0 left-0 w-2 h-2 border-t border-l border-lemon-gold opacity-0 group-hover:opacity-100 transition-opacity z-10" />
      <img src="..." className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" />
    </div>
    <h3 className="font-serif text-xl text-charcoal-ink capitalize">Wild Fennel Sourdough</h3>
    <p className="font-sans text-[10px] uppercase tracking-widest text-basil-olive mt-2">Artisan Starter — $12</p>
  </article>
</div>
```

### Location Immersive Section

```tsx
<section className="grid grid-cols-12 gap-0 border-b border-sea-glass-gray bg-limestone-beige">
  <div className="col-span-5 p-16 flex flex-col justify-center">
    <h2 className="font-serif text-4xl text-charcoal-ink mb-6">The Stone Room</h2>
    {/* Atmospheric Copy */}
    <p className="font-serif text-base text-charcoal-ink/80 leading-relaxed">
      ...
    </p>
  </div>
  {/* Right-aligned Street-front Photograph */}
  <div className="col-span-7 aspect-square overflow-hidden border-l border-sea-glass-gray">
    <img src="..." className="w-full h-full object-cover" />
  </div>
</section>
```

### Confident CTAs (Buttons)

```tsx
// Reservation / Order Action (Primary)
"bg-roasted-tomato text-ceramic-white font-sans text-xs uppercase tracking-widest px-8 py-4 hover:bg-charcoal-ink transition-colors duration-500 rounded-none"

// Secondary Action
"border border-charcoal-ink text-charcoal-ink font-sans text-xs uppercase tracking-widest px-8 py-4 hover:bg-charcoal-ink hover:text-ceramic-white transition-colors duration-500 rounded-none bg-transparent"

```

---

## Quality Checklist

* [ ] Is the primary typeface pairing strictly enforced (Serif for display, Sans for UI/metadata)?
* [ ] Do all interactive image containers implement the `duration-700 hover:scale-105` slow zoom?
* [ ] Is the absolute white (`#FFFFFF`) removed entirely and replaced with `ceramic-white` or `limestone-beige`?
* [ ] Are all borders and dividers `1px` thin rules using `sea-glass-gray` or `charcoal-ink`?
* [ ] Are structural boxes completely devoid of drop shadows?
* [ ] Is the global paper grain overlay active and set to `mix-blend-multiply`?
* [ ] Do the active states or critical tags utilize the `lemon-gold` micro accents?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Ultra-thin `1px` grid structures bounding elements and stretching across the viewport.
* Stark asymmetry, large blocks of negative `ceramic-white` space balancing heavy photography.
* Bleeding large food photography out to the absolute edges of its container box.
* The exclusive use of uppercase, wide-tracked sans-serifs for all interactive wayfinding.
* Slow, buttery Framer-style spring animations for carousels.

### ✗ Not Allowed

* Standard rounded buttons (`rounded-md`, `rounded-full`). All boundaries must mimic cut tile/stone (`rounded-none` or `rounded-sm`).
* Heavy black drop shadows to separate cards from the background.
* Fast, jerky animations (anything under `500ms` for image states is generally discouraged).
* Mixing serif and sans-serif fonts within the same single line of text.
* Centered, symmetrical text alignments for long paragraphs (keep it structurally left-aligned like a magazine column).