Vermilion Concierge

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

Color

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

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.

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.

Elevation

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.

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.

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.
• Set numeric table columns in Plus Jakarta Sans body-sm or body-md with font-feature-settings 'tnum', right-aligned.
• 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.
• Pair every success, warning and destructive badge or banner with an icon or text label, so status never depends on color alone.
• Keep table rows and controls at 32px, badges at 20px and card padding at space.4. Keep all card and input borders at 1px.
• Set reservation IDs, room numbers and rate codes with the code token (JetBrains Mono 13/400).
• 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 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 set body, label or table text in Sora, or use Sora below 24px.
• 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 use greys outside the neutral ramp. Don't use neutral.500 or lighter for text on background in light mode.
• Don't set text in all caps. Use label (12/600) or caption (11/500) in sentence case for metadata.