menu/docs/design/stitch/atelier-dining-hospitality.md at c2e499ad8774436c73950c55adabdd95d9cfe8d8

tanshu/menu

0 Fork 0

Files

T

tanshu b13042f0db Adopt the Stitch design system

Google Stitch produced an Atelier Dining & Hospitality system for this app: warm
ivory linen and espresso for the guest surfaces, burnished gold for the single
active thing, Playfair Display for the restaurant's voice and Plus Jakarta Sans
for everything transactional, editorial rows with dot leaders, pill controls,
hairline containment instead of drop shadows. The four screens and the system
document are kept in docs/design/stitch/ as the source.

Both fonts are now self-hosted with their licences, the guest stylesheet is
rebuilt on the system, and the admin is the same system in its dark mode
(espresso workspace, obsidian pods, gold actions) by overriding the same tokens
at a higher specificity, since the per-Site theme is injected inline after the
stylesheets. The Site theme in config/ moves to the system's palette, which is
where per-Site branding belongs; the old Archivo font is dropped.

2026-09-22 23:07:38 +05:30

13 KiB

Raw Blame History

name, colors, typography, rounded, spacing

name

colors

typography

rounded

spacing

Atelier Dining & Hospitality

surface	surface-dim	surface-bright	surface-container-lowest	surface-container-low	surface-container	surface-container-high	surface-container-highest	on-surface	on-surface-variant	inverse-surface	inverse-on-surface	outline	outline-variant	surface-tint	primary	on-primary	primary-container	on-primary-container	inverse-primary	secondary	on-secondary	secondary-container	on-secondary-container	tertiary	on-tertiary	tertiary-container	on-tertiary-container	error	on-error	error-container	on-error-container	primary-fixed	primary-fixed-dim	on-primary-fixed	on-primary-fixed-variant	secondary-fixed	secondary-fixed-dim	on-secondary-fixed	on-secondary-fixed-variant	tertiary-fixed	tertiary-fixed-dim	on-tertiary-fixed	on-tertiary-fixed-variant	background	on-background	surface-variant
#fbf9f6	#dbdad7	#fbf9f6	#ffffff	#f5f3f0	#efeeeb	#eae8e5	#e4e2df	#1b1c1a	#4b4640	#30312f	#f2f0ed	#7c766f	#cdc5bd	#605e5c	#000000	#ffffff	#1d1b1a	#868381	#cac6c3	#7a581c	#ffffff	#ffd087	#79571b	#000000	#ffffff	#291800	#a67c3c	#ba1a1a	#ffffff	#ffdad6	#93000a	#e6e1df	#cac6c3	#1d1b1a	#484645	#ffdeae	#edbf78	#281900	#604103	#ffddb1	#efbe77	#291800	#614002	#fbf9f6	#1b1c1a	#e4e2df

display-lg

display-lg-mobile

headline-xl

headline-xl-mobile

headline-lg

headline-md

headline-sm

body-lg

body-md

body-sm

label-lg

label-md

label-sm

currency-md

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Playfair Display	56px	400	64px	-0.02em

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Playfair Display	36px	400	44px	-0.01em

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Playfair Display	40px	400	48px	-0.01em

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Playfair Display	28px	400	36px	0em

fontFamily	fontSize	fontWeight	lineHeight
Playfair Display	30px	500	38px

fontFamily	fontSize	fontWeight	lineHeight
Playfair Display	22px	500	30px

fontFamily	fontSize	fontWeight	lineHeight
Plus Jakarta Sans	18px	600	24px

fontFamily	fontSize	fontWeight	lineHeight
Plus Jakarta Sans	16px	400	26px

fontFamily	fontSize	fontWeight	lineHeight
Plus Jakarta Sans	14px	400	22px

fontFamily	fontSize	fontWeight	lineHeight
Plus Jakarta Sans	12px	400	18px

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Plus Jakarta Sans	13px	600	18px	0.02em

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Plus Jakarta Sans	11px	600	16px	0.06em

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Plus Jakarta Sans	10px	700	14px	0.08em

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Plus Jakarta Sans	15px	600	20px	0.01em

sm	DEFAULT	md	lg	xl	full
0.5rem	1rem	1.5rem	2rem	3rem	9999px

gutter	gutter-sm	margin	margin-sm	space-xs	space-sm	space-md	space-lg	space-xl
1.5rem	1rem	2.5rem	1.25rem	0.25rem	0.5rem	1rem	1.5rem	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)

13 KiB Raw Blame History