Foundations · Color

All color tokens

Every semantic color token in the system — 143 total — with light and dark values resolved from the Figma export. Filter by category, search by name, click any row to copy the token.

Documentedby Derek Fidler

One source of truth

These values come straight from figma-color-export.json at apps/portal/lib/docs/. Re-export from Figma → drop the new JSON in → the table updates automatically. No hand-curation, no drift.

How tokens are named

Each token follows the shape property.role[.emphasis][.state] — for example background.danger, text.numeric.negative, background.interactive.primary.hover. Properties group by what the token paints — background, text, border, icon — and each property exposes the roles, emphasis levels, and interactive states that make sense for it.

The Light and Dark columns below show which primitive each token resolves to in each theme. color/green/100 means the primitive at color.green.100 in the Figma export.

All tokens

143 of 143

Background

61

  • Accent background tinted blue, subtle (one step softer).

    Updated 2 May 2026

    blue/300
    blue/800

  • Accent background tinted blue, subtler (two steps softer).

    Updated 2 May 2026

    blue/200
    blue/900

  • Accent background tinted blue, subtlest (lightest tint).

    Updated 2 May 2026

    blue/100
    blue/1000

  • Accent background tinted blurple, subtle (one step softer).

    Updated 2 May 2026

    blurple/300
    blurple/800

  • Accent background tinted blurple, subtler (two steps softer).

    Updated 2 May 2026

    blurple/200
    blurple/900

  • Accent background tinted blurple, subtlest (lightest tint).

    Updated 2 May 2026

    blurple/100
    blurple/1000

  • Accent background tinted green, subtle (one step softer).

    Updated 2 May 2026

    green/300
    green/800

  • Accent background tinted green, subtler (two steps softer).

    Updated 2 May 2026

    green/200
    green/900

  • Accent background tinted green, subtlest (lightest tint).

    Updated 2 May 2026

    green/100
    green/1000

  • Accent background tinted inverse, subtle (one step softer).

    Updated 2 May 2026

    neutral/900
    neutral/200

  • Accent background tinted inverse, subtler (two steps softer).

    Updated 2 May 2026

    neutral/1000
    neutral/100

  • Accent background tinted inverse, subtlest (lightest tint).

    Updated 2 May 2026

    neutral/1100
    neutral/0

  • Accent background tinted natural, subtle (one step softer).

    Updated 2 May 2026

    natural/300
    natural/800

  • Accent background tinted natural, subtler (two steps softer).

    Updated 2 May 2026

    natural/200
    natural/900

  • Accent background tinted natural, subtlest (lightest tint).

    Updated 2 May 2026

    natural/100
    natural/1000

  • Accent background tinted neutral, subtle (one step softer).

    Updated 2 May 2026

    neutral/200
    neutral/900

  • Accent background tinted neutral, subtler (two steps softer).

    Updated 2 May 2026

    neutral/100
    neutral/1000

  • Accent background tinted neutral, subtlest (lightest tint).

    Updated 2 May 2026

    neutral/0
    neutral/1100

  • Accent background tinted orange, subtle (one step softer).

    Updated 2 May 2026

    orange/300
    orange/800

  • Accent background tinted orange, subtler (two steps softer).

    Updated 2 May 2026

    orange/200
    orange/900

  • Accent background tinted orange, subtlest (lightest tint).

    Updated 2 May 2026

    orange/100
    orange/1000

  • Overlay background for dark surfaces — subtle (one step softer).

    Updated 2 May 2026

    white-alpha/200
    white-alpha/200

  • Overlay background for dark surfaces — subtler (two steps softer).

    Updated 2 May 2026

    white-alpha/100
    white-alpha/100

  • Overlay background for dark surfaces — subtlest (lightest tint).

    Updated 2 May 2026

    black-alpha/900
    black-alpha/900

  • Overlay background for light surfaces — subtle (one step softer).

    Updated 2 May 2026

    black-alpha/200
    black-alpha/200

  • Overlay background for light surfaces — subtler (two steps softer).

    Updated 2 May 2026

    black-alpha/100
    black-alpha/100

  • Overlay background for light surfaces — subtlest (lightest tint).

    Updated 2 May 2026

    white-alpha/900
    white-alpha/900

  • Accent background tinted pink, subtle (one step softer).

    Updated 2 May 2026

    pink/300
    pink/800

  • Accent background tinted pink, subtler (two steps softer).

    Updated 2 May 2026

    pink/200
    pink/900

  • Accent background tinted pink, subtlest (lightest tint).

    Updated 2 May 2026

    pink/100
    pink/1000

  • Accent background tinted purple, subtle (one step softer).

    Updated 2 May 2026

    purple/300
    purple/800

  • Accent background tinted purple, subtler (two steps softer).

    Updated 2 May 2026

    purple/200
    purple/900

  • Accent background tinted purple, subtlest (lightest tint).

    Updated 2 May 2026

    purple/100
    purple/1000

  • Accent background tinted red, subtle (one step softer).

    Updated 2 May 2026

    red/300
    red/800

  • Accent background tinted red, subtler (two steps softer).

    Updated 2 May 2026

    red/200
    red/900

  • Accent background tinted red, subtlest (lightest tint).

    Updated 2 May 2026

    red/100
    red/1000

  • Accent background tinted yellow, subtle (one step softer).

    Updated 2 May 2026

    yellow/300
    yellow/800

  • Accent background tinted yellow, subtler (two steps softer).

    Updated 2 May 2026

    yellow/200
    yellow/900

  • Accent background tinted yellow, subtlest (lightest tint).

    Updated 2 May 2026

    yellow/100
    yellow/1000

  • Background tint for destructive actions and irrecoverable errors.

    Updated 2 May 2026

    red/100
    red/1000

  • Inert affordance background — buttons that can't be pressed, fields the user can't edit yet.

    Updated 2 May 2026

    black-alpha/100
    white-alpha/100

  • Background tint for what's new — beta surfaces, onboarding, first-time-seen content.

    Updated 2 May 2026

    blurple/100
    blurple/1000

  • Background tint for neutral information — links, infrastructure status, advisories.

    Updated 2 May 2026

    blue/100
    blue/1000

  • Interactive danger background — subtle (one step softer).

    Updated 2 May 2026

    red/200
    red/900

  • Interactive danger background — subtler (two steps softer).

    Updated 2 May 2026

    red/300
    red/800

  • Interactive danger background — subtlest (lightest tint).

    Updated 2 May 2026

    red/400
    red/700

  • Interactive primary button background — active state.

    Updated 2 May 2026

    neutral/900
    neutral/200

  • Interactive primary button background — default state.

    Updated 2 May 2026

    neutral/1100
    neutral/0

  • Interactive primary button background — hover state.

    Updated 2 May 2026

    neutral/1000
    neutral/100

  • Interactive secondary button background — active state.

    Updated 2 May 2026

    black-alpha/400
    white-alpha/400

  • Interactive secondary button background — default state.

    Updated 2 May 2026

    black-alpha/200
    white-alpha/200

  • Interactive secondary button background — hover state.

    Updated 2 May 2026

    black-alpha/300
    white-alpha/300

  • Interactive success background — subtle (one step softer).

    Updated 2 May 2026

    green/200
    green/900

  • Interactive success background — subtler (two steps softer).

    Updated 2 May 2026

    green/300
    green/800

  • Interactive success background — subtlest (lightest tint).

    Updated 2 May 2026

    green/400
    green/700

  • Interactive tertiary button background — active state.

    Updated 2 May 2026

    black-alpha/300
    white-alpha/300

  • Interactive tertiary button background — default state.

    Updated 2 May 2026

    transparent
    transparent

  • Interactive tertiary button background — hover state.

    Updated 2 May 2026

    black-alpha/200
    white-alpha/200

  • Active selection background — filter chips, picked dates, selected list rows.

    Updated 2 May 2026

    neutral/1100
    neutral/0

  • Background tint for completed states and positive outcomes — settled payouts, demo-ready prototypes.

    Updated 2 May 2026

    green/100
    green/1000

  • Background tint for caution before failure — pending decisions, near-threshold metrics.

    Updated 2 May 2026

    yellow/100
    yellow/1000

