Charcoal Oven Noir Design System

/charcoalOvenNoirDesignSystem
A moody, tactile design system for luxury hospitality—centered on cinematic contrasts, textural depth, organic warmth, and slow, atmospheric interactions reminiscent of a high-end wood-fired dining experience.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Charcoal Oven Noir Design System

A design language for moody, premium hospitality interfaces.

---

## Philosophy

> "Shadow shapes the atmosphere; fire brings it to life."

This system creates interfaces that emulate a high-end, wood-fired dining experience—intimate, cinematic, and deeply tactile. The design relies on dramatic contrast, rich textural depths, and restrained luxury to guide the user through a digital space that feels physically warm and atmospherically dense.

### Core Beliefs

1. **Cinematic Contrast** — The canvas is overwhelmingly dark, absorbing light to allow deliberate focal points—like glowing imagery and crisp typography—to command attention.
2. **The Hero is the Craft** — Full-bleed photography of darkened ovens, raw dough, or intimate dining rooms anchors the aesthetic. Gradients are meticulously controlled to blend photography seamlessly into the interface.
3. **Editorial Typography** — Large, highly readable, semibold serif headlines provide a classic, expensive feel, juxtaposed against sharp, structural sans-serif utility text.
4. **Restrained Warmth** — Accents are not system alerts; they are literal heat sources. Ember and oxblood draw the eye naturally without breaking the sophisticated ambiance.
5. **Deliberate Pacing** — Interactions and page loads mirror the slow burn of embers. Animations are unhurried, smooth, and gracefully ease into place.

### Strict Rules

* **No Stark Whites** — Pure `#FFFFFF` shatters the intimate atmosphere. Text and bright elements must rely on warm cream tones.
* **No High-Frequency Spring Animations** — Bouncy, fast transitions feel cheap and technical. Motion must feel like a slow, cinematic camera pan or a gentle fade.
* **No Heavy Box Shadows** — Depth is achieved through soft, ambient glows and subtle background lighting shifts, never through harsh, drop-shadow borders.
* **No Flat Neon Accents** — Accent colors must feel organic and rooted in nature (fire, wood, clay).

---

## Color Palette

### The Noir & Earth Scale

The foundational palette consists of deep charcoal blacks and rich smoked browns, serving as the immersive canvas. Warm creams provide legibility, while embers and olives provide life.

```css
/* Backgrounds & Canvas (Darkest to Lightest) */
bg-charcoal-950       /* Deepest canvas, primary app background (#111111) */
bg-charcoal-900       /* Secondary sections, subtle contrast bases (#181818) */
bg-smoked-900         /* Earthy dark panels, reservation block containers (#221C1A) */
bg-smoked-800         /* Hover states for interactive menu rows (#302724) */
bg-charcoal-800/50    /* Semi-transparent overlays for high-end glass effects */

/* Borders */
border-charcoal-800   /* Default low-contrast structural dividers */
border-smoked-700     /* Subtle ingredient story frames */
border-ember-900/40   /* Focused or highlighted editorial borders */
border-olive-900      /* Muted boundaries for secondary meta-information */

/* The Heat: Embers & Oxblood (Accents) */
bg-ember-500          /* Primary call-to-action fills, reservation buttons (#E65C00) */
text-ember-500        /* Warm hover text, active menu anchors */
border-ember-500      /* Active input states, selective underline highlights */
bg-oxblood-700        /* Secondary deep emphasis, featured story tags (#7A2021) */
text-oxblood-500      /* Subtle romantic highlights, sub-headings */

/* Text Hierarchy (Warm Creams & Earths) */
text-cream-50         /* Primary hero headlines, high-contrast values (#FDFBF7) */
text-cream-200        /* Core body copy, editorial paragraphs (#EFEBE1) */
text-cream-400        /* Muted descriptions, ingredient lists (#D1CBB8) */
text-olive-400        /* Nuanced metadata, dietary tags, timestamps (#8A8D7B) */
text-smoked-500       /* Disabled states, background watermarks (#6B5E59) */
```

