Design System
Live reference for all CSS custom properties, typography, spacing, and layout utilities. Click any token to copy its CSS variable. All values update live when switching themes.
60-30-10 Color System
60% deep charcoal base, 30% cool gray surfaces, 10% neon green accent on interactive elements only.
--neon-greenPrimary interactive accent — buttons, hovers, active states
--neon-green-hoverBrighter variant for hover states
--neon-green-mutedSubtle background tint for active/selected states
--bloomberg-orangeLegacy warm accent for secondary highlights
--primaryPrimary CTA color (= neon green)
--primary-foregroundText on primary backgrounds
--ringFocus ring color
--backgroundPage background — deep charcoal
--foregroundPrimary text color — warm white
--cardCard surface — subtle elevation
--card-foregroundText on card surfaces
--popoverPopover/dropdown background
--popover-foregroundText in popovers
--secondaryCool gray surface for secondary areas
--secondary-foregroundText on secondary surfaces
--mutedMuted background for subtle sections
--muted-foregroundSecondary/helper text
--accentAccent surface (hover backgrounds)
--accent-foregroundText on accent surfaces
--destructiveError/danger actions
--destructive-foregroundText on destructive backgrounds
--borderStructural borders — barely visible
--inputInput field borders
--bullishProfit green — financial data only
--bearishLoss red — financial data only
--neutral-signalNeutral/hold signal
--chart-1Primary chart series
--chart-2Secondary chart series
--chart-3Tertiary chart series
--chart-4Fourth chart series
--chart-5Fifth chart series
--sidebarSidebar background
--sidebar-foregroundSidebar text
--sidebar-primaryActive sidebar item
--sidebar-accentSidebar hover background
--sidebar-borderSidebar divider