---
version: alpha
name: Cinnabar Vitae
description: "Dark-first editorial UI for recruiting: Young Serif headlines, vermilion actions and warm ink neutrals with magazine-like spacing."
colors:
  background: "#f7f3ef"
  foreground: "#13100f"
  card: "#ffffff"
  card-foreground: "#13100f"
  popover: "#ffffff"
  popover-foreground: "#13100f"
  primary: "#bc3a22"
  primary-foreground: "#ffffff"
  secondary: "#ece6e0"
  secondary-foreground: "#201c1a"
  muted: "#ece6e0"
  muted-foreground: "#4e4742"
  accent: "#ffe1da"
  accent-foreground: "#501204"
  destructive: "#be2264"
  destructive-foreground: "#ffffff"
  success: "#216537"
  success-foreground: "#ffffff"
  warning: "#fadc8c"
  warning-foreground: "#3f2c00"
  border: "#dad2cb"
  input: "#bfb6ae"
  ring: "#bc3a22"
  dark-background: "#13100f"
  dark-foreground: "#f7f3ef"
  dark-card: "#201c1a"
  dark-card-foreground: "#f7f3ef"
  dark-popover: "#201c1a"
  dark-popover-foreground: "#f7f3ef"
  dark-primary: "#f46e53"
  dark-primary-foreground: "#310a01"
  dark-secondary: "#342f2b"
  dark-secondary-foreground: "#ece6e0"
  dark-muted: "#342f2b"
  dark-muted-foreground: "#bfb6ae"
  dark-accent: "#501204"
  dark-accent-foreground: "#ffe1da"
  dark-destructive: "#f8659c"
  dark-destructive-foreground: "#340218"
  dark-success: "#5bb571"
  dark-success-foreground: "#072010"
  dark-warning: "#d9a52e"
  dark-warning-foreground: "#261a00"
  dark-border: "#342f2b"
  dark-input: "#4e4742"
  dark-ring: "#f46e53"
typography:
  display-lg:
    fontFamily: Young Serif
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.03em
  display-md:
    fontFamily: Young Serif
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: Young Serif
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Work Sans
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Work Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Work Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
  body-md:
    fontFamily: Work Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Work Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Work Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.01em
  caption:
    fontFamily: Work Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.04em
  code:
    fontFamily: IBM Plex Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  sm: 4px
  md: 6px
  lg: 10px
  xl: 16px
  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: 44px
  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 12px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    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: 44px
  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 12px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
---

# Cinnabar Vitae

## Overview

