Cobalt Dusk Artisan Dining

/cobaltDuskArtisanDining
A twilight-inspired design system for elevated culinary interfaces, blending deep cobalt moods, warm accents, and cinematic typography to evoke the ambiance of an upscale evening harbor restaurant.
0 likes
0 bookmarks
Jun 26, 2026
Design System Content
# Cobalt Dusk Artisan Dining

A design language for atmospheric, evening-maritime culinary interfaces.

---

## Philosophy

> "Warmth in the shadows; precision in the plating."

This system creates interfaces that feel like stepping into a dimly lit, high-end harbor restaurant at twilight. The design balances the heavy, moody depths of deep cobalt and twilight gradients with the inviting warmth of candlelight and terracotta. It relies on massive, confident typography and cinematic framing to elevate the dining experience into visual art. 

### Core Beliefs

1. **Cinematic scale** — The interface is a lens. Oversized, immaculate sans-serif typography juxtaposed against moody, edge-to-edge food photography creates dramatic tension.
2. **Atmospheric depth** — Soft grain overlays and warm, diffused shadows simulate low-light dining environments. Flatness is avoided in favor of tactile richness.
3. **Restraint as elegance** — The tomato-red CTA is a flare in the night. It is used with extreme prejudice to guide the primary action—reserving a table or placing an order.
4. **Fluid discovery** — Navigation is compact and unobtrusive. Exploration happens through polished horizontal carousels with physical, momentum-based scrolling.
5. **Tactile boundaries** — Elements are separated by fine, elegant dividers and ceramic-inspired borders that feel crafted rather than coded.

### Strict Rules

* **No Harsh Whites** — Pure blinding `#ffffff` backgrounds are forbidden. Canvas elements use sea-spray neutrals; text relies on a soft flour white.
* **No Cluttered Navigation** — Menus remain hyper-compact. The hero imagery and typography must dominate the viewport.
* **Strict Photographic Direction** — All imagery must feature directional, moody lighting (chiaroscuro). Bright, flatly lit food photography breaks the illusion.
* **No Aggressive Motion** — Animations are cinematic. Framer-style fade-ups and slow, continuous image scaling replace bouncy or fast transitions.

---

## Color Palette

### Evening Maritime & Culinary Scale

The palette establishes a deep, oceanic baseline that allows natural culinary colors to glow. The base canvas is built on cobalt and sea-spray, while text and UI highlights utilize flour white and candlelight warmths.

```css
/* Backgrounds (Darkest to Lightest) */
bg-cobalt-950         /* Main canvas background (#0b1021) */
bg-cobalt-900         /* Secondary panels, header gradients (#121a30) */
bg-seaspray-900/80    /* Default menu card containers, muted zones */
bg-seaspray-800/50    /* Hover states for secondary items, subtle fills */
bg-seaspray-100       /* Light variant backgrounds, inverted sections (#e8ebe9) */

/* Borders & Dividers */
border-seaspray-800   /* Ultra-fine card dividers */
border-cobalt-800     /* Structural layouts */
border-candlelight/20 /* Warm glow borders on hover */
border-white/10       /* Ceramic tile inner borders (glass-like reflections) */

/* Natural Culinary Accents */
text-terracotta-500   /* Warm subheadings, specialty dish markers (#c85a45) */
bg-terracotta-500/10  /* Super subtle background blocks for organic tags */
text-olive-600        /* Freshness indicators, dietary tags (#5b6b45) */
text-candlelight      /* Star ratings, warm ambient highlights (#fcd99a) */

/* The Flare: Restrained Tomato-Red (Primary CTAs) */
bg-tomato-600         /* Primary reservations, checkout buttons (#d93829) */
text-tomato-600       /* Critical interaction text */
hover:bg-tomato-700   /* Deepened primary hover state */

/* Text Hierarchy */
text-flour-50         /* Primary oversized text, hero titles (#fdfcfb) */
text-seaspray-200     /* Secondary text, dish descriptions, body copy */
text-seaspray-400     /* Muted metadata, ingredient notes, timestamps */
text-cobalt-950       /* Text used exclusively on light sea-spray/flour panels */

```

### Destructive Actions (Cancellations)

```css
hover:bg-seaspray-800
hover:text-seaspray-300
border-seaspray-700

```

---

## Typography

Built around high-quality Swiss-style grotesque and neo-grotesque typefaces (Söhne, Neue Montreal, ABC Favorit, Moderat, Diatype, or Suisse Int’l). Headlines are exceptionally large and lightweight, while body copy maintains a steady, calm rhythm.

### Font Weights

```css
font-light       /* Hero headlines, ambient numbers - MANDATORY for cinematic scale */
font-normal      /* Dish descriptions, standard body text */
font-medium      /* Compact navigation items, ingredient lists, prices */
font-semibold    /* Small dietary tags, CTA buttons, location markers */

```

### Font Size Scale

