Design System

Color Token Chart

Blue / Azure / Red palette  Β·  25 tokens  Β·  verified against Pulse Foundations

v2.5  Β·  2026-04-07
βœ“ confirmedToken value matches existing DS
β—ˆ in DSColor exists in Pulse Foundations
+ new tokenToken name is new, color exists in DS
β–³ updateValue needs to be filled in

Background

#TokenDescriptionDarkLightStatus
1bg.canvas Full page canvas beneath all surfaces gray/900 Β· #0a1530 gray/100 Β· #f5f7f9 βœ“ confirmed
2bg.card Cards, table panels, modular containers gray/800 50% Β· rgba #ffffff βœ“ confirmed
3bg.nav Left navigation background gray/800 50% Β· rgba #ffffff βœ“ confirmed
4bg.header Page header background gray/800 50% Β· rgba #ffffff βœ“ confirmed
5bg.input Input field, select, dropdown trigger background gray/800 50% Β· rgba #ffffff + new token
6bg.dropdown Dropdown panel / date picker background (solid, no opacity) gray/800 Β· #203053 #ffffff + new token
7bg.overlay Modal, popover, context menu β€” elevated layer gray/800 Β· #203053 #ffffff + new token
8bg.accent Selected / highlighted element background β€” list items, icon badges #1C377F β€” light TBD βœ“ confirmed

Border

#TokenDescriptionDarkLightStatus
8border.subtle Dividers, section separators β€” low emphasis blue-700 Β· #1d3b69 blue-200 Β· #becfea + new token
9border.default Table, button, and section borders gray/700 Β· #415377 gray/200 Β· #d9dde7 βœ“ confirmed
10border.focus Hovered / focused interactive element borders azure/300 Β· #5373ea azure/500 Β· #1b44da βœ“ confirmed
11border.error Error and destructive state component borders red/400 40% Β· rgba(#d45368) red/200 Β· #edb8c1 β—ˆ in DS

Text

#TokenDescriptionDarkLightStatus
12text.tertiary Placeholder, unavailable, non-interactive text gray/400 Β· #a2adc4 gray/600 Β· #67789d βœ“ confirmed
13text.secondary Nav items, sub-headings, supporting labels gray/300 Β· #bfc6d6 gray/700 Β· #415377 βœ“ confirmed
14text.primary Page titles, card headings, primary body copy gray/200 Β· #d9dde7 gray/800 Β· #203053 βœ“ confirmed
15text.onAccent Text placed on colored / accent-filled surfaces #8DB4FF (nav azul) #ffffff βœ“ confirmed
16text.error Error message and destructive state text red/300 Β· #e18896 red/500 Β· #c8223d β—ˆ in DS

Icon

#TokenDescriptionDarkLightStatus
17Icons.inactive Inactive / resting icon state gray/400 Β· #a2adc4 gray/700 Β· #415377 βœ“ confirmed
18Icons.active Active / selected icon β€” nav azul #8DB4FF (nav azul) azure/500 Β· #1b44da β–³ update

Error β€” Component Set

#TokenDescriptionDarkLightStatus
19error.bg Error component / banner background red/500 40% Β· rgba(#c8223d) red/100 Β· #fbedef β—ˆ in DS
20error.border Error component border red/400 40% Β· rgba(#d45368) red/200 Β· #edb8c1 β—ˆ in DS
21error.text Error message text inside error component red/300 Β· #e18896 red/500 Β· #c8223d β—ˆ in DS

Button β€” Azure Primary

#TokenDescriptionDarkLightStatus
22btn.primary.bg Primary button background β€” same in both modes azure/500 Β· #1b44da azure/500 Β· #1b44da β—ˆ in DS
23btn.primary.bg.hover Primary button hover state azure/400 Β· #3c61e7 azure/600 Β· #14329f β—ˆ in DS
24btn.primary.text Text on primary button surface #8DB4FF (nav azul) #ffffff βœ“ confirmed
25btn.tint.bg Tint / secondary button background azure/700 Β· #102984 azure/100 Β· #e4e9fc β—ˆ in DS
26btn.tint.text Text color on tint button azure/200 Β· #97aaf2 azure/600 Β· #14329f β—ˆ in DS

Button β€” Neutral Default / Ghost

#TokenDescriptionDarkLightStatus
27btn.default.border Default / ghost button border β€” one step brighter than border.default gray/600 Β· #67789d gray/200 Β· #d9dde7 βœ“ confirmed
28btn.default.text Default button label color gray/300 Β· #bfc6d6 gray/700 Β· #415377 βœ“ confirmed
29btn.ghost.text Ghost / icon-only button β€” no border gray/300 Β· #bfc6d6 gray/600 Β· #67789d βœ“ confirmed

Button β€” Danger

#TokenDescriptionDarkLightStatus
30btn.danger.bg Danger button background red/600 Β· #9c1b30 #ffffff β—ˆ in DS
31btn.danger.bg.hover Danger button hover state red/500 Β· #c8223d β€” existing component β€” no change β—ˆ in DS
32btn.danger.border Danger button border red/500 Β· #c8223d red/500 Β· #c8223d β—ˆ in DS
33btn.danger.text Danger button label red/200 Β· #edb8c1 red/500 Β· #c8223d β—ˆ in DS

Graph Colors

Graph Color Palette

Light β†’ Dark mode mapping Β· WCAG Non-text 3:1 standard

Graph lines and dots use Non-text contrast standard β€” 3:1 or above passes WCAG AA. Legend and label text must separately meet 4.5:1. Dark shades (e.g. #711323) are invisible on dark backgrounds β€” replacement with lighter values is required.
# Original (Light) Dark mode WCAG

Live Preview

Query count per server Light mode
Markers
Query count per server Dark mode
Markers
Color Token Chart  Β·  Blue / Azure / Red palette  Β·  35 tokens  Β·  v2.5
βœ“ JSON copied to clipboard