Cinnabar Vitae is for recruiting products that read like an edited magazine rather than a database. Candidate profiles are laid out as features, job listings as articles and hiring pipelines as tables of contents. Dark mode is the primary design surface: background neutral.950 (#13100f), cards on neutral.900 and a vermilion primary at brand.400. Light mode is the same system on warm newsprint: background neutral.50 (#f7f3ef), white cards and primary at brand.600.

Moods: editorial, confident, refined, spacious. Built for: recruiting, hr-tech, job-board. 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

Vermilion (brand, OKLCH hue about 33) is the only action color. It is used for primary buttons, links and the focus ring: brand.600 in light mode (5.6:1 against white text) and brand.400 in dark mode (6.1:1 against brand.950 text, 6.4:1 against background). Neutrals are ink tones with a deliberate red-brown tint at the same hue, so surfaces and accent read as one family. All steps darken monotonically from 50 to 950. Danger is moved to crimson-magenta (hue about 355) so that destructive is at least ΔE2000 20 from primary in both modes: danger.600 (#be2264) in light and danger.400 (#f8659c) in dark. Success is a slightly yellow-leaning green and warning is amber, so both stay on the warm side of the wheel. Their chroma peaks at step 500, matching the brand curve. Contrast targets: every foreground pair is at least 5:1, and muted-foreground is 7.4:1 on muted in light mode and 6.6:1 in dark mode.

- **Primary** `#bc3a22` / dark `#f46e53`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f7f3ef` / dark `#13100f` on `#13100f` / dark `#f7f3ef`: page surface and body text.
- **Card** `#ffffff` / dark `#201c1a`: raised surfaces.
- **Secondary** `#ece6e0` / dark `#342f2b`: secondary buttons and quiet controls.
- **Muted** `#ece6e0` / dark `#342f2b` with **muted-foreground** `#4e4742` / dark `#bfb6ae`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#ffe1da` / dark `#501204`: highlights, selected rows, badges.
- **Destructive** `#be2264` / dark `#f8659c`, **Success** `#216537` / dark `#5bb571`, **Warning** `#fadc8c` / dark `#d9a52e`: status only, always paired with an icon or label.
- **Border** `#dad2cb` / dark `#342f2b`, **Input** `#bfb6ae` / dark `#4e4742`, **Ring** `#bc3a22` / dark `#f46e53`.

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

## Typography

Young Serif ships weight 400 only. It sets display-lg (64px), display-md (48px) and heading-lg (36px), which are consecutive perfect-fourth (×1.333) steps. Letter spacing tightens as size grows: -0.03em at 64px, -0.025em at 48px and -0.015em at 36px. Work Sans (400/500/600/700) sets every functional style: heading-md 24px/600, heading-sm 20px/600, body-lg 18px/1.65, body-md 16px/1.6, body-sm 14px/1.5, label 14px/500 and caption 12px/500 with +0.04em tracking. IBM Plex Mono (400/500) is used only for the code style: requisition IDs, salary columns and code. Hierarchy comes from the size jump between serif and sans, not from weight.

- Display: **Young Serif** (fallback Georgia, serif)
- Interface: **Work Sans** (fallback system-ui, sans-serif)
- Mono: **IBM Plex Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Young Serif | 64px | 1.05 | 400 |
| display-md | Young Serif | 48px | 1.1 | 400 |
| heading-lg | Young Serif | 36px | 1.15 | 400 |
| heading-md | Work Sans | 24px | 1.3 | 600 |
| heading-sm | Work Sans | 20px | 1.35 | 600 |
| body-lg | Work Sans | 18px | 1.65 | 400 |
| body-md | Work Sans | 16px | 1.6 | 400 |
| body-sm | Work Sans | 14px | 1.5 | 400 |
| label | Work Sans | 14px | 1.3 | 500 |
| caption | Work Sans | 12px | 1.4 | 500 |
| code | IBM Plex Mono | 14px | 1.6 | 400 |

## Layout

Spacious density on a 4px grid. Long-form text uses a reading column of at most 680px and pages use a 1200px maximum width. Major sections are separated by space.16 (64px) to space.24 (96px). Cards use space.8 (32px) inner padding, and controls are 44px tall.

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

## Elevation & Depth

Flat, like printed pages. Depth comes from tonal steps (background → card → muted) and 1px border or input tokens. Cards use at most shadow.sm. Popovers use shadow.md and dialogs use shadow.lg. Shadows are tinted warm ink at 0.22–0.55 opacity so they stay visible on neutral.950.

- sm: `0 1px 2px rgba(19, 12, 10, 0.22)`
- md: `0 6px 16px -4px rgba(19, 12, 10, 0.34)`
- lg: `0 20px 48px -12px rgba(19, 12, 10, 0.55)`

## Shapes

radius.sm (4px) for checkboxes, tags and inline code. radius.md (6px) for buttons and inputs. radius.lg (10px) for cards. radius.xl (16px) for dialogs. radius.full is limited to status badges and filter chips.

Radius scale: sm 4px, md 6px, lg 10px, xl 16px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 44px 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:** Review the dark theme first: background is neutral.950, card and popover are neutral.900, and card edges use a 1px border (neutral.800).
- **Do:** Use one filled primary button per view, such as 'Post a role' or 'Send offer'. Render other actions as secondary (neutral.800 in dark, neutral.100 in light) or ghost.
- **Do:** Show focus as a 2px ring token outline with a 2px offset on buttons, inputs, links and filter chips. Ring is brand.600 in light mode and brand.400 in dark mode, both at least 3:1 against background.
- **Do:** Set page titles and section openers in Young Serif at heading-lg (36px), display-md (48px) or display-lg (64px), always at weight 400.
- **Do:** Use Work Sans for functional text. Use heading-md (24px/600) for card titles, label (14px/500, rendered at 600 in buttons) for controls, and body-md (16px/1.6) for default copy.
- **Do:** Cap job descriptions and candidate summaries at a 680px measure, using body-lg (18px/1.65) or body-md.
- **Do:** Use space.16 (64px) or more between major page sections and space.8 (32px) padding inside cards.
- **Do:** Pair every success, warning and destructive badge or alert with an icon and a text label, such as 'Offer accepted', 'Pending review' or 'Rejected'.
- **Don't:** Don't set Young Serif below 24px, in bold or faux-bold, or in all caps. It ships in weight 400 only.
- **Don't:** Don't use primary vermilion for errors, rejected candidates or delete actions. Use the destructive token (danger.600 in light, danger.400 in dark).
- **Don't:** Don't use pure black (#000) or pure white as the page background. Use neutral.950 in dark mode and neutral.50 in light mode. White is allowed for light-mode card and popover only.
- **Don't:** Don't put shadows heavier than shadow.sm on cards. Use shadow.md for popovers and menus, and shadow.lg for dialogs.
- **Don't:** Don't use IBM Plex Mono for body copy or headings. Limit it to the code style: requisition IDs, salary columns and code.
- **Don't:** Don't place muted-foreground text on brand or accent surfaces. Use accent-foreground on accent and primary-foreground on primary.
- **Don't:** Don't stack more than one filled primary button in the same view or card.