---
name: Atelier Dining & Hospitality
colors:
  surface: '#fbf9f6'
  surface-dim: '#dbdad7'
  surface-bright: '#fbf9f6'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f5f3f0'
  surface-container: '#efeeeb'
  surface-container-high: '#eae8e5'
  surface-container-highest: '#e4e2df'
  on-surface: '#1b1c1a'
  on-surface-variant: '#4b4640'
  inverse-surface: '#30312f'
  inverse-on-surface: '#f2f0ed'
  outline: '#7c766f'
  outline-variant: '#cdc5bd'
  surface-tint: '#605e5c'
  primary: '#000000'
  on-primary: '#ffffff'
  primary-container: '#1d1b1a'
  on-primary-container: '#868381'
  inverse-primary: '#cac6c3'
  secondary: '#7a581c'
  on-secondary: '#ffffff'
  secondary-container: '#ffd087'
  on-secondary-container: '#79571b'
  tertiary: '#000000'
  on-tertiary: '#ffffff'
  tertiary-container: '#291800'
  on-tertiary-container: '#a67c3c'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#e6e1df'
  primary-fixed-dim: '#cac6c3'
  on-primary-fixed: '#1d1b1a'
  on-primary-fixed-variant: '#484645'
  secondary-fixed: '#ffdeae'
  secondary-fixed-dim: '#edbf78'
  on-secondary-fixed: '#281900'
  on-secondary-fixed-variant: '#604103'
  tertiary-fixed: '#ffddb1'
  tertiary-fixed-dim: '#efbe77'
  on-tertiary-fixed: '#291800'
  on-tertiary-fixed-variant: '#614002'
  background: '#fbf9f6'
  on-background: '#1b1c1a'
  surface-variant: '#e4e2df'
typography:
  display-lg:
    fontFamily: Playfair Display
    fontSize: 56px
    fontWeight: '400'
    lineHeight: 64px
    letterSpacing: -0.02em
  display-lg-mobile:
    fontFamily: Playfair Display
    fontSize: 36px
    fontWeight: '400'
    lineHeight: 44px
    letterSpacing: -0.01em
  headline-xl:
    fontFamily: Playfair Display
    fontSize: 40px
    fontWeight: '400'
    lineHeight: 48px
    letterSpacing: -0.01em
  headline-xl-mobile:
    fontFamily: Playfair Display
    fontSize: 28px
    fontWeight: '400'
    lineHeight: 36px
    letterSpacing: 0em
  headline-lg:
    fontFamily: Playfair Display
    fontSize: 30px
    fontWeight: '500'
    lineHeight: 38px
  headline-md:
    fontFamily: Playfair Display
    fontSize: 22px
    fontWeight: '500'
    lineHeight: 30px
  headline-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: '600'
    lineHeight: 24px
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 26px
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 22px
  body-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: '400'
    lineHeight: 18px
  label-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 13px
    fontWeight: '600'
    lineHeight: 18px
    letterSpacing: 0.02em
  label-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 11px
    fontWeight: '600'
    lineHeight: 16px
    letterSpacing: 0.06em
  label-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 10px
    fontWeight: '700'
    lineHeight: 14px
    letterSpacing: 0.08em
  currency-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 15px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
rounded:
  sm: 0.5rem
  DEFAULT: 1rem
  md: 1.5rem
  lg: 2rem
  xl: 3rem
  full: 9999px
spacing:
  gutter: 1.5rem
  gutter-sm: 1rem
  margin: 2.5rem
  margin-sm: 1.25rem
  space-xs: 0.25rem
  space-sm: 0.5rem
  space-md: 1rem
  space-lg: 1.5rem
  space-xl: 2.5rem
---

## Brand & Style

This design system pairs the tactile grace of Michelin-caliber editorial print with the razor-sharp operational ergonomics required by high-velocity hospitality management. The aesthetic bridges two primary touchpoints: the guest-facing digital menu experience (epicurean, sensory, leisurely) and the back-of-house administrative command suite (lucid, dense, decisive).

The brand communicates restraint, discernment, and bespoke craft. It deliberately rejects noisy animations, saturated alert badges, and harsh utilitarian UI tropes in favor of warm, quiet authority. The visual language blends:
- **Warm Editorial Minimalism:** Generous negative space, museum-grade typographic hierarchy, and paper-textured tonal canvas shifts.
- **Modern Executive Precision:** Structured data grids, micro-etched dividers, disciplined layout modules, and subdued state transitions.

Target users span fine-dining proprietors, beverage directors, and floor captains managing inventory and covers in real time, alongside discerning diners experiencing a curated tableside or pre-arrival digital carte.

## Colors

