---
version: alpha
name: Russet Tasting
description: "Magazine-style restaurant UI: Bricolage Grotesque headlines, sienna actions on cool grey-blue neutrals, spacious layout."
colors:
  background: "#f5f7fa"
  foreground: "#141a24"
  card: "#ffffff"
  card-foreground: "#141a24"
  popover: "#ffffff"
  popover-foreground: "#141a24"
  primary: "#a95419"
  primary-foreground: "#ffffff"
  secondary: "#eaeef3"
  secondary-foreground: "#222936"
  muted: "#eaeef3"
  muted-foreground: "#475165"
  accent: "#fbe7d6"
  accent-foreground: "#4d2306"
  destructive: "#b82a5f"
  destructive-foreground: "#ffffff"
  success: "#1d6439"
  success-foreground: "#ffffff"
  warning: "#f9e195"
  warning-foreground: "#412d07"
  border: "#d6dde6"
  input: "#b8c2cf"
  ring: "#cf6d2c"
  dark-background: "#141a24"
  dark-foreground: "#f5f7fa"
  dark-card: "#222936"
  dark-card-foreground: "#f5f7fa"
  dark-popover: "#222936"
  dark-popover-foreground: "#f5f7fa"
  dark-primary: "#e48a4f"
  dark-primary-foreground: "#2e1403"
  dark-secondary: "#343c4d"
  dark-secondary-foreground: "#eaeef3"
  dark-muted: "#343c4d"
  dark-muted-foreground: "#b8c2cf"
  dark-accent: "#4d2306"
  dark-accent-foreground: "#fbe7d6"
  dark-destructive: "#f0719a"
  dark-destructive-foreground: "#37091b"
  dark-success: "#56b673"
  dark-success-foreground: "#082414"
  dark-warning: "#e5b02f"
  dark-warning-foreground: "#251a04"
  dark-border: "#343c4d"
  dark-input: "#475165"
  dark-ring: "#e48a4f"
typography:
  display-lg:
    fontFamily: Bricolage Grotesque
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.03em
  display-md:
    fontFamily: Bricolage Grotesque
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: Bricolage Grotesque
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Figtree
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Figtree
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
  body-lg:
    fontFamily: Figtree
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Figtree
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Figtree
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
  label:
    fontFamily: Figtree
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.01em
  caption:
    fontFamily: Figtree
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  code:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  sm: 2px
  md: 6px
  lg: 10px
  xl: 14px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 48px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 32px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 48px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 32px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Russet Tasting

## Overview

Russet Tasting is for restaurant websites, booking flows and menu apps that should read like a food magazine. The hierarchy sits in the type rather than in decoration. Bricolage Grotesque headlines at 32–60px carry the personality. A cool grey-blue neutral ramp keeps menus and forms crisp. Sienna, a single warm accent, marks every action.