### Destructive Actions

```css
hover:bg-oxblood-900/50
hover:text-oxblood-400
hover:border-oxblood-800
```

---

## Typography

A meticulous pairing of cinematic, expressive Serifs (e.g., *Domaine Display, Tiempos Headline, Signifier*) with highly structural Sans-Serifs (e.g., *Neue Montreal, Geist*). 

### Font Weights

```css
font-normal      /* Core sans-serif body copy, ingredient stories */
font-medium      /* UI navigational text, reservation button labels */
font-semibold    /* MANDATORY for Serif hero headlines to create cinematic presence */
font-bold        /* Strictly forbidden — undermines the elegant restraint of the system */
```

### Font Size Scale

```css
text-[10px]      /* Micro sans tags, dietary indicators (V, GF) */
text-xs          /* Form labels, footer links (12px) */
text-sm          /* Body copy for utility interfaces, menus (14px) */
text-base        /* Ingredient descriptions, review quotes (16px) */
text-xl          /* Sub-section headers, editorial intro paragraphs (20px) */
text-3xl         /* Editorial menu row titles, reservation blocks (30px) */
text-5xl         /* Standard page headers, secondary article titles (48px) */
text-7xl-9xl     /* Full-bleed hero headlines, massive cinematic type (Responsive) */
```

### Letter Spacing & Transforms

```css
tracking-tighter /* Massive serif headlines, tightening the elegant curves */
tracking-normal  /* Default reading text in sans-serif */
tracking-wide    /* Navigational links, secondary button texts */
tracking-widest  /* Tiny sans-serif tags ("RESERVATIONS", "WOOD-FIRED") */

uppercase        /* Micro tags, navigational top-level links, CTAs */
```

### Hierarchy Examples

| Element | Size | Font Family | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Hero Headline | 8xl | Serif | semibold | cream-50 | tighter | none |
| Menu Item Title | 3xl | Serif | semibold | cream-200 | normal | none |
| Ingredient Body | base | Sans | normal | cream-400 | normal | none |
| Primary CTA | sm | Sans | medium | cream-50 | wide | uppercase |
| Dietary Tags | [10px] | Sans | medium | olive-400 | widest | uppercase |

---

## Animation System

### Core Philosophy: The Slow Burn

Motion in Charcoal Oven Noir mimics the slow, deliberate nature of ambient restaurant lighting or firelight. Elements fade and gently drift into place, entirely avoiding mechanical, spring-based snapping.

### Page Transitions (The Cinematic Fade)

```tsx
initial={{ opacity: 0, scale: 0.98, filter: 'brightness(0.5)' }}
animate={{ opacity: 1, scale: 1, filter: 'brightness(1)' }}
transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }} /* Slow, elegant ease-out */
```

### Hover Interactions (The Ember Glow)

When hovering over interactive elements, rather than sharp border changes, the element receives a soft, warm glow and a slow transition.

```tsx
whileHover={{ backgroundColor: '#302724', textShadow: '0px 0px 8px rgba(230, 92, 0, 0.4)' }}
transition={{ duration: 0.4, ease: "easeInOut" }}
```

---

## UI Components

### Controlled Gradient Overlay

Essential for hero photography to ensure the semibold serif typography remains highly readable without dampening the underlying craft photography.

```tsx
<div 
  className="absolute inset-0 bg-gradient-to-t from-charcoal-950 via-charcoal-950/60 to-transparent"
/>
```

### The Soft Glow Panel

Used for the wide horizontal menu or reservation panel beneath the hero image. It sits against the dark canvas, illuminated gently from behind.

```tsx
<div className="w-full max-w-7xl mx-auto bg-charcoal-900 border border-charcoal-800 shadow-[0_0_40px_rgba(230,92,0,0.03)] rounded-sm p-8" />
```

### Cinematic Dimming Pattern (List Focus)

When scanning editorial menu rows, hovering over one item gently drops the opacity of the rest of the list, directing singular focus to the highlighted dish.

