Colour and tokens

import"@truvar-ai/design-system/tokens"

Navy carries the brand, gold marks the moment of value. Every component reads these tokens, so light, dark and future themes come for free.

Colour tokens

Built on tokens.css

Swatches show the current theme. Values list light, then dark.

navy-900#001250Brand anchor: logo, hero fields

gold-300#e0b96aHighlight on navy and dark grounds

primary#001250 / #e0b96aPrimary buttons and selected states

accent#916625 / #e0b96aLinks and accent text

surface#ffffff / #131416Page background

surface-alt#f7f5f0 / #1c1d20Sections, panels, table headers

surface-raised#ffffff / #232428Menus, dialogs, drawers

ink#001250 / #ebe9e4Text

ink-muted#4a5578 / #a5a39dSecondary text

border#d9dce6 / #2d2e32Hairlines

border-strong#6b7494 / #76777dControl borders

success#1f6f4a / #6fd3a0Success, with a word or icon

warning#9a5b00 / #f2b45aWarnings, with a word or icon

danger#b3261e / #ff8a80Errors, with a word or icon

Built on --space-*

A 4px-based scale. Cards use space-6 inside; sections are space-16 apart.

space-14px

space-28px

space-312px

space-416px

space-624px

space-1040px

space-1664px

Built on --radius-*, --shadow-card

Rounded like the wordmark. Shadows only for things that float.

radius-sm

radius-md

radius-lg

radius-pill

shadow-card