---
version: alpha
name: Vermilion Concierge
description: "Dense, data-first UI for hotel and restaurant operators: crisp borders, tabular figures and a single vermilion action color."
colors:
  background: "#fafaf9"
  foreground: "#141211"
  card: "#ffffff"
  card-foreground: "#141211"
  popover: "#ffffff"
  popover-foreground: "#141211"
  primary: "#bd3f1e"
  primary-foreground: "#ffffff"
  secondary: "#f4f4f3"
  secondary-foreground: "#1e1b1a"
  muted: "#f4f4f3"
  muted-foreground: "#5e5b58"
  accent: "#ffe5dc"
  accent-foreground: "#511706"
  destructive: "#b8104e"
  destructive-foreground: "#ffffff"
  success: "#3c7a2c"
  success-foreground: "#ffffff"
  warning: "#fde08a"
  warning-foreground: "#6a3912"
  border: "#e6e5e3"
  input: "#d5d3d1"
  ring: "#de5230"
  dark-background: "#141211"
  dark-foreground: "#fafaf9"
  dark-card: "#1e1b1a"
  dark-card-foreground: "#fafaf9"
  dark-popover: "#1e1b1a"
  dark-popover-foreground: "#fafaf9"
  dark-primary: "#f2704f"
  dark-primary-foreground: "#360c02"
  dark-secondary: "#322f2d"
  dark-secondary-foreground: "#f4f4f3"
  dark-muted: "#322f2d"
  dark-muted-foreground: "#a5a2a0"
  dark-accent: "#511706"
  dark-accent-foreground: "#ffe5dc"
  dark-destructive: "#f25a85"
  dark-destructive-foreground: "#33051a"
  dark-success: "#6fb257"
  dark-success-foreground: "#10220c"
  dark-warning: "#f5b12a"
  dark-warning-foreground: "#3d1d05"
  dark-border: "#322f2d"
  dark-input: "#484542"
  dark-ring: "#f2704f"
typography:
  display-lg:
    fontFamily: Sora
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.025em
  display-md:
    fontFamily: Sora
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Sora
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.375
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  label:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0.01em
  caption:
    fontFamily: Plus Jakarta Sans
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0.02em
  code:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 2px
  md: 4px
  lg: 6px
  xl: 8px
  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 12px
    height: 32px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 8px
    height: 32px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 16px
  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.sm}"
    padding: 0 6px
    height: 20px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 6px
    height: 20px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 6px
    height: 20px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 6px
    height: 20px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 8px
    height: 32px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 16px
  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.sm}"
    padding: 0 6px
    height: 20px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 6px
    height: 20px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 6px
    height: 20px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0 6px
    height: 20px
---

# Vermilion Concierge

## Overview

Vermilion Concierge serves operators who run rooms, covers and inventory from one screen: front-desk leads, kitchen managers and revenue analysts. Care is shown through order rather than decoration: 32px rows and controls, tabular numerals, 1px borders and radii of 6px or less. Only one color, Hearth vermilion, means 'act here'. Everything else is neutral structure or labelled status.

Moods: precise, efficient, calm. Built for: hospitality, hotel-operations, restaurant-tech. Density: compact.

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

Hearth (brand, HSL hue ~12) is used only for primary, ring and accent. Light primary is brand.600 #bd3f1e: 5.4:1 against white text and 5.2:1 against background. Dark primary is brand.400 #f2704f: 6.4:1 against background and 6.0:1 against its brand.950 foreground. The neutral ramp carries a very low warm tint (R ≥ G ≥ B by 1–6 steps) so greys sit with Hearth without reading as beige in dense grids. Destructive is a raspberry crimson (danger, HSL hue ~338), not a red-orange. danger.600 vs brand.600 is ΔE2000 ≈ 21 in light mode, and danger.400 vs brand.400 is ≈ 20 in dark mode, so cancellations and overbookings never look like a primary action. Success uses a warm leaf green (HSL hue ~108) and warning uses amber (hue ~40), both on the same warm side of the wheel as Hearth. In light mode, muted-foreground is neutral.600: 6.1:1 on muted and 6.5:1 on background. In dark mode it is neutral.400: 5.2:1 on muted and 7.4:1 on background. Dark surfaces step from neutral.950 (background) to neutral.900 (card, popover) to neutral.800 (muted, secondary, border).

- **Primary** `#bd3f1e` / dark `#f2704f`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#fafaf9` / dark `#141211` on `#141211` / dark `#fafaf9`: page surface and body text.
- **Card** `#ffffff` / dark `#1e1b1a`: raised surfaces.
- **Secondary** `#f4f4f3` / dark `#322f2d`: secondary buttons and quiet controls.
- **Muted** `#f4f4f3` / dark `#322f2d` with **muted-foreground** `#5e5b58` / dark `#a5a2a0`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#ffe5dc` / dark `#511706`: highlights, selected rows, badges.
- **Destructive** `#b8104e` / dark `#f25a85`, **Success** `#3c7a2c` / dark `#6fb257`, **Warning** `#fde08a` / dark `#f5b12a`: status only, always paired with an icon or label.
- **Border** `#e6e5e3` / dark `#322f2d`, **Input** `#d5d3d1` / dark `#484542`, **Ring** `#de5230` / dark `#f2704f`.

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

