Color System

The AHTG color palette is semantic and purposeful. Each color communicates meaning and guides user understanding. All color values are extracted from Figma Variables and enforced through design tokens.

star Primary (Blue)

Usage Rule: Primary blue is reserved exclusively for Save and Update actions. This creates a strong visual association between blue and committing changes.

Light
Primary Light
#E3F2FD
tokens.colors.primary.light
Backgrounds, hover states, selected states
Main
Primary Main
#2196F3
tokens.colors.primary.main
Save/Update button backgrounds, primary actions
Dark
Primary Dark
#1976D2
tokens.colors.primary.dark
Hover states, active states, emphasis

layers Secondary (Grey)

Usage Rule: Secondary grey is used for Edit actions and general navigation. It provides visual hierarchy without competing with primary actions.

Main
Secondary Main
#F5F5F5
tokens.colors.secondary.main
Edit button backgrounds, neutral actions
Dark
Secondary Dark
#616161
tokens.colors.secondary.dark
Text on secondary backgrounds, borders
Outline
Secondary Outline
#E0E0E0
tokens.colors.secondary.outline
Borders, dividers, outlines

emoji_objects Semantic Colors

Semantic colors communicate status, urgency, and action consequence. Use consistently to build user understanding.

Success

Confirm, Approve, Activate — positive outcomes and completed states.

Light
Success Light
#E8F5E9
tokens.colors.success.light
Alert backgrounds, chip backgrounds, status badges
Main
Success Main
#388E3C
tokens.colors.success.main
Button backgrounds, icons, text indicators
Dark
Success Dark
#2E7D32
tokens.colors.success.dark
Hover/pressed states on success actions

Error

Delete, Remove, Deactivate — destructive actions and failure states.

Light
Error Light
#FBEAED
tokens.colors.error.light
Alert backgrounds, chip backgrounds, status badges
Main
Error Main
#DB4537
tokens.colors.error.main
Button backgrounds, icons, validation borders
Dark
Error Dark
#BB3430
tokens.colors.error.dark
Hover/pressed states on error actions

Warning

Archive, Deprecate, Force Update — actions requiring caution.

Light
Warning Light
#FCF1E0
tokens.colors.warning.light
Alert backgrounds, chip backgrounds, status badges
Main
Warning Main
#E17109
tokens.colors.warning.main
Button backgrounds, icons, text indicators
Dark
Warning Dark
#DA6207
tokens.colors.warning.dark
Hover/pressed states on warning actions

Info

Learn More, Details, Help — informational context and neutral data visualization.

Light
Info Light
#E4F7FD
tokens.colors.info.light
Alert backgrounds, chip backgrounds, accent surfaces
Main
Info Main
#54AFCA
tokens.colors.info.main
Icons, text indicators, informational elements
Dark
Info Dark
#4B9AB0
tokens.colors.info.dark
Hover/pressed states on info actions

format_color_text Text Colors

Primary
Text Primary
#212121
tokens.colors.text.primary
Main content, headlines, labels
Secondary
Text Secondary
#757575
tokens.colors.text.secondary
Supporting text, descriptions, captions
Disabled
Text Disabled
#9E9E9E
tokens.colors.text.disabled
Disabled text, inactive states

gradient Background Colors

Background colors create surface hierarchy. Default is for application pages, Paper is where most content sits, Secondary is for page canvas, and Accent highlights cards and selections.

Default
Background Default
#F5F5F5
tokens.colors.background.default
Application background pages only
Paper
Background Paper
#FFFFFF
tokens.colors.background.paper
White - most content sits on paper (cards, modals, containers)
Secondary
Background Secondary
#FAFAFA
tokens.colors.background.secondary
Page canvas (different from default application background)
Accent
Background Accent
#E4F7FD
tokens.colors.background.accent
Highlight cards and selections

palette Material Color Palette

These are the base material color values from the Figma Variables (materials collection). Every color in the design system — semantic tokens, chart colors, component states — is derived from tones within these strips. Engineers should reference these values as the foundation when building any visual hierarchy.

Primary
50
#E3F2FD
100
#BBDEFB
200
#90CAF9
300
#64B5F6
400
#42A5F5
500
#2196F3
600
#1E88E5
700
#1976D2
800
#1565C0
900
#0D47A1
Info
50
#E4F7FD
100
#BBECF9
200
#92E0F4
300
#6FD3ED
400
#5EC9E5
500
#5BBFDE
600
#54AFCA
700
#4B9AB0
800
#448697
900
#37636B
Success
50
#E8F5E9
100
#C8E6C9
200
#A5D6A7
300
#81C784
400
#66BB6A
500
#4CAF50
600
#43A047
700
#388E3C
800
#2E7D32
900
#1B5E20
Warning
50
#FCF1E0
100
#F9DBB1
200
#F4C47F
300
#F0AD4E
400
#ED9B2B
500
#EB8B0C
600
#E7800B
700
#E17109
800
#DA6207
900
#E65100
Error
50
#FBEAED
100
#F6CBCF
200
#E19897
300
#D27170
400
#D9544F
500
#DB4537
600
#CD3D36
700
#BB3430
800
#AE2E29
900
#A0241E
Grey
50
#FAFAFA
100
#F5F5F5
200
#EEEEEE
300
#E0E0E0
400
#BDBDBD
500
#9E9E9E
600
#757575
700
#616161
800
#424242
900
#212121

rule Color Usage Rules

Color When to Use When NOT to Use
Primary Blue Save, Update, Apply Changes buttons only Edit, Cancel, Delete, or any non-save action
Secondary Grey Edit, Cancel, Close, Back, general navigation Save/Update actions, destructive actions
Success Green Confirm, Approve, Activate, positive outcomes General actions, neutral navigation
Error Red Delete, Remove, Deactivate, destructive actions Warnings, general alerts, non-destructive actions
Warning Orange Archive, Deprecate, actions requiring caution Errors, destructive actions, informational content
Info Blue Learn More, Details, Help, informational actions Primary actions, warnings, errors