Crimson Aegis

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

Color

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.

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.

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

Elevation

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.

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.

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.
• 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.
• 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.
• Pair every success, warning and destructive badge or alert with an icon or text label so meaning never depends on color alone.
• Keep buttons and inputs at 44px height. Use at least space.4 (16px) between form fields and space.8 (32px) between form sections.
• 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.
• 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.
• 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 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 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 loosen tracking on display sizes or tighten it on body. Keep the letterSpacing values defined in the typography tokens.
• 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 round buttons or inputs beyond radius.md (4px), or cards beyond radius.lg (6px). Reserve radius.full for badges.
• 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 put brand.300 or brand.400 text on light backgrounds. They are dark-mode tokens and fall below 3:1 on neutral.50.