Color

Color tokens help maintain consistent use of color throughout our apps.

Token	Value	Example
`--ahi-background`	#f8fbfd#0b1015
`--ahi-background-hovered`	#f1f4f8#12181d
`--ahi-background-depressed`	#e6eaef#1b2127
`--ahi-background-selected`	#e6eaef#1b2127
`--ahi-surface`	#ffffff#1b2127
`--ahi-surface-neutral`	#e6eaef#272d34
`--ahi-surface-neutral-hovered`	#d8dde3#383f47
`--ahi-surface-neutral-depressed`	#c5ccd3#51575f
`--ahi-surface-neutral-disabled`	#f1f4f8#1b2127
`--ahi-surface-neutral-subdued`	#f8fbfd#1b2127
`--ahi-surface-subdued`	#f8fbfd#12181d
`--ahi-surface-disabled`	#f8fbfd#12181d
`--ahi-surface-hovered`	#f8fbfd#272d34
`--ahi-surface-depressed`	#e6eaef#383f47
`--ahi-surface-search-field`	#f1f4f8#12181d
`--ahi-backdrop`	#00000080#00000080
`--ahi-overlay`	#ffffff80#12181d80
`--ahi-border`	#868e96#70777e
`--ahi-border-neutral-subdued`	#abb3ba#51575f
`--ahi-border-hovered`	#677079#949ba1
`--ahi-border-disabled`	#d8dde3#383f47
`--ahi-border-subdued`	#c5ccd3#51575f
`--ahi-border-depressed`	#677079#949ba1
`--ahi-border-shadow`	#abb3ba#51575f
`--ahi-border-shadow-subdued`	#c5ccd3#383f47
`--ahi-divider`	#e6eaef#272d34
`--ahi-icon`	#677079#949ba1
`--ahi-icon-hovered`	#1c252f#e2e7eb
`--ahi-icon-depressed`	#1c252f#e2e7eb
`--ahi-icon-disabled`	#c5ccd3#51575f
`--ahi-icon-subdued`	#868e96#70777e
`--ahi-text`	#1c252f#e2e7eb
`--ahi-text-disabled`	#868e96#70777e
`--ahi-text-subdued`	#677079#949ba1
`--ahi-interactive`	#0a77bc#65aae4
`--ahi-interactive-disabled`	#c5ccd3#51575f
`--ahi-interactive-hovered`	#00619c#8dc2f1
`--ahi-interactive-depressed`	#004a7a#b2d8fb
`--ahi-focused`	#3a91d4#65aae4
`--ahi-surface-selected`	#eef6ff#21303e
`--ahi-surface-selected-hovered`	#d7eafa#233546
`--ahi-surface-selected-depressed`	#b2d8fb#253c51
`--ahi-icon-on-interactive`	#ffffff#0b1015
`--ahi-text-on-interactive`	#ffffff#0b1015
`--ahi-action-secondary`	#ffffff#272d34
`--ahi-action-secondary-disabled`	#ffffff#1b2127
`--ahi-action-secondary-hovered`	#f8fbfd#383f47
`--ahi-action-secondary-depressed`	#f1f4f8#51575f
`--ahi-action-primary`	#0a77bc#0a77bc
`--ahi-action-primary-disabled`	#f1f4f8#272d34
`--ahi-action-primary-hovered`	#00619c#00619c
`--ahi-action-primary-depressed`	#004a7a#004a7a
`--ahi-icon-on-primary`	#ffffff#ffffff
`--ahi-text-on-primary`	#ffffff#ffffff
`--ahi-text-primary`	#00619c#65aae4
`--ahi-text-primary-hovered`	#004a7a#8dc2f1
`--ahi-text-primary-depressed`	#002f52#b2d8fb
`--ahi-surface-primary-selected`	#eef6ff#21303e
`--ahi-surface-primary-selected-hovered`	#d7eafa#233546
`--ahi-surface-primary-selected-depressed`	#b2d8fb#253c51
`--ahi-border-critical`	#e63d2f#ff6452
`--ahi-border-critical-subdued`	#ffbeb4#d00001
`--ahi-border-critical-disabled`	#ffded9#a70002
`--ahi-icon-critical`	#d00001#ff9585
`--ahi-surface-critical`	#ffded9#5f3837
`--ahi-surface-critical-subdued`	#fff8f7#3b2c2f
`--ahi-surface-critical-subdued-hovered`	#fff8f6#453031
`--ahi-surface-critical-subdued-depressed`	#ffded9#543534
`--ahi-text-critical`	#d00001#ffbeb4
`--ahi-action-critical`	#d00001#d00001
`--ahi-action-critical-disabled`	#f1f4f8#272d34
`--ahi-action-critical-hovered`	#a70002#a70002
`--ahi-action-critical-depressed`	#770003#770003
`--ahi-icon-on-critical`	#ffffff#ffffff
`--ahi-text-on-critical`	#ffffff#ffffff
`--ahi-interactive-critical`	#d00001#ff9585
`--ahi-interactive-critical-disabled`	#ffbeb4#d00001
`--ahi-interactive-critical-hovered`	#a70002#ffbeb4
`--ahi-interactive-critical-depressed`	#770003#ffded9
`--ahi-border-warning`	#bd8706#d7a240
`--ahi-border-warning-subdued`	#feda9e#a07200
`--ahi-icon-warning`	#bd8706#eabd71
`--ahi-surface-warning`	#feda9e#514835
`--ahi-surface-warning-subdued`	#fffaf1#34332e
`--ahi-surface-warning-subdued-hovered`	#fff9ef#3c3931
`--ahi-surface-warning-subdued-depressed`	#fff5e4#484133
`--ahi-text-warning`	#845d00#feda9e
`--ahi-border-highlight`	#3a91d4#3a91d4
`--ahi-border-highlight-subdued`	#8dc2f1#00619c
`--ahi-icon-highlight`	#0a77bc#65aae4
`--ahi-surface-highlight`	#b2d8fb#274259
`--ahi-surface-highlight-subdued`	#eef6ff#21303e
`--ahi-surface-highlight-subdued-hovered`	#d7eafa#233546
`--ahi-surface-highlight-subdued-depressed`	#b2d8fb#253c51
`--ahi-text-highlight`	#00619c#8dc2f1
`--ahi-border-success`	#00964c#3faf68
`--ahi-border-success-subdued`	#97dca9#007c3d
`--ahi-icon-success`	#007c3d#6dc688
`--ahi-surface-success`	#bceec9#294a3c
`--ahi-surface-success-subdued`	#f2fef6#223431
`--ahi-surface-success-subdued-hovered`	#e3fbe8#243a34
`--ahi-surface-success-subdued-depressed`	#bceec9#274338
`--ahi-text-success`	#007c3d#97dca9
`--ahi-icon-attention`	#845d00#eabd71
`--ahi-surface-attention`	#fff5e4#584d37

