DESIGN.md / Color System

Infara swatch grid

Every color token in the portable design-system contract, grouped by role and generated directly from DESIGN.md.

Swatches
121
Unique
42
Groups
7

01 / Brand

Brand Identity

Identity anchors, action blue, promoted fuchsia, and the primary brand aliases that lead the main specs page.

identity-blue

#028AE1

Role
Primitive identity anchor
Alias
Canonical token
Contrast
3.67:1 vs background (large/UI only)

identity-fuchsia

#C019E2

Role
Primitive identity anchor
Alias
Canonical token
Contrast
4.69:1 vs background (AA text)

brand-blue-identity

#028AE1

Role
Compatibility alias
Alias
Alias of identity-blue
Contrast
3.67:1 vs background (large/UI only)

brand-fuchsia-identity

#C019E2

Role
Compatibility alias
Alias
Alias of identity-fuchsia
Contrast
4.69:1 vs background (AA text)

action-blue

#147EB3

Role
Operational brand accent
Alias
Canonical token
Contrast
4.50:1 vs background (AA text)

priority-fuchsia

#C811E4

Role
Operational brand accent
Alias
Canonical token
Contrast
4.51:1 vs background (AA text)

brand-blue

#147EB3

Role
Compatibility alias
Alias
Alias of action-blue
Contrast
4.50:1 vs background (AA text)

brand-fuchsia

#C811E4

Role
Compatibility alias
Alias
Alias of priority-fuchsia
Contrast
4.51:1 vs background (AA text)

brand

#147EB3

Role
Compatibility alias
Alias
Alias of primary
Contrast
4.50:1 vs background (AA text)

primary

#147EB3

Role
Operational brand accent
Alias
Same value as action-blue
Contrast
4.50:1 vs background (AA text)

primary-foreground

#FFFFFF

Role
Semantic surface role
Alias
Canonical token
Contrast
4.50:1 vs primary (AA text)

primary-soft

#E0F0FA

Role
Semantic product token
Alias
Canonical token
Contrast
1.17:1 vs background (non-text only)

brand-soft

#E0F0FA

Role
Compatibility alias
Alias
Alias of primary-soft
Contrast
1.17:1 vs background (non-text only)

tertiary

#C811E4

Role
Operational brand accent
Alias
Same value as priority-fuchsia
Contrast
4.51:1 vs background (AA text)

tertiary-foreground

#FFFFFF

Role
Semantic surface role
Alias
Same value as primary-foreground
Contrast
4.51:1 vs tertiary (AA text)

tertiary-soft

#F4E4FA

Role
Semantic product token
Alias
Canonical token
Contrast
1.21:1 vs background (non-text only)

priority

#A21CAF

Role
Compatibility alias
Alias
Alias of priority-emphasis
Contrast
6.32:1 vs background (AA text)

priority-emphasis

#A21CAF

Role
Semantic status role
Alias
Same value as priority
Contrast
6.32:1 vs background (AA text)

priority-soft

#F4E4FA

Role
Compatibility alias
Alias
Alias of tertiary-soft
Contrast
1.21:1 vs background (non-text only)

theme-primary-soft

#F4E4FA

Role
Compatibility alias
Alias
Alias of priority-soft
Contrast
1.21:1 vs background (non-text only)

02 / Promotion

Signature Gradient

Gradient endpoints and complete gradient recipes reserved for featured brand moments.

gradient-from

#147EB3

Role
Compatibility alias
Alias
Alias of action-blue
Contrast
4.20:1 vs dark-canvas (large/UI only)

gradient-to

#C811E4

Role
Compatibility alias
Alias
Alias of priority-fuchsia
Contrast
4.19:1 vs dark-canvas (large/UI only)

brand-gradient-from

#147EB3

Role
Compatibility alias
Alias
Alias of gradient-from
Contrast
4.20:1 vs dark-canvas (large/UI only)

brand-gradient-to

#C811E4

Role
Compatibility alias
Alias
Alias of gradient-to
Contrast
4.19:1 vs dark-canvas (large/UI only)

brand-gradient