Text

29

  • Accent text in blue.

    Updated 2 May 2026

    blue/900
    blue/200

  • Accent text in blurple.

    Updated 2 May 2026

    blurple/900
    blurple/200

  • Accent text in green.

    Updated 2 May 2026

    green/900
    green/200

  • Accent text in inverse.

    Updated 2 May 2026

    neutral/400
    neutral/700

  • Accent text in natural.

    Updated 2 May 2026

    natural/900
    natural/200

  • Accent text in neutral.

    Updated 2 May 2026

    neutral/700
    neutral/400

  • Accent text in orange.

    Updated 2 May 2026

    orange/900
    orange/200

  • Text on dark accent overlays.

    Updated 2 May 2026

    white-alpha/900
    white-alpha/900

  • Text on light accent overlays.

    Updated 2 May 2026

    black-alpha/900
    black-alpha/900

  • Accent text in pink.

    Updated 2 May 2026

    pink/900
    pink/200

  • Accent text in purple.

    Updated 2 May 2026

    purple/900
    purple/200

  • Accent text in red.

    Updated 2 May 2026

    red/900
    red/200

  • Accent text in yellow.

    Updated 2 May 2026

    yellow/900
    yellow/200

  • Text color for destructive or error messaging.

    Updated 2 May 2026

    red/900
    red/200

  • Text on disabled surfaces.

    Updated 2 May 2026

    black-alpha/400
    white-alpha/400

  • Text color for discovery / what's-new messaging.

    Updated 2 May 2026

    blurple/900
    blurple/200

  • Text color for informational messaging.

    Updated 2 May 2026

    blue/900
    blue/200

  • Text on bold, inverse backgrounds.

    Updated 2 May 2026

    neutral/0
    neutral/1100

  • Color for inline prose links. Underlined by default; underline thickens on hover.

    Updated 2 May 2026

    blurple/800
    blurple/300

  • Negative monetary values — payments out, fees. Orange, not red: outgoing money is normal.

    Updated 2 May 2026

    orange/800
    orange/200

  • Positive monetary values — refunds received, credits, payouts in.

    Updated 2 May 2026

    green/800
    green/200

  • Default numeric text. Tabular numerals + slashed zero — for totals at rest.

    Updated 2 May 2026

    neutral/1100
    neutral/0

  • Subdued numeric text — secondary totals, comparison values.

    Updated 2 May 2026

    black-alpha/800
    white-alpha/800

  • Voided or cancelled monetary values — struck-through, low contrast.

    Updated 2 May 2026

    black-alpha/400
    white-alpha/400

  • Default body text and high-contrast labels.

    Updated 2 May 2026

    neutral/1100
    neutral/0

  • Secondary text — descriptions, captions, the explanatory line below a heading.

    Updated 2 May 2026

    black-alpha/800
    white-alpha/800

  • Text color for success messaging.

    Updated 2 May 2026

    green/900
    green/200

  • Tertiary text — metadata, timestamps, low-emphasis labels.

    Updated 2 May 2026

    black-alpha/600
    white-alpha/600

  • Text color for warning messaging.

    Updated 2 May 2026

    yellow/900
    yellow/200