Moods: editorial, confident, appetizing, calm. Built for: restaurant, hospitality, food-media. Density: spacious.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Sienna (brand.600 #a95419 in light, brand.400 #e48a4f in dark) is the only action color. It is used for primary buttons, links and the focus ring. Against white, brand.600 measures 5.3:1. In dark mode, brand.400 measures 6.7:1 on neutral.950. Neutrals are tinted blue-grey, hue around 215°, with chroma held low and even from 50 to 950, so no step turns muddy. Destructive uses the magenta-leaning crimson danger.600 (light) and danger.400 (dark). It sits roughly 40° of hue away from Sienna, keeping ΔE well above 18 in both modes. Success is shifted slightly toward yellow-green so it sits warmer beside Sienna. success.700 on white measures 7.2:1. Warning is a soft gold ramp from the same warm family. Light mode uses warning.200 surfaces with warning.900 text. Dark mode uses a warning.400 fill with warning.950 text.

- **Primary** `#a95419` / dark `#e48a4f`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f5f7fa` / dark `#141a24` on `#141a24` / dark `#f5f7fa`: page surface and body text.
- **Card** `#ffffff` / dark `#222936`: raised surfaces.
- **Secondary** `#eaeef3` / dark `#343c4d`: secondary buttons and quiet controls.
- **Muted** `#eaeef3` / dark `#343c4d` with **muted-foreground** `#475165` / dark `#b8c2cf`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#fbe7d6` / dark `#4d2306`: highlights, selected rows, badges.
- **Destructive** `#b82a5f` / dark `#f0719a`, **Success** `#1d6439` / dark `#56b673`, **Warning** `#f9e195` / dark `#e5b02f`: status only, always paired with an icon or label.
- **Border** `#d6dde6` / dark `#343c4d`, **Input** `#b8c2cf` / dark `#475165`, **Ring** `#cf6d2c` / dark `#e48a4f`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

Bricolage Grotesque (600, 700) is the display voice. It sets display-lg 60/1.05, display-md 48/1.1 and heading-lg 32/1.2. Letter spacing tightens as size grows: -0.03em at 60px, -0.025em at 48px, -0.015em at 32px. Figtree (400, 500, 600) handles every functional role: heading-md 20/1.3, heading-sm 16/1.4, body-lg 18/1.6, body-md 16/1.6, body-sm 14/1.55, label 14/1.25 and caption 12/1.4. The scale follows a 1.25 major third anchored at 16px, rounded to 20, 32, 48 and 60. The display sizes skip a step so the jump from heading-md to heading-lg reads at a glance. JetBrains Mono (400, 500) at 14/1.6 is reserved for order codes, table numbers and allergen codes.

- Display: **Bricolage Grotesque** (fallback 'Helvetica Neue', Arial, sans-serif)
- Interface: **Figtree** (fallback system-ui, sans-serif)
- Mono: **JetBrains Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Bricolage Grotesque | 60px | 1.05 | 700 |
| display-md | Bricolage Grotesque | 48px | 1.1 | 700 |
| heading-lg | Bricolage Grotesque | 32px | 1.2 | 600 |
| heading-md | Figtree | 20px | 1.3 | 600 |
| heading-sm | Figtree | 16px | 1.4 | 600 |
| body-lg | Figtree | 18px | 1.6 | 400 |
| body-md | Figtree | 16px | 1.6 | 400 |
| body-sm | Figtree | 14px | 1.55 | 400 |
| label | Figtree | 14px | 1.25 | 500 |
| caption | Figtree | 12px | 1.4 | 500 |
| code | JetBrains Mono | 14px | 1.6 | 400 |

## Layout

Spacious density on a 4px base grid. Section padding is space.16 (64px) on desktop and space.10 (40px) on mobile. Content columns cap at 1120px. Menu items are separated by at least space.4 (16px). Buttons are 44px tall and inputs are 48px, so touch targets stay above 44px.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Almost flat. Cards use a 1px border token over shadow.sm, a 2px blur at 6% opacity tinted with neutral.950. shadow.md is for popovers and date pickers. shadow.lg is only for modal dialogs. In dark mode, elevation comes from surface lightness instead: card and popover use neutral.900 on a neutral.950 background.

- sm: `0 1px 2px rgba(20, 26, 36, 0.06)`
- md: `0 4px 14px -2px rgba(20, 26, 36, 0.12)`
- lg: `0 16px 40px -8px rgba(20, 26, 36, 0.22)`

## Shapes

Tight, print-like rounding. Use radius.md (6px) on buttons and inputs, radius.lg (10px) on cards and radius.xl (14px) on dialogs. radius.full is limited to status and allergen badges so pills stay scannable.

Radius scale: sm 2px, md 6px, lg 10px, xl 14px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 48px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 32px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Give each view one primary button (Reserve, Order, Confirm). Render all other actions as secondary (neutral.100 surface) or ghost buttons.
- **Do:** Use exactly one display-lg (60px) or display-md (48px) heading per page. Use heading-lg (32px) for menu section titles such as Starters or Mains.
- **Do:** Set prices, times and table numbers in Figtree with font-feature-settings 'tnum', so figures align in menu and booking columns.
- **Do:** Show the focus state as a 2px ring token outline with a 2px offset on buttons, inputs and menu-item links in both modes.
- **Do:** Pair every success, warning and destructive badge or alert with an icon or text label, such as 'Sold out' or 'Booked', so meaning never relies on color alone.
- **Do:** Use space.16 (64px) section padding on desktop and space.10 (40px) on mobile, with a 1120px maximum content width.
- **Don't:** Don't use primary (Sienna) for errors, sold-out states or cancellations. Use destructive with destructive-foreground for those.
- **Don't:** Don't set Bricolage Grotesque below 24px, and don't use it for body copy, form labels, buttons or dish descriptions.
- **Don't:** Don't introduce warm greys or #000000. Text uses neutral.950 on light surfaces and neutral.50 on dark surfaces.
- **Don't:** Don't set paragraph text in primary on the accent surface. Use accent-foreground for any text longer than one line.
- **Don't:** Don't place muted-foreground text on the brand or warning surfaces. It is only checked against background, card and muted.
- **Don't:** Don't add shadows above shadow.sm to cards. Reserve shadow.md for popovers and date pickers, and shadow.lg for modal dialogs.