linear-gradient(90deg, #147EB3, #C811E4)

Role
Operational brand accent
Alias
Canonical token
Contrast
Context-dependent

03 / Status

Status Pairs

Light and dark status roles kept together so semantic pairs are easy to compare.

info

#0369A1

Role
Semantic status role
Alias
Same value as link
Contrast
5.93:1 vs background (AA text)

dark-info

#79C8FF

Role
Mode-specific dark shell token
Alias
Same value as dark-ring
Contrast
10.37:1 vs dark-canvas (AA text)

link

#0369A1

Role
Semantic status role
Alias
Canonical token
Contrast
5.93:1 vs background (AA text)

dark-link

#79C8FF

Role
Compatibility alias
Alias
Alias of dark-info
Contrast
10.37:1 vs dark-canvas (AA text)

link-blue

#0369A1

Role
Compatibility alias
Alias
Alias of link
Contrast
5.93:1 vs background (AA text)

ring

#028AE1

Role
Semantic product token
Alias
Same value as identity-blue
Contrast
3.67:1 vs background (large/UI only)

dark-ring

#79C8FF

Role
Compatibility alias
Alias
Alias of dark-info
Contrast
10.37:1 vs dark-canvas (AA text)

success

#047857

Role
Semantic status role
Alias
Canonical token
Contrast
5.48:1 vs background (AA text)

dark-success

#4FD6A2

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
10.33:1 vs dark-canvas (AA text)

warning

#B45309

Role
Semantic status role
Alias
Canonical token
Contrast
5.02:1 vs background (AA text)

dark-warning

#F3C35B

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
11.50:1 vs dark-canvas (AA text)

warn

#B45309

Role
Compatibility alias
Alias
Alias of warning
Contrast
5.02:1 vs background (AA text)

danger

#BE123C

Role
Semantic status role
Alias
Canonical token
Contrast
6.29:1 vs background (AA text)

dark-danger

#FF7B8F

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
7.64:1 vs dark-canvas (AA text)

destructive

#C6283A

Role
Semantic status role
Alias
Canonical token
Contrast
5.58:1 vs background (AA text)

dark-destructive

#FF4D4F

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
5.79:1 vs dark-canvas (AA text)

destructive-foreground

#FFFFFF

Role
Semantic surface role
Alias
Same value as primary-foreground
Contrast
5.58:1 vs destructive (AA text)

dark-destructive-foreground

#FFFFFF

Role
Mode-specific dark shell token
Alias
Same value as primary-foreground
Contrast
3.27:1 vs dark-destructive (large/UI only)

processing

#0F766E

Role
Semantic status role
Alias
Canonical token
Contrast
5.47:1 vs background (AA text)

dark-processing

#27C2D1

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
8.76:1 vs dark-canvas (AA text)

neutral-status

#6B7280

Role
Semantic status role
Alias
Canonical token
Contrast
4.83:1 vs background (AA text)

dark-neutral-status

#A7B5C8

Role
Compatibility alias
Alias
Alias of dark-muted-foreground
Contrast
9.08:1 vs dark-canvas (AA text)

accent-info

#0369A1

Role
Compatibility alias
Alias
Alias of info
Contrast
5.93:1 vs background (AA text)

accent-positive

#047857

Role
Compatibility alias
Alias
Alias of success
Contrast
5.48:1 vs background (AA text)

accent-notice

#B45309

Role
Compatibility alias
Alias
Alias of warning
Contrast
5.02:1 vs background (AA text)

accent-negative

#BE123C

Role
Compatibility alias
Alias
Alias of danger
Contrast
6.29:1 vs background (AA text)

accent-processing

#0F766E

Role
Compatibility alias
Alias
Alias of processing
Contrast
5.47:1 vs background (AA text)

accent-foreground

#303030

Role
Semantic surface role
Alias
Same value as secondary-foreground
Contrast
12.32:1 vs accent (AA text)

04 / Neutral

Neutrals

The neutral scale and quiet metadata colors used before surface-specific semantic roles.

neutral-black

#303030

Role
Neutral scale token
Alias
Same value as secondary-foreground
Contrast
13.20:1 vs background (AA text)

neutral-dark

#737373

Role
Neutral scale token
Alias
Canonical token
Contrast
4.74:1 vs background (AA text)

neutral-muted

#6B6B6B

Role
Neutral scale token
Alias
Canonical token
Contrast
5.33:1 vs background (AA text)

neutral-gray

#D0D0CE

Role
Neutral scale token
Alias
Canonical token
Contrast
1.54:1 vs background (non-text only)

neutral-off

#F7F7F7

Role
Neutral scale token
Alias
Same value as secondary
Contrast
1.07:1 vs background (non-text only)

neutral

#F7F7F7

Role
Neutral scale token
Alias
Same value as secondary
Contrast
1.07:1 vs background (non-text only)

neutral-white

#FFFFFF

Role
Neutral scale token
Alias
Same value as primary-foreground
Contrast
1.00:1 vs background (non-text only)

05 / Dark

Dark Canvas Surfaces

Dark shell, canvas, surface, border, text, and soft-fill tokens for dense product screens.

nav

#060F21

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
1.01:1 vs dark-canvas (non-text only)

dark-canvas

#08111F

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
1.00:1 vs dark-canvas (non-text only)

dark-bg

#08111F

Role
Compatibility alias
Alias
Alias of dark-canvas
Contrast
1.00:1 vs dark-canvas (non-text only)

dark-background

#08111F

Role
Compatibility alias
Alias
Alias of dark-canvas
Contrast
1.00:1 vs dark-canvas (non-text only)

dark-surface-1

#101B2D

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
1.10:1 vs dark-canvas (non-text only)

dark-card

#101B2D

Role
Compatibility alias
Alias
Alias of dark-surface-1
Contrast
1.10:1 vs dark-canvas (non-text only)

dark-card-foreground

#F7FAFF

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
16.50:1 vs dark-card (AA text)

dark-surface-2

#121F33

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
1.14:1 vs dark-canvas (non-text only)

dark-bgsub

#121F33

Role
Compatibility alias
Alias
Alias of dark-surface-2
Contrast
1.14:1 vs dark-canvas (non-text only)

dark-secondary

#121F33

Role
Compatibility alias
Alias
Alias of dark-surface-2
Contrast
1.14:1 vs dark-canvas (non-text only)

dark-secondary-foreground

#D7E2F1

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
12.63:1 vs dark-secondary (AA text)

dark-muted-surface

#121F33

Role
Compatibility alias
Alias
Alias of dark-surface-2
Contrast
1.14:1 vs dark-canvas (non-text only)

dark-popover

#121F33

Role
Compatibility alias
Alias
Alias of dark-surface-2
Contrast
1.14:1 vs dark-canvas (non-text only)

dark-popover-foreground

#F7FAFF

Role
Mode-specific dark shell token
Alias
Same value as dark-card-foreground
Contrast
15.81:1 vs dark-popover (AA text)

dark-surface-3

#17263D

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
1.24:1 vs dark-canvas (non-text only)

dark-accent

#17263D

Role
Compatibility alias
Alias
Alias of dark-surface-3
Contrast
1.24:1 vs dark-canvas (non-text only)

dark-accent-foreground

#F7FAFF

Role
Mode-specific dark shell token
Alias
Same value as dark-card-foreground
Contrast
14.53:1 vs dark-accent (AA text)

dark-border

#21324A

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
1.46:1 vs dark-canvas (non-text only)

dark-muted

#8794AA

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
6.17:1 vs dark-canvas (AA text)

dark-gray

#8794AA

Role
Compatibility alias
Alias
Alias of dark-muted
Contrast
6.17:1 vs dark-canvas (AA text)

dark-foreground

#F7FAFF

Role
Mode-specific dark shell token
Alias
Same value as dark-card-foreground
Contrast
Context-dependent

dark-muted-foreground

#A7B5C8

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
1.47:1 vs dark-muted (non-text only)

dark-brand-soft

rgba(121, 200, 255, 0.16)

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
Context-dependent

dark-priority-soft

rgba(226, 107, 255, 0.16)

Role
Mode-specific dark shell token
Alias
Canonical token
Contrast
Context-dependent

dark-primary

#147EB3

Role
Mode-specific dark shell token
Alias
Same value as action-blue
Contrast
4.20:1 vs dark-canvas (large/UI only)

dark-primary-foreground

#FFFFFF

Role
Mode-specific dark shell token
Alias
Same value as primary-foreground
Contrast
4.50:1 vs dark-primary (AA text)

dark-priority

#E26BFF

Role
Compatibility alias
Alias
Alias of dark-priority-emphasis
Contrast
7.01:1 vs dark-canvas (AA text)

dark-priority-emphasis

#E26BFF

Role
Mode-specific dark shell token
Alias
Same value as dark-priority
Contrast
7.01:1 vs dark-canvas (AA text)

06 / Surface

Semantic Surfaces

Canvas, card, popover, muted, accent, border, input, and foreground roles after the foundational scales.

background

#FFFFFF

Role
Semantic surface role
Alias
Same value as primary-foreground
Contrast
1.00:1 vs background (non-text only)

foreground

#303030

Role
Semantic surface role
Alias
Same value as secondary-foreground
Contrast
13.20:1 vs background (AA text)

card

#F7F7F7

Role
Semantic surface role
Alias
Same value as secondary
Contrast
1.07:1 vs background (non-text only)

card-foreground

#303030

Role
Semantic surface role
Alias
Same value as secondary-foreground
Contrast
12.32:1 vs card (AA text)

surface

#F7F7F7

Role
Semantic surface role
Alias
Same value as secondary
Contrast
1.07:1 vs background (non-text only)

surface-raised

#FFFFFF

Role
Semantic surface role
Alias
Same value as primary-foreground
Contrast
1.00:1 vs background (non-text only)

secondary

#F7F7F7

Role
Semantic product token
Alias
Canonical token
Contrast
1.07:1 vs background (non-text only)

secondary-foreground

#303030

Role
Semantic surface role
Alias
Canonical token
Contrast
12.32:1 vs secondary (AA text)

muted

#F7F7F7

Role
Semantic surface role
Alias
Same value as secondary
Contrast
1.07:1 vs background (non-text only)

muted-foreground

#6B6B6B

Role
Semantic surface role
Alias
Same value as neutral-muted
Contrast
4.97:1 vs muted (AA text)

popover

#FFFFFF

Role
Semantic surface role
Alias
Same value as primary-foreground
Contrast
1.00:1 vs background (non-text only)

popover-foreground

#303030

Role
Semantic surface role
Alias
Same value as secondary-foreground
Contrast
13.20:1 vs popover (AA text)

accent

#F7F7F7

Role
Semantic surface role
Alias
Same value as secondary
Contrast
1.07:1 vs background (non-text only)

border

#D0D0CE

Role
Semantic surface role
Alias
Same value as neutral-gray
Contrast
1.54:1 vs background (non-text only)

input

#D0D0CE

Role
Semantic surface role
Alias
Same value as neutral-gray
Contrast
1.54:1 vs background (non-text only)

07 / Data

Chart Palette

Categorical chart swatches plus theme chart aliases for light and dark visualization roles.

chart-1

#79C8FF

Role
Fixed categorical chart color
Alias
Same value as dark-ring
Contrast
10.37:1 vs dark-canvas (AA text)

chart-2

#27C2D1

Role
Fixed categorical chart color
Alias
Same value as dark-processing
Contrast
8.76:1 vs dark-canvas (AA text)

chart-3

#4FD6A2

Role
Fixed categorical chart color
Alias
Same value as dark-success
Contrast
10.33:1 vs dark-canvas (AA text)

chart-4

#F3C35B

Role
Fixed categorical chart color
Alias
Same value as dark-warning
Contrast
11.50:1 vs dark-canvas (AA text)

chart-5

#FF8A68

Role
Fixed categorical chart color
Alias
Canonical token
Contrast
8.18:1 vs dark-canvas (AA text)

chart-6

#D44CFF

Role
Fixed categorical chart color
Alias
Canonical token
Contrast
5.65:1 vs dark-canvas (AA text)

theme-chart-1

#0369A1

Role
Theme-resolved chart color
Alias
Same value as link
Contrast
5.93:1 vs background (AA text)

theme-chart-2

#0F766E

Role
Theme-resolved chart color
Alias
Same value as processing
Contrast
5.47:1 vs background (AA text)

theme-chart-3

#047857

Role
Theme-resolved chart color
Alias
Same value as success
Contrast
5.48:1 vs background (AA text)

theme-chart-4

#B45309

Role
Theme-resolved chart color
Alias
Same value as warning
Contrast
5.02:1 vs background (AA text)

theme-chart-5

#A21CAF

Role
Theme-resolved chart color
Alias
Same value as priority
Contrast
6.32:1 vs background (AA text)

theme-chart-6

#0369A1

Role
Theme-resolved chart color
Alias
Same value as link
Contrast
5.93:1 vs background (AA text)

dark-theme-chart-1

#79C8FF

Role
Mode-specific dark shell token
Alias
Same value as dark-ring
Contrast
10.37:1 vs dark-canvas (AA text)

dark-theme-chart-2

#27C2D1

Role
Mode-specific dark shell token
Alias
Same value as dark-processing
Contrast
8.76:1 vs dark-canvas (AA text)

dark-theme-chart-3

#4FD6A2

Role
Mode-specific dark shell token
Alias
Same value as dark-success
Contrast
10.33:1 vs dark-canvas (AA text)

dark-theme-chart-4

#F3C35B

Role
Mode-specific dark shell token
Alias
Same value as dark-warning
Contrast
11.50:1 vs dark-canvas (AA text)

dark-theme-chart-5

#E26BFF

Role
Mode-specific dark shell token
Alias
Same value as dark-priority
Contrast
7.01:1 vs dark-canvas (AA text)

dark-theme-chart-6

#79C8FF

Role
Compatibility alias
Alias
Alias of dark-theme-chart-1
Contrast
10.37:1 vs dark-canvas (AA text)