```tsx
const isDimmed = hoveredDishId !== null && hoveredDishId !== dish.id;

className={cn(
    "transition-opacity duration-700 ease-in-out border-b border-charcoal-800 py-6",
    isDimmed ? "opacity-30" : "opacity-100"
)}
```

---

## Component Catalog

### Cards & Editorial Rows

Low contrast borders, flat deep backgrounds, designed to look like editorial print on dark luxury paper.

```tsx
// Editorial Menu Row
"flex items-baseline justify-between py-6 border-b border-charcoal-800 hover:bg-smoked-900 transition-colors duration-500 cursor-pointer px-4"

// Review / Ingredient Story Block
"bg-charcoal-900 border border-smoked-700 rounded-sm p-8 flex flex-col gap-4 shadow-2xl"
```

### Buttons & CTAs

```tsx
// Primary Action (The Ember Fill)
"bg-ember-500 text-cream-50 font-medium text-xs tracking-wide uppercase px-8 py-4 rounded-none hover:bg-ember-600 transition-colors duration-300 shadow-[0_4px_20px_rgba(230,92,0,0.2)]"

// Elegant Slim Bordered Button
"bg-transparent border border-charcoal-800 text-cream-200 font-medium text-xs tracking-wide uppercase px-8 py-4 rounded-none hover:border-cream-400 hover:text-cream-50 transition-all duration-500"

// Understated Text Link
"text-cream-400 font-medium text-xs tracking-widest uppercase pb-1 border-b border-transparent hover:border-ember-500 hover:text-cream-50 transition-all duration-300"
```

### Inputs & Reservations Blocks

```tsx
// Cinematic Form Input
"w-full bg-transparent border-b border-charcoal-800 py-3 text-cream-50 font-sans text-base placeholder-smoked-500 focus:outline-none focus:border-ember-500 transition-colors duration-300 rounded-none"

// Date/Time Select Trigger
"flex items-center justify-between w-full bg-smoked-900 border border-charcoal-800 px-6 py-4 text-cream-200 hover:border-smoked-700 transition-all duration-300"
```

### Badges & Dietary Indicators

```tsx
// Muted Olive Tag (Metadata)
"px-2 py-1 text-[10px] font-sans font-medium uppercase tracking-widest bg-olive-900/30 text-olive-400 border border-olive-900/50"

// Oxblood Highlight Tag (Chef's Special)
"px-2 py-1 text-[10px] font-sans font-medium uppercase tracking-widest bg-oxblood-900/40 text-oxblood-400 border border-oxblood-800/50"
```

---

## Quality Checklist

* [ ] Is the primary hero image a full-bleed, darkened photograph (oven, dining room, dough) with a proper `from-charcoal-950` gradient overlay?
* [ ] Do all primary headlines use the designated Serif font with `font-semibold` and `tracking-tighter`?
* [ ] Are all background colors strictly mapped to the Charcoal and Smoked scales (no pure black `#000000`)?
* [ ] Did you avoid all rounded button corners (`rounded-none` or `rounded-sm` at maximum)?
* [ ] Are hover interactions utilizing slow transitions (`duration-300` to `duration-700`)?
* [ ] Does the UI strictly limit bright colors to Ember Orange and Oxblood Tomato for interactive warmth?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Moody, dark-themed canvases relying on charcoal and smoked brown values.
* Massive, highly-legible serif typography for hero sections and main titles.
* Ultra-clean sans-serif typography for descriptions, tags, and small UI elements.
* Warm cream tones for text to preserve the organic, intimate atmosphere.
* Slow, fading, and cinematic scale transitions.

### ✗ Not Allowed

* Pure white (`#FFFFFF`) text or backgrounds.
* Harsh, heavy drop shadows on floating elements (use subtle glow shadows instead).
* Bouncy, spring-physics animations.
* Sans-serif fonts used for primary page headlines.
* Bright, synthetic UI colors like electric blue, neon green, or pure red.