Cinnabar Vitae

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

Color

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.

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.

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.

Elevation

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.

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.

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).
• 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.
• 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.
• Set page titles and section openers in Young Serif at heading-lg (36px), display-md (48px) or display-lg (64px), always at weight 400.
• 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.
• Cap job descriptions and candidate summaries at a 680px measure, using body-lg (18px/1.65) or body-md.
• Use space.16 (64px) or more between major page sections and space.8 (32px) padding inside cards.
• 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 use primary vermilion for errors, rejected candidates or delete actions. Use the destructive token (danger.600 in light, danger.400 in dark).
• 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 put shadows heavier than shadow.sm on cards. Use shadow.md for popovers and menus, and shadow.lg for dialogs.
• 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 place muted-foreground text on brand or accent surfaces. Use accent-foreground on accent and primary-foreground on primary.
• Don't stack more than one filled primary button in the same view or card.