Visual Foundations & Token Specifications

Color Tokens Palette

Tokens come in light and dark themes. Use semantic CSS tokens, never hardcoded hex codes.

Token Name	Role / Usage Description	Light Mode	Dark Mode
`--surface-0`	Page background. Warm paper in light, deep ink in dark.	`#f7f6f2`	`#0f1420`
`--surface-1`	Cards, panels, inputs, sidebar. Sits on surface-0.	`#ffffff`	`#171d2b`
`--surface-2`	Hover fills, sunken areas, table row hover, neutral badges.	`#eceef3`	`#1f2636`
`--line`	Decorative hairlines and card borders. Never the only edge of a control.	`#dadee7`	`#2c344a`
`--line-strong`	Dividers that must read, table header rules, upcoming stage bars.	`#bdc3d1`	`#46506a`
`--ink`	Primary text and primary button fill. 17:1 on surface-0 in light.	`#0f1420`	`#f7f6f2`
`--ink-hover`	Hover state of the primary button.	`#252c3d`	`#dadee7`
`--ink-muted`	Secondary text, labels, placeholders. 5.8:1 on surface-0 in light.	`#566079`	`#a3acc2`
`--ink-faint`	Icons, control borders, disabled content. 3:1 or better; never body text.	`#747e96`	`#747e96`
`--control-border`	Border of inputs and secondary buttons. Meets 3:1 on surface-1 in both themes.	`#747e96` (aliases `--ink-faint`)	`#747e96` (aliases `--ink-faint`)
`--ignition`	Brand accent. Wordmark dot, accent button fill, current-stage bar, key highlights. One per view.	`#eb4a14`	`#ff6a33`
`--ignition-hover`	Hover state of the accent button. Lighter, so ink text keeps 4.5:1.	`#ff5f2b`	`#ff8557`
`--ignition-text`	Accent used as text or icon on surfaces and on ignition-tint. 5.5:1 in light.	`#b7360b`	`#ff8a5c`
`--ignition-tint`	Quiet accent background: active nav item, highlighted rows.	`#fde9e1`	`#3a1d14`
`--on-ignition`	Text on an ignition fill. Always ink, never white (white is 3.8:1).	`#0f1420`	`#0f1420`
`--circuit`	Links, info, selection and secondary data series. 6:1 on surface-0 in light.	`#2450d6`	`#7c9cff`
`--circuit-tint`	Info backgrounds and selected-row fill.	`#e4eafd`	`#1b2547`
`--focus-ring`	Keyboard focus outline, 2px with 2px offset, on every interactive element.	`#2450d6` (aliases `--circuit`)	`#7c9cff` (aliases `--circuit`)
`--on-track`	Health state On track. Always paired with a circle and the words On track.	`#0f7a4b`	`#3dd68c`
`--on-track-tint`	Background of the On track badge.	`#ddf3e8`	`#12301f`
`--at-risk`	Health state At risk. Always paired with a triangle and the words At risk.	`#8a5a00`	`#f2b53b`
`--at-risk-tint`	Background of the At risk badge.	`#fbefcf`	`#3a2b0a`
`--stalled`	Health state Stalled, and form errors. Always paired with a square and the words.	`#b4233a`	`#ff6f85`
`--stalled-tint`	Background of the Stalled badge and error callouts.	`#fbe0e4`	`#3d161e`
`--brand-ink`	Fixed brand ink for the logo. Does not change with theme.	`#0f1420`	`#0f1420`
`--brand-paper`	Fixed brand paper for the reversed logo. Does not change with theme.	`#f7f6f2`	`#f7f6f2`
`--brand-ignition`	Fixed brand accent for the logo dot. Does not change with theme.	`#eb4a14`	`#eb4a14`
`--chart-1`	Data series 1. Circuit blue. Lead series.	`#2450d6`	`#7c9cff`
`--chart-2`	Data series 2. Ignition. Use for the one series to emphasise.	`#eb4a14`	`#ff6a33`
`--chart-3`	Data series 3. Teal.	`#0e8f83`	`#3ccfc0`
`--chart-4`	Data series 4. Violet.	`#7a4fd8`	`#a98bff`
`--chart-5`	Data series 5. Slate. Also for comparison or previous-period lines.	`#566079`	`#a3acc2`

Typography Scale (1.25 Ratio)

Three hosted type families: Space Grotesk (Display/Metrics), Inter (UI/Body), JetBrains Mono (Code/IDs).

Style	Font Family	Size / Line Height	Weight & Tracking	Example Rendering
`.display-xl`	Space Grotesk	61px / 64px	700 (-0.02em)	Idea to live
`.display-lg`	Space Grotesk	49px / 52px	700 (-0.02em)	Live Project
`.h1`	Space Grotesk	39px / 44px	700 (-0.015em)	Dashboard View
`.h2`	Space Grotesk	31px / 38px	600 (-0.01em)	Active Services
`.h3`	Space Grotesk	25px / 32px	600 (0)	Deployment Health
`.h4`	Space Grotesk	20px / 28px	600 (0)	Recent Commits
`.body-lg`	Inter	18px / 28px	400 (0)	Lead summary text for project briefs.
`.body`	Inter	16px / 24px	400 (0)	Standard readable body copy across all interfaces.
`.body-sm`	Inter	14px / 20px	400 (0)	Secondary details, table text and list items.
`.label`	Inter	14px / 20px	600 (0)	Field Label / Action Text
`.caption`	Inter	12px / 16px	500 (0)	Timestamps, helper hints and microcopy
`.metric`	Space Grotesk	39px / 44px	600, tabular-nums	99.98%
`.overline`	JetBrains Mono	12px / 16px	500 (0.08em), uppercase	MODULE STATUS
`.code`	JetBrains Mono	14px / 20px	400 (0)	git push origin main

Spacing Scale (4px Base Grid)

Use predefined spacing variables to maintain consistent rhythm and proportional hierarchy.

Token	Pixels	Primary Application
`--space-1`	4px	Tight internal padding, badge insets
`--space-2`	8px	Icon gaps, compact row spacing
`--space-3`	12px	Input horizontal padding, small gaps
`--space-4`	16px	Standard control padding, card gaps
`--space-5`	24px	Card internal padding, grid gutters
`--space-6`	32px	Section vertical margins
`--space-7`	48px	Page margin gutters on desktop
`--space-8`	64px	Major landmark divisions
`--space-9`	96px	Hero headers and marketing sections

Layout, Radius & Elevation

Radius: radius-md (8px) for controls, radius-lg (12px) for cards and panels, radius-xl (20px) for modals, radius-pill for status badges only.
Elevation: Borders first, shadows second. Cards rest on a 1px line border with shadow-sm. shadow-md is for menus and popovers, shadow-lg for modals.
Layout: Content maxes out at container-max (1200px). The app uses a fixed 248px sidebar (sidebar-width) and a fluid content area on a 12-column grid. Below 768px the sidebar becomes a top bar.

Motion & Iconography

Motion: 120ms for hover and press, 200ms for panels and cards, 320ms for page-level transitions. Easing: cubic-bezier(0.2, 0, 0, 1) for everything. Respect prefers-reduced-motion.
Iconography: Base set: Lucide at 20px (16px in dense tables) with a 2px stroke, in ink-muted by default and ink when active. Circles and straight lines, square line ends, no fills except the dot.