---
version: alpha
name: Crimson Aegis
description: Insurance UI with deep carmine actions on cool slate neutrals, set in Archivo for long policy and claims reading.
colors:
  background: "#f4f6f9"
  foreground: "#121821"
  card: "#ffffff"
  card-foreground: "#121821"
  popover: "#ffffff"
  popover-foreground: "#121821"
  primary: "#8f2630"
  primary-foreground: "#ffffff"
  secondary: "#e9edf2"
  secondary-foreground: "#1f2731"
  muted: "#e9edf2"
  muted-foreground: "#4b5767"
  accent: "#fbe3e0"
  accent-foreground: "#50161a"
  destructive: "#b42273"
  destructive-foreground: "#ffffff"
  success: "#1b5b36"
  success-foreground: "#ffffff"
  warning: "#f5d496"
  warning-foreground: "#3d2a06"
  border: "#d6dce4"
  input: "#bbc4cf"
  ring: "#c94f45"
  dark-background: "#121821"
  dark-foreground: "#f4f6f9"
  dark-card: "#1f2731"
  dark-card-foreground: "#f4f6f9"
  dark-popover: "#1f2731"
  dark-popover-foreground: "#f4f6f9"
  dark-primary: "#eea198"
  dark-primary-foreground: "#320c0f"
  dark-secondary: "#343e4b"
  dark-secondary-foreground: "#e9edf2"
  dark-muted: "#343e4b"
  dark-muted-foreground: "#bbc4cf"
  dark-accent: "#50161a"
  dark-accent-foreground: "#fbe3e0"
  dark-destructive: "#e85ea6"
  dark-destructive-foreground: "#350420"
  dark-success: "#55ab74"
  dark-success-foreground: "#062012"
  dark-warning: "#cf9a38"
  dark-warning-foreground: "#251903"
  dark-border: "#343e4b"
  dark-input: "#4b5767"
  dark-ring: "#e1756a"
typography:
  display-lg:
    fontFamily: Archivo
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.022em
  display-md:
    fontFamily: Archivo
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.018em
  heading-lg:
    fontFamily: Archivo
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.012em
  heading-md:
    fontFamily: Archivo
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.006em
  heading-sm:
    fontFamily: Archivo
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
  body-lg:
    fontFamily: Archivo
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Archivo
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Archivo
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Archivo
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.005em
  caption:
    fontFamily: Archivo
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.01em
  code:
    fontFamily: Space Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 2px
  md: 4px
  lg: 6px
  xl: 10px
  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 12px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  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 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    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 12px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  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 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Crimson Aegis

## Overview

Crimson Aegis is for insurers, brokers and claims portals where people read policy terms, compare coverage and file claims under stress. The palette is deep carmine with cool slate neutrals. Corners are tight and contrast is high: every text pair clears 5:1 in both modes. Screens should read steady and accountable. The visual weight sits in one carmine primary action per view and in clear type hierarchy, not in decoration.

Moods: trustworthy, stable, serious, formal. Built for: insurance, financial-services, legal. Density: comfortable.

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

