$background-default: rgb(5, 7, 9); // Page canvas — the base background behind all content.
$background-subtle: rgb(14, 17, 19); // Subtly differentiated background for alternating or grouped sections.
$surface-default: rgb(14, 17, 19); // Default container surface — cards, panels, and inputs on the page.
$surface-raised: rgb(34, 39, 43); // Raised surface for higher-elevation layers (menus, popovers, dialogs). Higher elevation reads lighter in dark mode.
$surface-sunken: rgb(5, 7, 9); // Recessed surface for wells and inset regions.
$text-default: rgb(245, 245, 245); // Primary body and heading text.
$text-muted: rgb(205, 211, 214); // Secondary text — supporting copy, captions, metadata.
$text-subtle: rgb(136, 143, 146); // Tertiary text — placeholders and disabled labels. The mid-grey reads in both modes.
$text-inverse: rgb(5, 7, 9); // Text and icons rendered on an action or solid fill.
$text-link: rgb(140, 224, 255); // Inline hyperlink text.
$border-default: rgb(53, 59, 63); // Default border for inputs, cards, and dividers.
$border-subtle: rgb(34, 39, 43); // Low-emphasis border for subtle separation.
$border-strong: rgb(136, 143, 146); // High-emphasis border for focus and selected states.
$action-default: rgb(38, 174, 255); // Primary interactive colour — buttons, links, key accents. NSW navy in light, brightened for contrast in dark.
$action-hover: rgb(140, 224, 255); // Hover and active state for primary actions.
$action-subtle: rgb(0, 16, 55); // Tinted background for low-emphasis (ghost) actions.
$success-surface: rgb(0, 22, 0); // Success (positive outcomes and confirmations) — tinted background.
$success-text: rgb(143, 199, 138); // Success (positive outcomes and confirmations) — readable text on the tint.
$success-border: rgb(0, 90, 2); // Success (positive outcomes and confirmations) — border and divider.
$success-solid: rgb(57, 153, 54); // Success (positive outcomes and confirmations) — solid fill for badges and icons.
$warning-surface: rgb(39, 4, 0); // Warning (caution and pending states) — tinted background.
$warning-text: rgb(238, 168, 138); // Warning (caution and pending states) — readable text on the tint.
$warning-border: rgb(136, 47, 3); // Warning (caution and pending states) — border and divider.
$warning-solid: rgb(211, 103, 52); // Warning (caution and pending states) — solid fill for badges and icons.
$danger-surface: rgb(35, 0, 2); // Danger (errors and destructive actions) — tinted background.
$danger-text: rgb(234, 146, 148); // Danger (errors and destructive actions) — readable text on the tint.
$danger-border: rgb(124, 6, 31); // Danger (errors and destructive actions) — border and divider.
$danger-solid: rgb(198, 63, 78); // Danger (errors and destructive actions) — solid fill for badges and icons.
$info-surface: rgb(2, 7, 28); // Info (neutral information) — tinted background.
$info-text: rgb(128, 152, 194); // Info (neutral information) — readable text on the tint.
$info-border: rgb(25, 51, 102); // Info (neutral information) — border and divider.
$info-solid: rgb(66, 100, 164); // Info (neutral information) — solid fill for badges and icons.