Border

19

  • Accent border in blue.

    Updated 2 May 2026

    blue/300
    blurple/800

  • Accent border in blurple.

    Updated 2 May 2026

    blurple/300
    blurple/800

  • Accent border in green.

    Updated 2 May 2026

    green/300
    green/800

  • Accent border in inverse.

    Updated 2 May 2026

    neutral/800
    neutral/300

  • Accent border in natural.

    Updated 2 May 2026

    natural/300
    natural/800

  • Accent border in neutral.

    Updated 2 May 2026

    neutral/200
    neutral/900

  • Accent border in orange.

    Updated 2 May 2026

    orange/300
    orange/800

  • Border on dark accent overlays.

    Updated 2 May 2026

    white-alpha/400
    white-alpha/400

  • Border on light accent overlays.

    Updated 2 May 2026

    black-alpha/400
    black-alpha/400

  • Accent border in pink.

    Updated 2 May 2026

    pink/300
    pink/800

  • Accent border in purple.

    Updated 2 May 2026

    purple/300
    purple/800

  • Accent border in red.

    Updated 2 May 2026

    red/300
    red/800

  • Accent border in yellow.

    Updated 2 May 2026

    yellow/300
    yellow/800

  • Border color on active or pressed interactive surfaces.

    Updated 2 May 2026

    neutral/1100
    neutral/0

  • Border color for inputs in error state.

    Updated 2 May 2026

    red/700
    red/500

  • Default 1-pixel border — cards, inputs, dividers, table rules.

    Updated 2 May 2026

    neutral/300
    neutral/800

  • Border color for disabled affordances.

    Updated 2 May 2026

    black-alpha/200
    white-alpha/200

  • Focus ring color. Pair with a 2-pixel ring + 2-pixel offset.

    Updated 2 May 2026

    blurple/400
    blurple/700

  • Border color when an interactive surface is hovered.

    Updated 2 May 2026

    neutral/600
    neutral/500

Icon