```css
text-[10px]      /* Tiny origin notes, volume metrics */
text-[11px]      /* Dietary badges (Vegan, GF), strict uppercase */
text-sm          /* Ingredient lists, subtle UI instructions (14px) */
text-base        /* Standard dish descriptions (16px) */
text-lg          /* Subheadings, primary navigation links (18px) */
text-2xl         /* Standard menu item titles (24px) */
text-4xl         /* Section breaks (Starters, Mains, Desserts) */
text-7xl-9xl     /* Oversized cinematic hero text (Responsive viewport scaling) */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Oversized hero titles, interlocking letterforms */
tracking-normal  /* Smooth, highly legible body copy */
tracking-wide    /* Compact navigation links, price alignments */
tracking-widest  /* Tiny ingredient prefixes, location tags */

uppercase        /* Navigation, category tags, CTAs, button labels */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Title | 8xl | light | flour-50 | tighter | none |
| Navigation | lg | medium | flour-50 | wide | uppercase |
| Dish Title | 2xl | normal | flour-50 | normal | none |
| Ingredients | sm | medium | seaspray-400 | normal | none |
| Dietary Tags | [11px] | semibold | olive-600 | widest | uppercase |

---

## Animation System

### Core Philosophy: The Cinematic Fade

Motion should feel like an expensive film sequence. Elements reveal themselves through elegant fades and upward drifts. Hover states emulate peering closer into a dimly lit scene.

### Framer-Style Fade-Up (Page Entrances)

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}

```

### Subtle Hover Zooms (Dish Imagery)

When interacting with food photography, the container remains strict while the image itself slowly pushes forward, revealing ingredient notes via opacity shifts.

```tsx
// Image Scale Motion
className="transition-transform duration-700 ease-[cubic-bezier(0.25,0.46,0.45,0.94)] group-hover:scale-105"

// Ingredient Note Reveal
className="opacity-0 transition-opacity duration-500 group-hover:opacity-100"

```

---

## UI Components

### Twilight Gradient & Soft Grain

A standard overlay pattern placed above deep cobalt backgrounds but beneath the photography to create atmospheric blending and physical texture.

```tsx
<div className="absolute inset-0 pointer-events-none mix-blend-overlay opacity-30 bg-[url('/noise.png')]" />
<div className="absolute inset-0 bg-gradient-to-t from-cobalt-950 via-cobalt-950/40 to-transparent" />

```

### Ceramic Tile Border

Used on rounded dish cards and feature modules. It creates a subtle, glass-like reflection on the inner edge of a dark container.

```tsx
className="relative rounded-2xl bg-seaspray-900/40 border border-cobalt-800 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]"

```

### Horizontal Menu Carousel

A polished scrollable track for dish cards. Cards align strictly to the baseline, prices are locked to the right.

```tsx
className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-6 pb-8"

```

---

## Component Catalog

### Cards

Deep, rounded containers featuring moody food photography, precise typography, and aligned pricing.

```tsx
// Standard Dish Card
"group relative flex flex-col w-80 shrink-0 snap-start rounded-2xl overflow-hidden bg-seaspray-900/40 border border-cobalt-800 shadow-2xl transition-colors hover:bg-seaspray-900/60"

// Image Container within Card
"relative w-full aspect-[4/5] overflow-hidden bg-cobalt-900"

// Price Alignment Block
"flex justify-between items-end w-full mt-4 pt-4 border-t border-seaspray-800/50"

```

### Buttons

```tsx
// Primary CTA (Restrained Tomato-Red)
"bg-tomato-600 text-flour-50 font-semibold text-sm uppercase tracking-wide rounded-full px-8 py-4 hover:bg-tomato-700 transition-all duration-300"

// Secondary Ghost Button
"border border-seaspray-700 text-seaspray-200 font-medium text-sm uppercase tracking-wide rounded-full px-8 py-4 hover:border-flour-50 hover:text-flour-50 transition-all duration-300"

```

### Navigation

```tsx
// Compact Horizontal Nav
"flex items-center gap-8 text-sm uppercase tracking-wide font-medium text-seaspray-300"

// Nav Item Hover
"hover:text-flour-50 transition-colors duration-300 relative after:absolute after:-bottom-2 after:left-0 after:h-[1px] after:w-0 after:bg-flour-50 hover:after:w-full after:transition-all after:duration-300"

```

### Badges & Tags

```tsx
// Natural Ingredient / Origin Tag
"px-2.5 py-1 text-[11px] font-semibold uppercase tracking-widest rounded-sm bg-terracotta-500/10 text-terracotta-500"

// Dietary Indicator (Vegan, Gluten-Free)
"px-2.5 py-1 text-[11px] font-semibold uppercase tracking-widest rounded-sm border border-olive-600/30 text-olive-600"

```

### Dividers & Structure

Fine details that anchor the sweeping architecture of the page.

```tsx
// Elegant Section Divider
<div className="w-full h-[1px] bg-gradient-to-r from-transparent via-seaspray-800 to-transparent my-16" />

```

---

## Quality Checklist

* [ ] Does the hero section feature oversized (`text-7xl` or larger) `font-light` typography?
* [ ] Is the primary canvas a deep cobalt or sea-spray neutral rather than pure black or white?
* [ ] Is Tomato-Red used exclusively for primary calls-to-action (e.g., "Reserve a Table")?
* [ ] Do all dish image containers have `overflow-hidden` with a `scale-105` slow hover zoom applied to the `<img>`?
* [ ] Have you applied a subtle noise texture (grain) to the background?
* [ ] Are prices perfectly aligned to the right edge within their respective menu cards?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Dark, moody chiaroscuro food photography.
* Generous, sweeping typography spanning across the grid.
* Soft, warm drop shadows that simulate candlelight.
* Subtle twilight gradients to ensure text legibility over images.
* Momentum-scrolling horizontal carousels.

### ✗ Not Allowed

* Harsh, bright white (`#ffffff`) backgrounds or large blocks of solid white UI.
* Bouncy, spring-based animations or rapid state changes.
* Overuse of the Tomato-Red accent (never use it for standard links or background panels).
* Generic, brightly colored line-icons (use text labels or extremely minimal, refined strokes).
* Heavy, muddy gray drop shadows.