Colors
Navy for structure. Gold for emphasis. Semantic colours keep surfaces, text and feedback readable in both schemes.
Every swatch shows light on the left and dark on the right. Values resolve from the current token stylesheet. Copy a token name to use it in your CSS.
Select a token to copy its name.
Brand
--brand-navyLight #0a192fDark #0a192f--primaryLight #0a192fDark #c5a065--primary-hoverLight #1a3358Dark #b8904f--brandLight #c5a065Dark #c5a065--brand-hoverLight #b8904fDark #b8904f--brand-textLight #8a5a1fDark #c5a065--brand-on-fillLight #b8904fDark #c5a065--brand-foregroundLight #0a192fDark #0a192f--on-darkLight #f1f5f9Dark #f1f5f9Surfaces and text
--backgroundLight #f4f6f8Dark #0a192f--foregroundLight #1e293bDark #f1f5f9--foreground-strongLight #0a192fDark #f1f5f9--muted-foregroundLight #475569Dark rgb(241, 245, 249, 0.72)--cardLight #fffDark #112240--popoverLight #fffDark #112240--mutedLight #f4f6f8Dark #0a192f--accentLight rgb(197, 160, 101, 0.08)Dark rgb(197, 160, 101, 0.08)--borderLight #e2e8f0Dark rgb(255, 255, 255, 0.12)--border-strongLight #cbd5e1Dark rgb(255, 255, 255, 0.28)--inputLight #cbd5e1Dark rgb(255, 255, 255, 0.28)--ringLight #c5a065Dark #c5a065Status
--successLight #15803dDark #15803d--success-textLight #166534Dark #4ade80--success-bgLight rgb(34, 197, 94, 0.1)Dark rgb(34, 197, 94, 0.1)--errorLight #b91c1cDark #b91c1c--error-textLight #b91c1cDark #f87171--error-bgLight rgb(239, 68, 68, 0.1)Dark rgb(239, 68, 68, 0.1)--warningLight #b45309Dark #b45309--warning-textLight #92400eDark #fbbf24--warning-bgLight rgb(245, 158, 11, 0.1)Dark rgb(245, 158, 11, 0.1)--infoLight #1d4ed8Dark #1d4ed8--info-textLight #1d4ed8Dark #60a5fa--info-bgLight rgb(59, 130, 246, 0.1)Dark rgb(59, 130, 246, 0.1)Charts and sidebar
--chart-1Light #c5a065Dark #c5a065--chart-2Light #0a192fDark #0a192f--chart-3Light #1d4ed8Dark #1d4ed8--chart-4Light #15803dDark #15803d--chart-5Light #b45309Dark #b45309--sidebarLight #fffDark #112240--sidebar-foregroundLight #1e293bDark #f1f5f9--sidebar-primaryLight #c5a065Dark #c5a065--sidebar-accentLight rgb(197, 160, 101, 0.08)Dark rgb(197, 160, 101, 0.08)--sidebar-borderLight #e2e8f0Dark rgb(255, 255, 255, 0.12)Using colour
Use --brand-text for gold text on light surfaces. --brand is a decorative fill; actions pair --primary with --primary-foreground; permanent navy uses --brand-navy. Status text uses the -text token rather than the solid fill.
.notice {
color: var(--success-text);
background: var(--success-bg);
}