Russet Tasting

About 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.

Color

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.

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.

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.

Elevation

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.

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.

Do

• Give each view one primary button (Reserve, Order, Confirm). Render all other actions as secondary (neutral.100 surface) or ghost buttons.
• 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.
• Set prices, times and table numbers in Figtree with font-feature-settings 'tnum', so figures align in menu and booking columns.
• Show the focus state as a 2px ring token outline with a 2px offset on buttons, inputs and menu-item links in both modes.
• 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.
• 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 set Bricolage Grotesque below 24px, and don't use it for body copy, form labels, buttons or dish descriptions.
• Don't introduce warm greys or #000000. Text uses neutral.950 on light surfaces and neutral.50 on dark surfaces.
• Don't set paragraph text in primary on the accent surface. Use accent-foreground for any text longer than one line.
• Don't place muted-foreground text on the brand or warning surfaces. It is only checked against background, card and muted.
• Don't add shadows above shadow.sm to cards. Reserve shadow.md for popovers and date pickers, and shadow.lg for modal dialogs.