Colors & Tokens

Semantic Colors

—accent

#0061a4

—green

#006d3b

—red

#ba1a1a

—orange

#8b5000

—purple

#6750a4

—cyan

#006876

Background Colors (with alpha)

—green-bg—red-bg—orange-bg—accent-container

Neutral Scale (gray-50 to gray-900)

10-step scale from lightest to darkest. In dark mode, the scale is inverted — --gray-900 becomes white, --gray-50 becomes near-black.

Token	Light	Usage
--gray-50	#f8f9fa	Hover backgrounds, input bg
--gray-100	#f1f3f4	Button bg, code bg, subtle surfaces
--gray-200	#e2e5e9	Borders, dividers
--gray-300	#c4c7c9	Scrollbar thumb, disabled dots
--gray-400	#9aa0a6	Placeholder, secondary icons
--gray-500	#616568	Muted text, labels, sidebar icons default
--gray-600	#5f6368	Secondary text, table headers
--gray-700	#3c4043	Body text, sidebar links
--gray-800	#2c2c2e	Dark buttons, strong text
--gray-900	#1b1b1f	Headings, page titles

Layout Tokens

Token	Value	Usage
--sidebar-w	240px	Sidebar width
--topbar-h	56px	Topbar height
--radius	12px	Default border radius (cards, inputs)
--radius-lg	16px	Large cards, modals
--shadow	subtle	Default card shadow
--shadow-md	medium	Hover elevation
--shadow-lg	large	Card hover, dropdowns