5

  • Icon color for destructive actions and serious errors.

    Updated 2 May 2026

    red/700
    red/500

  • Icon color for discovery / what's-new affordances.

    Updated 2 May 2026

    blurple/700
    blurple/400

  • Icon color for informational affordances.

    Updated 2 May 2026

    blue/500
    blue/400

  • Icon color for completed states.

    Updated 2 May 2026

    green/700
    green/400

  • Icon color for caution states.

    Updated 2 May 2026

    yellow/400
    yellow/300

Chart

26

  • Gridlines, axes, and ruled marks on charts.

    Updated 2 May 2026

    neutral/400
    neutral/900

  • Categorical chart series 1, lead 600-weight palette. Series order is fixed across every chart.

    Updated 2 May 2026

    blurple/600
    blurple/500

  • Categorical chart series 10, secondary 800-weight palette for stacked or grouped data.

    Updated 2 May 2026

    green/800
    green/300

  • Categorical chart series 11, secondary 800-weight palette for stacked or grouped data.

    Updated 2 May 2026

    purple/800
    purple/300

  • Categorical chart series 12, secondary 800-weight palette for stacked or grouped data.

    Updated 2 May 2026

    pink/800
    pink/300

  • Categorical chart series 13, secondary 800-weight palette for stacked or grouped data.

    Updated 2 May 2026

    orange/800
    orange/300

  • Categorical chart series 14, secondary 800-weight palette for stacked or grouped data.

    Updated 2 May 2026

    yellow/800
    yellow/300

  • Categorical chart series 15, secondary 800-weight palette for stacked or grouped data.

    Updated 2 May 2026

    blue/800
    red/300

  • Categorical chart series 16, secondary 800-weight palette for stacked or grouped data.

    Updated 2 May 2026

    red/800
    pink/300

  • Categorical chart series 17, tertiary 900-weight palette for tertiary breakdowns.

    Updated 2 May 2026

    blurple/900
    blurple/200

  • Categorical chart series 18, tertiary 900-weight palette for tertiary breakdowns.

    Updated 2 May 2026

    green/900
    green/200

  • Categorical chart series 19, tertiary 900-weight palette for tertiary breakdowns.

    Updated 2 May 2026

    purple/900
    purple/200

  • Categorical chart series 2, lead 600-weight palette. Series order is fixed across every chart.

    Updated 2 May 2026

    green/600
    green/500

  • Categorical chart series 20, tertiary 900-weight palette for tertiary breakdowns.

    Updated 2 May 2026

    pink/900
    pink/200

  • Categorical chart series 21, tertiary 900-weight palette for tertiary breakdowns.

    Updated 2 May 2026

    orange/900
    orange/200

  • Categorical chart series 22, tertiary 900-weight palette for tertiary breakdowns.

    Updated 2 May 2026

    yellow/900
    yellow/200

  • Categorical chart series 23, tertiary 900-weight palette for tertiary breakdowns.

    Updated 2 May 2026

    blue/900
    red/200

  • Categorical chart series 24, tertiary 900-weight palette for tertiary breakdowns.

    Updated 2 May 2026

    red/900
    pink/200

  • Categorical chart series 3, lead 600-weight palette. Series order is fixed across every chart.

    Updated 2 May 2026

    purple/600
    purple/500

  • Categorical chart series 4, lead 600-weight palette. Series order is fixed across every chart.

    Updated 2 May 2026

    pink/600
    pink/500

  • Categorical chart series 5, lead 600-weight palette. Series order is fixed across every chart.

    Updated 2 May 2026

    orange/600
    orange/500

  • Categorical chart series 6, lead 600-weight palette. Series order is fixed across every chart.

    Updated 2 May 2026

    yellow/600
    yellow/500

  • Categorical chart series 7, lead 600-weight palette. Series order is fixed across every chart.

    Updated 2 May 2026

    blue/600
    blue/500

  • Categorical chart series 8, lead 600-weight palette. Series order is fixed across every chart.

    Updated 2 May 2026

    red/600
    red/500

  • Categorical chart series 9, secondary 800-weight palette for stacked or grouped data.

    Updated 2 May 2026

    blurple/800
    blurple/300

  • Neutral chart fill — comparison data, historical context, inactive series.

    Updated 2 May 2026

    neutral/300
    neutral/800

Skeleton

2

  • Loading-state placeholder fill.

    Updated 2 May 2026

    black-alpha/200
    white-alpha/200

  • Animated highlight that travels across loading skeletons.

    Updated 2 May 2026

    black-alpha/100
    white-alpha/100

Blanket

1

  • Translucent scrim for modal overlays — dims the underlying surface.

    Updated 2 May 2026

    black-alpha/800
    black-alpha/900