Topliner — Brand Color Palette (primary, neutral, semantic tokens)

topliner-brand-colors.md

Topliner — Brand Color Palette

Source of truth: resources/css/app.css (HSL design tokens). HEX values computed from HSL.

Primary brand font: Figtree (300–700). Landing (/new) pairing: Newsreader (serif headings), Hanken Grotesk (body), IBM Plex Mono (labels/mono).

Primary — brand blue (#0DA2E7)

Token	HEX	HSL
primary-50	#F0FAFF	199 100% 97%
primary-100	#DDF3FE	199 92% 93%
primary-200	#BAE8FD	199 94% 86%
primary-300	#7AD2FA	199 93% 73%
primary-400	#41BDF6	199 91% 61%
primary-500 / DEFAULT	#0DA2E7	199 89% 48%
primary-600	#1082B7	199 84% 39%
primary-700	#11668D	199 79% 31%
primary-800	#115473	199 74% 26%
primary-900	#11465F	199 69% 22%
primary-950	#042F43	199 89% 14%

Secondary / Neutral — slate gray

Token	HEX	HSL
secondary-50	#F6F7F9	220 23% 97%
secondary-100	#EDEFF3	220 20% 94%
secondary-200	#DBDFE6	220 18% 88%
secondary-300	#C4C9D4	220 16% 80%
secondary-400	#A7AFBE	220 15% 70%
secondary-500	#8B94A7	220 14% 60%
secondary-600	#6F7A90	220 13% 50%
secondary-700	#5A6272	220 12% 40%
secondary-800	#444A55	220 11% 30%
secondary-900	#32363E	220 10% 22%
secondary-950	#23252A	220 9% 15%

Semantic

Purpose	HEX	HSL
Background	#FFFFFF	0 0% 100%
Foreground (text/ink)	#344256	215 25% 27%
Muted bg	#F3F4F6	220 14% 96%
Border	#E5E7EB	220 13% 91%
Destructive (red)	#EF4343	0 84% 60%
Primary-foreground	#F8FAFC	210 40% 98%
Sidebar accent (purple)	#6F42C2	261 51% 51%