The system establishes an evocative dual-surface architecture: a luminous, parchment-tinted guest presentation mode contrasted against an espresso-grounded administrative control environment.

- **Primary (`#121110`):** Deep charcoal espresso. Used for primary typography in public surfaces, dominant action containers, and primary surfaces in dark management viewports.
- **Secondary (`#C59B58`):** Warm burnished gold. Deployed deliberately for active states, vintage highlights, tasting notes, key curation tags, and focal callouts.
- **Tertiary (`#B08544`):** Deep aged amber. Serves as interactive hover values, tactile micro-accents, pressed states, and secondary visual balances.
- **Neutral Surface Baseline (`#FAF8F5`):** Warm ivory linen. Forms the underlying page canvas, evoking heavy unbleached cotton menu stock.

### Supporting Tone System
- **Sub-Surface Canvas:** `#F4F1EA` (warm alabaster cream for inset cards, table rows, and secondary wells).
- **Hairline Dividers & Framing:** `#E6E1D8` (muted bone linen with low visual vibration).
- **Dark Surface Modules:** `#1E1C1A` (warm obsidian for administrative pods, metric cards, and back-of-house viewports).
- **Dark Surface Hairlines:** `#2D2A26` (charred espresso borders for dark-mode cards and tables).
- **Semantic Signals:** Muted moss green (`#4A6B53`) for table ready/open items, subtle terracotta red (`#A34839`) for 86'd/unavailable items, and soft slate amber (`#D99E32`) for active reservations or pending kitchen courses.

## Typography

Typography governs the dual identity of this system. `Playfair Display` evokes the provenance of printed carte menus, vineyard reserves, and editorial headlining. It must remain untruncated and breathed with open line heights. It is reserved exclusively for major restaurant identity sections, dish names, tasting menu chapters, and prominent administrative dashboard greetings.

`Plus Jakarta Sans` handles all transactional clarity: ingredient pairings, culinary provenance descriptions, dietary identifiers, inventory counts, modifier groups, and data tables.

### Rules of Application
- All uppercase section labels and culinary course markers (`AMUSE-BOUCHE`, `PREMIER`, `CELLAR RESERVE`) must utilize `label-md` or `label-sm` with explicit letter-spacing between `0.06em` and `0.08em`.
- Pricing labels must never use serif fonts; they must render in `currency-md` or `label-lg` using tabular numbers (`font-variant-numeric: tabular-nums`) to align vertically across dish items and administrative balance sheets.
- Line heights on editorial dish descriptions remain generous (`body-md` at `22px`) to ensure optimal readability under dim, ambient dining room lighting conditions.

## Layout & Spacing

The system deploys an adaptable 12-column responsive grid with a dual rhythmic structure:

- **Desktop Operations Suite (>= 1200px):** 12-column structure with `2.5rem` (`margin`) outer offsets and `1.5rem` (`gutter`). Fixed sidebar navigation (width `260px` or collapsed to `72px`) paired with fluid administrative canvas modules.
- **Tablet Service View (768px - 1199px):** 8-column layout with `1.5rem` margins and `1rem` gutters optimized for floor management tablets, order dispatch stations, and wine list browsing.
- **Mobile Guest Menu (< 768px):** 4-column layout with `1.25rem` (`margin-sm`) canvas boundaries. Content stacks vertically with deliberate whitespace between course sections to preserve editorial luxury.

### Spacing Scale & Rhythm
- Spacing relies on a base 8px increment system supplemented by 4px micro-steps (`space-xs`).
- Section separations within digital menu books require intentional room: dishes within a single course sit apart by `space-md` (`1rem`), while distinct courses (`Entrées` to `Desserts`) transition across `space-xl` (`2.5rem`).
- Table layout densities in SaaS viewports default to comfortable padded lines (`0.75rem` vertical cell padding) with a dense toggle (`0.5rem`) for high-volume service shifts.

## Elevation & Depth

Spatial depth avoids synthetic heavy dropshadows in favor of tactile surfaces, whisper-thin borders, and warm ambient luminescence.

### 1. Ghost Border Layering
Surfaces default to structural containment through subtle lines rather than elevation. In light mode, containers leverage a 1px border of `#E6E1D8`. In dark operations mode, surfaces frame in 1px `#2D2A26`.

### 2. Warm Ambient Shadow (Level 1)
Applied to elevated menu cards, active category pills, and dropdown selectors:
- `box-shadow: 0 4px 20px -2px rgba(18, 17, 16, 0.04), 0 2px 6px -1px rgba(18, 17, 16, 0.02)`