## Typography

The scale steps by about 1.2 from body-md 14px, rounded to the 2px grid: 11 / 12 / 13 / 14 / 16 / 20 / 24 / 28 / 36. Sora (600, 700) is used only at heading-lg 24px and above, for page titles and headline figures such as occupancy and RevPAR. Letter-spacing tightens with size: -0.005em at 16px, -0.025em at 36px. Plus Jakarta Sans (400–700) sets all functional text. Body line height is 1.5, and 1.45 at 13px. Numeric columns use 'tnum'. JetBrains Mono (400, 500) is used only through the code token, for reservation IDs, room and rate codes, and logs.

- Display: **Sora** (fallback system-ui, sans-serif)
- Interface: **Plus Jakarta Sans** (fallback system-ui, sans-serif)
- Mono: **JetBrains Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Sora | 36px | 1.1 | 700 |
| display-md | Sora | 28px | 1.15 | 600 |
| heading-lg | Sora | 24px | 1.25 | 600 |
| heading-md | Plus Jakarta Sans | 20px | 1.3 | 600 |
| heading-sm | Plus Jakarta Sans | 16px | 1.375 | 600 |
| body-lg | Plus Jakarta Sans | 16px | 1.5 | 400 |
| body-md | Plus Jakarta Sans | 14px | 1.5 | 400 |
| body-sm | Plus Jakarta Sans | 13px | 1.45 | 400 |
| label | Plus Jakarta Sans | 12px | 1.33 | 600 |
| caption | Plus Jakarta Sans | 11px | 1.45 | 500 |
| code | JetBrains Mono | 13px | 1.5 | 400 |

## Layout

Compact density on a 4px base grid with 2px half-steps (space.0.5, space.1.5, space.2.5). Table rows and controls are 32px. Badges are 20px. Card padding is space.4 (16px). Operations views may span the full viewport width. Reporting pages cap at 1440px.

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

## Elevation & Depth

Flat by default. Cards and table panels separate from the page with a 1px border token and shadow.sm (a 1px hairline). shadow.md is for menus and popovers. shadow.lg is for dialogs and sheets only. In dark mode, depth comes from the surface step (neutral.950 to neutral.900), not from shadow.

- sm: `0 1px 0 rgba(20, 18, 17, 0.06)`
- md: `0 2px 6px -1px rgba(20, 18, 17, 0.10)`
- lg: `0 8px 24px -6px rgba(20, 18, 17, 0.18)`

## Shapes

Low rounding: radius.sm 2px on badges, radius.md 4px on buttons and inputs, radius.lg 6px on cards and popovers, radius.xl 8px on dialogs only. Pills (radius.full) are not used. Status is shown with rectangular 20px badges aligned to the grid.

Radius scale: sm 2px, md 4px, lg 6px, xl 8px, full 9999px.

## Components

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

## Do's and Don'ts

- **Do:** Use one primary button per view (brand.600 light, brand.400 dark, height 32, label 12/600). Set every other button to secondary or ghost.
- **Do:** Set numeric table columns in Plus Jakarta Sans body-sm or body-md with font-feature-settings 'tnum', right-aligned.
- **Do:** Use Sora only at heading-lg (24px), display-md (28px) and display-lg (36px), for page titles and headline figures such as occupancy or RevPAR.
- **Do:** Pair every success, warning and destructive badge or banner with an icon or text label, so status never depends on color alone.
- **Do:** Keep table rows and controls at 32px, badges at 20px and card padding at space.4. Keep all card and input borders at 1px.
- **Do:** Set reservation IDs, room numbers and rate codes with the code token (JetBrains Mono 13/400).
- **Do:** Show focus on buttons, inputs and table rows with a 2px ring token outline (brand.500 light, brand.400 dark) at a 2px offset.
- **Don't:** Don't use primary or accent for errors, cancellations or overbooking. Use destructive (danger.600 light, danger.400 dark).
- **Don't:** Don't put shadow.md or shadow.lg on cards or table panels. shadow.md is for menus and popovers, and shadow.lg is for dialogs.
- **Don't:** Don't set body, label or table text in Sora, or use Sora below 24px.
- **Don't:** Don't exceed radius.lg (6px) on cards and popovers or radius.md (4px) on buttons and inputs. Don't use radius.full.
- **Don't:** Don't use greys outside the neutral ramp. Don't use neutral.500 or lighter for text on background in light mode.
- **Don't:** Don't set text in all caps. Use label (12/600) or caption (11/500) in sentence case for metadata.