Brand colors

AKU’s colors are built from the Azalea Health Brand Guidelines (2025). The three logo colors and navy match the guidelines exactly. The guidelines’ other colors either land on an existing ramp step or are marketing accents that product UI doesn’t use. Use the brand tokens where the brand itself shows: the logo, sign-in pages, app chrome. For interface roles such as actions, status and text, use the semantic tokens above, which are built from these and meet WCAG AA.

Guidelines color	Guidelines value	AKU token	Match
Logo blue	`#0A77BC`	`--ahi-brand-blue` (`--ahi-color-blue-600`)	Exact
Red	`#E63D2F`	`--ahi-brand-red` (`--ahi-color-red-600`)	Exact
Green	`#00964C`	`--ahi-brand-green` (`--ahi-color-green-600`)	Exact
Dark blue (navy)	`#112749`	`--ahi-brand-navy`	Exact
Light blue	`#CEE4F2`	`--ahi-color-blue-100`	Nearest step (ΔE2000 2.2)
Dark gradient, top	`#0077C0`	`--ahi-color-blue-600`	Nearest step (ΔE2000 0.5)
Dark gradient, bottom	`#005DA6`	`--ahi-color-blue-700`	Nearest step (ΔE2000 2.8)
Light gradient, bottom	`#F3F5F9`	`--ahi-color-gray-200` (light theme)	Nearest step (ΔE2000 0.5). Gray steps flip in the dark theme
Yellow	`#EDBB2B`	None	Marketing accent, 1.8:1 on white. AKU’s yellow ramp is the functional warning amber
Light green	`#61B18C`	None	Marketing accent, 2.6:1 on white
Dark gray (text)	`#3C4958`	None (`--ahi-text` is darker)	Product text uses the darker `--ahi-text` for dense interfaces. The guidelines’ gray is 9.2:1 on white if a page wants it

The light gradient’s top color is the light blue above.