Brand is a brick-leaning carmine with a constant hue of about 25° LCh. Chroma peaks at brand.500–700 and tapers evenly toward 50 and 950, so no mid-step goes muddy. Light primary is brand.700 (#8f2630): white text on it is 8.4:1. Dark primary is brand.300 (#eea198) with brand.950 text at 8.5:1, which reads luminous without going neon. Neutrals are slate tinted toward blue (about 250° hue) on purpose, to cool the warm brand. Destructive uses the danger scale, which sits at about 350° (magenta-crimson). It differs from primary by hue and lightness: CIEDE2000 ΔE ≥ 18 in light (brand.700 vs danger.600) and about 23 in dark (brand.300 vs danger.400). Success is a forest green nudged warm (about 145°). Warning is an ochre amber. Both share the brand's chroma curve, so status colors sit in the same family. Dark mode is designed separately from light. Background is neutral.950 (#121821). Card is neutral.900 (#1f2731), about 1.18:1 lift from the background. Muted and secondary surfaces use neutral.800. muted-foreground (neutral.300) holds 6.2:1 on muted and 9.8:1 on background.

- **Primary** `#8f2630` / dark `#eea198`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f4f6f9` / dark `#121821` on `#121821` / dark `#f4f6f9`: page surface and body text.
- **Card** `#ffffff` / dark `#1f2731`: raised surfaces.
- **Secondary** `#e9edf2` / dark `#343e4b`: secondary buttons and quiet controls.
- **Muted** `#e9edf2` / dark `#343e4b` with **muted-foreground** `#4b5767` / dark `#bbc4cf`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#fbe3e0` / dark `#50161a`: highlights, selected rows, badges.
- **Destructive** `#b42273` / dark `#e85ea6`, **Success** `#1b5b36` / dark `#55ab74`, **Warning** `#f5d496` / dark `#cf9a38`: status only, always paired with an icon or label.
- **Border** `#d6dce4` / dark `#343e4b`, **Input** `#bbc4cf` / dark `#4b5767`, **Ring** `#c94f45` / dark `#e1756a`.

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

## Typography

Archivo serves both display and body roles. It is a sturdy grotesque that ships 100–900; this preset uses 400, 500, 600 and 700. Sizes follow an approximate 1.2 (minor-third) ratio above the 16px base: 20, 28, 34 and 48. Supporting sizes are 18, 14 and 12. Tracking tightens as size grows: -0.022em at display-lg, -0.018em at display-md, -0.012em at heading-lg, 0 for body. Body line height is 1.55–1.6 for long policy text. Space Mono 400/700 is reserved for policy numbers, claim IDs and reference codes, which users read aloud or copy.

- Display: **Archivo** (fallback system-ui, sans-serif)
- Interface: **Archivo** (fallback system-ui, sans-serif)
- Mono: **Space Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Archivo | 48px | 1.08 | 700 |
| display-md | Archivo | 34px | 1.12 | 700 |
| heading-lg | Archivo | 28px | 1.2 | 600 |
| heading-md | Archivo | 20px | 1.3 | 600 |
| heading-sm | Archivo | 16px | 1.4 | 600 |
| body-lg | Archivo | 18px | 1.6 | 400 |
| body-md | Archivo | 16px | 1.6 | 400 |
| body-sm | Archivo | 14px | 1.5 | 400 |
| label | Archivo | 14px | 1.3 | 600 |
| caption | Archivo | 12px | 1.4 | 500 |
| code | Space Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px base grid using the space scale. Content columns max out at 1200px, and forms stay at or below 640px wide. Buttons and inputs are 44px tall. Form fields are separated by at least space.4 (16px), and form sections by space.8 (32px).

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

## Elevation & Depth

Mostly flat and structural. Cards separate from the background through a 1px border token and shadow.sm. shadow.md is for menus and popovers, shadow.lg for dialogs only. In dark mode, depth comes from surface steps (neutral.950 → 900 → 800), not from shadows.

- sm: `0 1px 2px rgba(18, 24, 33, 0.08)`
- md: `0 4px 12px -2px rgba(18, 24, 33, 0.14)`
- lg: `0 16px 40px -8px rgba(18, 24, 33, 0.24)`

## Shapes

Tight rounding reads formal and precise: radius.md (4px) on buttons and inputs, radius.lg (6px) on cards. radius.xl (10px) is for dialogs. radius.full is used only for status badges.

Radius scale: sm 2px, md 4px, lg 6px, xl 10px, 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: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use the primary button for exactly one main action per view, such as 'Submit claim' or 'Get quote'. Render other actions as secondary or ghost buttons.
- **Do:** Set policy terms and legal text in body-md (16px, line height 1.6) or body-lg (18px). Limit body-sm (14px) to table cells and input helper text.
- **Do:** Set policy numbers, claim IDs and reference codes in the code style (Space Mono 400, 14px) so they are unambiguous when read aloud or copied.
- **Do:** Pair every success, warning and destructive badge or alert with an icon or text label so meaning never depends on color alone.
- **Do:** Keep buttons and inputs at 44px height. Use at least space.4 (16px) between form fields and space.8 (32px) between form sections.
- **Do:** Show focus on every interactive element as a 2px ring token outline with a 2px offset. ring is brand.500 in light and brand.400 in dark, both ≥ 4:1 on background.
- **Do:** In dark mode, separate layers by surface step: background (neutral.950), then card and popover (neutral.900), then muted and secondary (neutral.800). Add shadow.md only for menus and popovers.
- **Do:** Use muted-foreground for placeholder and helper text. For disabled controls, apply 50% opacity to the whole control rather than switching to a lighter neutral.
- **Don't:** Don't use primary for errors or failed validation. Use destructive (danger.600 in light, danger.400 in dark), which is magenta-crimson and clearly distinct from the brick carmine primary.
- **Don't:** Don't place primary and destructive buttons side by side at equal weight. Show 'Cancel policy' as a secondary button until the confirmation dialog, then as destructive.
- **Don't:** Don't set display-lg or display-md in all caps. Don't use display weights below heading-lg (28px); use heading-md (20px) or heading-sm (16px) instead.
- **Don't:** Don't loosen tracking on display sizes or tighten it on body. Keep the letterSpacing values defined in the typography tokens.
- **Don't:** Don't use warm greys, pure black (#000000) or untinted grey for text or surfaces. Use neutral.950 and the slate neutral ramp.
- **Don't:** Don't round buttons or inputs beyond radius.md (4px), or cards beyond radius.lg (6px). Reserve radius.full for badges.
- **Don't:** Don't use warning.200 as text or as an icon color on white. It is the light-mode warning surface and needs warning-foreground (warning.900) on top.
- **Don't:** Don't put brand.300 or brand.400 text on light backgrounds. They are dark-mode tokens and fall below 3:1 on neutral.50.