### 3. Floated Surface & Overlay (Level 2)
Applied to tableside modifier trays, wine vintage filter sheets, and administrative modals:
- `box-shadow: 0 12px 36px -4px rgba(18, 17, 16, 0.08), 0 4px 12px -2px rgba(18, 17, 16, 0.04)`
- Paired with an editorial frosted overlay: `background: rgba(18, 17, 16, 0.45); backdrop-filter: blur(8px);`

### 4. Back-of-House Dark Elevation
For the administrative cards (`#1E1C1A`), stacked elements rely on tonal surface lightening (`#262320` for nested sub-cards or hover rows) rather than drop shadows, maintaining crisp contrast against the `#121110` workspace background.

## Shapes

The shape architecture centers on high-tactile refinement. Structural content carriers (menu containers, data panels, administrative tables, dish image wrappers) use deliberate micro-radii to maintain discipline and architectural structure, while interactive elements leverage full pill profiles (`roundedness: 3`) to evoke polished physical artifacts.

- **Primary & Secondary Action Controls:** Full pill geometry (`rounded-full` / 9999px) delivering soft, smooth touch targets suitable for finger tapping on floor devices or guest mobile screens.
- **Badges, Vintage Years, & Diet Tags:** Pill silhouettes (`rounded-full`) that cradle typography with proportional horizontal padding.
- **Card Containers & Modules:** Soft architectural radius (`0.5rem` to `0.75rem`) preventing the interface from feeling clinical or sharp.
- **Dish Photography & Imagery:** Cropped with subtle `0.5rem` corners or displayed as pristine full-bleed rectangles with hairline interior frames.

## Components

### Buttons
- **Primary Pill:** Background `#121110`, text `#FAF8F5`, hairline gold interior halo on hover (`box-shadow: inset 0 0 0 1px #C59B58`). Fully rounded pill shape.
- **Gold Accent Pill:** Background `#C59B58`, text `#121110`, transitioning to `#B08544` on active press. Reserved for high-value conversions ("Reserve Table", "Order Tasting Pairings", "Confirm Service").
- **Secondary Ghost Pill:** Background transparent, border 1px solid `#E6E1D8`, text `#121110`. Hover invokes background `#F4F1EA`.
- **Admin Mini Actions:** Subdued dark pills (`#1E1C1A` with border 1px solid `#2D2A26`, text `#FAF8F5`).

### Dish & Product Cards
- **Editorial Menu Row:** Borderless or separated by hairline `#E6E1D8`. Features the dish title in `headline-md` (`Playfair Display`), dot leader or right-aligned price in `currency-md`, followed by component descriptions in `body-md` (`Plus Jakarta Sans`).
- **Showcase Dish Card:** Clean parchment surface (`#FAF8F5`), 1px `#E6E1D8` border, subtle 16:10 ratio photograph with soft radius, dietary pill badges pinned at bottom-left, price anchored at top-right.

### Chips & Dietary Badges
- Compact pill geometries with heights of 24px to 28px.
- **Dietary Tags (GF, V, VG, NF):** Background `#F4F1EA`, border 1px solid `#E6E1D8`, text `#121110`, uppercase `label-sm`.
- **Sommelier Selection / Reserve Pick:** Background `rgba(197, 155, 88, 0.12)`, border 1px solid `#C59B58`, text `#B08544`.

### Input Fields & Selectors
- Background `#FFFFFF` (guest views) or `#1E1C1A` (admin views).
- Border 1px solid `#E6E1D8` (admin: `#2D2A26`).
- Height 44px for high touch accessibility.
- Focus state: Border transitions to `#C59B58` with no loud glow rings; utilizes a faint 2px ambient amber whisper ring (`rgba(197, 155, 88, 0.18)`).
- Typography: `body-md` with placeholder text in warm stone tone (`#8C857B`).

### Checkboxes, Radios, & Switches
- **Radios & Checkboxes:** Unchecked state defined by 1.5px border `#E6E1D8`. Checked state fills `#121110` with gold accent tick mark (`#C59B58`).
- **Hospitality Toggle Switch:** 20px height pill track; inactive track `#E6E1D8`, active track `#121110`. The toggle knob is cream `#FAF8F5`, sliding smoothly with a warm micro-shadow.

### Admin Data Tables & Kitchen Station Queues
- **Header:** Sticky top, uppercase `label-md` in stone charcoal (`#59544D`), background `#FAF8F5` or dark `#121110`.
- **Row Architecture:** Subtle bottom divider `#E6E1D8` (dark: `#2D2A26`). Alternating or hover tint using `#F4F1EA` (dark: `#262320`).
- **Live Status Indicators:** 6px solid circular pips:
  - *Seated / Active:* `#4A6B53` (Moss)
  - *86'd / Depleted:* `#A34839` (Terracotta)
  - *Reserved / Firing:* `#D99E32` (Gold)