Color

Page backgrounds. default for the main canvas, subtle for side panels and zones that sit behind content.

• color.bg.default
  Copy CSS variableCopy as JSCopy Figma name
  Page canvas.neutral 0 · 950
  Base styles

  Base styles

  Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.

• color.bg.subtle
  Copy CSS variableCopy as JSCopy Figma name
  Recessed areas: table headers, code blocks, footers.neutral 100 · 900
  18 components

  Components

  • Alert
  • Avatar
  • Banner
  • Card
  • ChoiceCard
  • CodeBlock
  • Combobox
  • Dialog
  • Drawer
  • Input
  • SegmentedControl
  • Select
  • Skeleton
  • Table
  • Tabs
  • Tag
  • Textarea
  • TokenValue
• color.bg.muted
  Copy CSS variableCopy as JSCopy Figma name
  Tracks, skeletons, neutral fills.neutral 200 · 800
  6 components

  Components

  • Avatar
  • Progress
  • SidebarNav
  • Skeleton
  • Slider
  • Switch
• color.bg.zone
  Copy CSS variableCopy as JSCopy Figma name
  Large flat color blocks that open a space: the home hero, section page headers, the Studio greeting, onboarding.primary 200 · 900Unused

Anything that sits on the page: cards, inputs, menus. raised is for surfaces that also carry elevation.

• color.surface.default
  Copy CSS variableCopy as JSCopy Figma name
  Panels, cards, inputs.neutral 0 · 900
  10 components

  Components

  • Avatar
  • Button
  • Card
  • Checklist
  • ChoiceCard
  • EmptyState
  • Kbd
  • Table
  • Tabs
  • TokenValue
• color.surface.raised
  Copy CSS variableCopy as JSCopy Figma name
  Floating layers: popovers, menus, dialogs, toasts.neutral 0 · 800
  8 components

  Components

  • Combobox
  • Dialog
  • Drawer
  • Menu
  • Popover
  • SegmentedControl
  • Select
  • Toast
• color.surface.hover
  Copy CSS variableCopy as JSCopy Figma name
  Hover fill for rows, menu items, ghost controls.neutral 100 · 800
  10 components

  Components

  • Accordion
  • Breadcrumb
  • Button
  • ChoiceCard
  • Combobox
  • NumberField
  • SidebarNav
  • Table
  • Tag
  • Textarea
• color.surface.hover-raised
  Copy CSS variableCopy as JSCopy Figma name
  Hover fill inside a raised surface.neutral 100 · 700
  3 components

  Components

  • Combobox
  • Menu
  • Select
• color.surface.pressed
  Copy CSS variableCopy as JSCopy Figma name
  Pressed fill.neutral 200 · 700
  6 components

  Components

  • Button
  • Combobox
  • NumberField
  • SegmentedControl
  • SidebarNav
  • Tag
• color.surface.selected
  Copy CSS variableCopy as JSCopy Figma name
  Selected rows and items.accent 50 · 950
  3 components

  Components

  • Button
  • ChoiceCard
  • Table
• color.surface.inverse
  Copy CSS variableCopy as JSCopy Figma name
  Tooltips and inverse chips.neutral 900 · 100
  2 components

  Components

  • Badge
  • Tooltip
• color.surface.strong
  Copy CSS variableCopy as JSCopy Figma name
  Deep Harbor in both themes, for a mode the whole page is in (Banner appearance strong).primary 700
  1 component

  Components

  • Banner

Text and icons. default for body copy, muted for secondary info, disabled only for disabled controls, inverse on dark or brand fills, on-solid on feedback solid fills.

• AaAacolor.text.default
  Copy CSS variableCopy as JSCopy Figma name
  Body text and icons.neutral 900 · 50
  38 components

  Components

  • Accordion
  • Alert
  • Avatar
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Card
  • Checkbox
  • CheckboxGroup
  • Checklist
  • ChoiceCard
  • CodeBlock
  • Combobox
  • Dialog
  • Drawer
  • EmptyState
  • Field
  • Form
  • Input
  • Menu
  • NumberField
  • PageHeader
  • Pagination
  • Popover
  • Progress
  • RadioGroup
  • SegmentedControl
  • Select
  • SidebarNav
  • Slider
  • Switch
  • Table
  • Tabs
  • Tag
  • Textarea
  • Toast
  • TokenValue

  Base styles

  Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.

• AaAacolor.text.muted
  Copy CSS variableCopy as JSCopy Figma name
  Secondary text.neutral 600 · 400
  35 components

  Components

  • Accordion
  • Alert
  • Avatar
  • Badge
  • Banner
  • Breadcrumb
  • Checkbox
  • CheckboxGroup
  • Checklist
  • ChoiceCard
  • CodeBlock
  • Combobox
  • Dialog
  • Divider
  • Drawer
  • EmptyState
  • Field
  • Input
  • Kbd
  • Menu
  • NumberField
  • PageHeader
  • Pagination
  • Popover
  • Progress
  • RadioGroup
  • SegmentedControl
  • Select
  • SidebarNav
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toast
  • TokenValue
• AaAacolor.text.disabled
  Copy CSS variableCopy as JSCopy Figma name
  Disabled text.neutral 400 · 600
  16 components

  Components

  • Accordion
  • Checkbox
  • CheckboxGroup
  • ChoiceCard
  • Combobox
  • Field
  • Input
  • Menu
  • NumberField
  • RadioGroup
  • SegmentedControl
  • Select
  • Slider
  • Switch
  • Tabs
  • Textarea
• AaAacolor.text.inverse
  Copy CSS variableCopy as JSCopy Figma name
  Text on surface.inverse.neutral 0 · 950
  2 components

  Components

  • Badge
  • Tooltip
• AaAacolor.text.on-solid
  Copy CSS variableCopy as JSCopy Figma name
  Text and icons on feedback and danger solids.neutral 0
  2 components

  Components

  • Badge
  • Banner
• AaAacolor.text.link
  Copy CSS variableCopy as JSCopy Figma name
  Links in running text.link 700 · 300
  2 components

  Components

  • Button
  • Link

  Base styles

  Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.

• AaAacolor.text.link-hover
  Copy CSS variableCopy as JSCopy Figma name
  Links on hover.link 800 · 200
  2 components

  Components

  • Button
  • Link
• AaAacolor.text.signal
  Copy CSS variableCopy as JSCopy Figma name
  Signal-colored text (match highlights, current step).accent 700 · 300
  1 component

  Components

  • Tag

Dividers and outlines. default for quiet separators, strong for control edges that must be found.

• color.border.default
  Copy CSS variableCopy as JSCopy Figma name
  Hairlines: card edges, dividers.neutral 200 · 800
  28 components

  Components

  • Accordion
  • Alert
  • Avatar
  • Badge
  • Banner
  • Card
  • Checkbox
  • Checklist
  • ChoiceCard
  • CodeBlock
  • Combobox
  • Dialog
  • Divider
  • Drawer
  • EmptyState
  • Input
  • Kbd
  • Menu
  • NumberField
  • RadioGroup
  • SegmentedControl
  • Select
  • Table
  • Tabs
  • Tag
  • Textarea
  • Toast
  • TokenValue
• color.border.subtle
  Copy CSS variableCopy as JSCopy Figma name
  Row separators inside tables and lists.neutral 100 · 900
  1 component

  Components

  • Table
• color.border.strong
  Copy CSS variableCopy as JSCopy Figma name
  Edges that identify a control (inputs, checkboxes, switches).neutral 500
  14 components

  Components

  • Accordion
  • Checkbox
  • ChoiceCard
  • Combobox
  • Drawer
  • Input
  • Kbd
  • Link
  • NumberField
  • RadioGroup
  • Select
  • Slider
  • Switch
  • Textarea

  Base styles

  Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.

• color.border.emphasis
  Copy CSS variableCopy as JSCopy Figma name
  A hairline that must read before the default one: hovered cards, group dividers, dashed placeholders.neutral 300 · 700
  6 components

  Components

  • Checklist
  • Combobox
  • Menu
  • Popover
  • Select
  • TokenValue
• color.border.hover
  Copy CSS variableCopy as JSCopy Figma name
  Control edge on hover.neutral 600 · 400
  10 components

  Components

  • Card
  • Checkbox
  • ChoiceCard
  • Combobox
  • Input
  • NumberField
  • RadioGroup
  • Select
  • Switch
  • Textarea

Interactive controls only. Never use action colors for decoration, or users will try to click it.

• color.action.primary.bg
  Copy CSS variableCopy as JSCopy Figma name
  Primary action fill (steel ink in the bridge brand).primary 700 · 300
  2 components

  Components

  • Avatar
  • Button
• color.action.primary.bg-hover
  Copy CSS variableCopy as JSCopy Figma name
  Primary action fill on hover.primary 800 · 200
  1 component

  Components

  • Button
• color.action.primary.bg-active
  Copy CSS variableCopy as JSCopy Figma name
  Primary action fill when pressed.primary 900 · 100
  1 component

  Components

  • Button
• AaAacolor.action.primary.text
  Copy CSS variableCopy as JSCopy Figma name
  Primary action label.neutral 0 · primary 950
  1 component

  Components

  • Button
• color.action.secondary.bg
  Copy CSS variableCopy as JSCopy Figma name
  Secondary action fill.neutral 0 · 900
  1 component

  Components

  • Button
• color.action.secondary.bg-hover
  Copy CSS variableCopy as JSCopy Figma name
  Secondary action fill on hover.neutral 100 · 800
  1 component

  Components

  • Button
• color.action.secondary.bg-active
  Copy CSS variableCopy as JSCopy Figma name
  Secondary action fill when pressed.neutral 200 · 700
  1 component

  Components

  • Button
• AaAacolor.action.secondary.text
  Copy CSS variableCopy as JSCopy Figma name
  Secondary action label.neutral 900 · 50
  1 component

  Components

  • Button
• color.action.secondary.border
  Copy CSS variableCopy as JSCopy Figma name
  Secondary action edge.neutral 300 · 600
  1 component

  Components

  • Button
• color.action.ghost.bg-hover
  Copy CSS variableCopy as JSCopy Figma name
  Ghost action fill on hover.neutral 100 · 800
  2 components

  Components

  • Button
  • Pagination
• color.action.ghost.bg-active
  Copy CSS variableCopy as JSCopy Figma name
  Ghost action fill when pressed.neutral 200 · 700
  2 components

  Components

  • Button
  • Pagination
• AaAacolor.action.ghost.text
  Copy CSS variableCopy as JSCopy Figma name
  Ghost action label.neutral 800 · 100
  1 component

  Components

  • Button
• color.action.danger.bg
  Copy CSS variableCopy as JSCopy Figma name
  Danger action fill.danger 600
  1 component

  Components

  • Button
• color.action.danger.bg-hover
  Copy CSS variableCopy as JSCopy Figma name
  Danger action fill on hover.danger 700
  1 component

  Components

  • Button
• color.action.danger.bg-active
  Copy CSS variableCopy as JSCopy Figma name
  Danger action fill when pressed.danger 800
  1 component

  Components

  • Button
• AaAacolor.action.danger.text
  Copy CSS variableCopy as JSCopy Figma name
  Danger action label.neutral 0
  1 component

  Components

  • Button
• color.action.disabled.bg
  Copy CSS variableCopy as JSCopy Figma name
  Disabled action fill.neutral 100 · 800
  10 components

  Components

  • Button
  • Checkbox
  • Combobox
  • Input
  • NumberField
  • RadioGroup
  • SegmentedControl
  • Select
  • Tag
  • Textarea
• AaAacolor.action.disabled.text
  Copy CSS variableCopy as JSCopy Figma name
  Disabled action label.neutral 400 · 600
  4 components

  Components

  • Button
  • Checkbox
  • RadioGroup
  • Tag

• color.control.bg
  Copy CSS variableCopy as JSCopy Figma name
  Unchecked checkbox, radio, input fill.neutral 0 · 900
  7 components

  Components

  • Checkbox
  • Combobox
  • Input
  • NumberField
  • RadioGroup
  • Select
  • Textarea
• color.control.checked.bg
  Copy CSS variableCopy as JSCopy Figma name
  Checked checkbox, radio, switch track.primary 700 · 300
  9 components

  Components

  • Button
  • Checkbox
  • ChoiceCard
  • Menu
  • Pagination
  • RadioGroup
  • SegmentedControl
  • Switch
  • Tag

  Base styles

  Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.

• color.control.checked.bg-hover
  Copy CSS variableCopy as JSCopy Figma name
  Checked control fill on hover.primary 800 · 200
  5 components

  Components

  • Button
  • Checkbox
  • ChoiceCard
  • RadioGroup
  • Switch
• AaAacolor.control.checked.fg
  Copy CSS variableCopy as JSCopy Figma name
  Check mark, radio dot, switch thumb when checked.neutral 0 · primary 950
  6 components

  Components

  • Checkbox
  • Pagination
  • RadioGroup
  • SegmentedControl
  • Switch
  • Tag
• color.control.track
  Copy CSS variableCopy as JSCopy Figma name
  Unchecked switch track and slider rail edge.neutral 500
  1 component

  Components

  • Switch
• color.control.thumb
  Copy CSS variableCopy as JSCopy Figma name
  Switch thumb and slider handle.neutral 0 · 50
  2 components

  Components

  • Slider
  • Switch

• color.signal.default
  Copy CSS variableCopy as JSCopy Figma name
  The signal: active indicators, progress, slider range.accent 600 · 400
  6 components

  Components

  • Progress
  • SidebarNav
  • Slider
  • Spinner
  • Table
  • Tabs
• color.signal.subtle
  Copy CSS variableCopy as JSCopy Figma name
  Soft signal fill: highlighted search matches.accent 100 · 900
  1 component

  Components

  • Tag

• color.overlay.scrim
  Copy CSS variableCopy as JSCopy Figma name
  Backdrop behind dialogs and drawers.alpha steel-48 · black-64
  2 components

  Components

  • Dialog
  • Drawer

Status and system messages. bg + text + border for inline messages, solid for compact labels like badges. Always pair with words.

• color.feedback.neutral.bg
  Copy CSS variableCopy as JSCopy Figma name
  Fill of a status with no tone (neutral Badge, grey status chips): one step off the page and off cards in both themes.neutral 100 · 800
  1 component

  Components

  • Badge
• color.feedback.success.bg
  Copy CSS variableCopy as JSCopy Figma name
  Success message background.success 50 · 950
  3 components

  Components

  • Alert
  • Badge
  • Checklist
• color.feedback.success.border
  Copy CSS variableCopy as JSCopy Figma name
  Success message edge.success 200 · 800
  2 components

  Components

  • Alert
  • Badge
• AaAacolor.feedback.success.text
  Copy CSS variableCopy as JSCopy Figma name
  Success message text.success 700 · 300
  2 components

  Components

  • Badge
  • Checklist
• AaAacolor.feedback.success.icon
  Copy CSS variableCopy as JSCopy Figma name
  Success message icon.success 600 · 400
  4 components

  Components

  • Alert
  • Badge
  • Progress
  • Toast
• color.feedback.success.solid
  Copy CSS variableCopy as JSCopy Figma name
  Success message solid fill, for compact labels like badges.success 600
  1 component

  Components

  • Badge
• color.feedback.warning.bg
  Copy CSS variableCopy as JSCopy Figma name
  Warning message background.warning 50 · 950
  3 components

  Components

  • Alert
  • Badge
  • Checklist
• color.feedback.warning.border
  Copy CSS variableCopy as JSCopy Figma name
  Warning message edge.warning 200 · 800
  2 components

  Components

  • Alert
  • Badge
• AaAacolor.feedback.warning.text
  Copy CSS variableCopy as JSCopy Figma name
  Warning message text.warning 700 · 300
  2 components

  Components

  • Badge
  • Checklist
• AaAacolor.feedback.warning.icon
  Copy CSS variableCopy as JSCopy Figma name
  Warning message icon.warning 600 · 400
  4 components

  Components

  • Alert
  • Badge
  • Progress
  • Toast
• color.feedback.warning.solid
  Copy CSS variableCopy as JSCopy Figma name
  Warning message solid fill, for compact labels like badges.warning 600
  1 component

  Components

  • Badge
• color.feedback.danger.bg
  Copy CSS variableCopy as JSCopy Figma name
  Danger message background.danger 50 · 950
  4 components

  Components

  • Alert
  • Badge
  • Checklist
  • Form
• color.feedback.danger.border
  Copy CSS variableCopy as JSCopy Figma name
  Danger message edge.danger 200 · 800
  3 components

  Components

  • Alert
  • Badge
  • Form
• AaAacolor.feedback.danger.text
  Copy CSS variableCopy as JSCopy Figma name
  Danger message text.danger 700 · 300
  7 components

  Components

  • Badge
  • CheckboxGroup
  • Checklist
  • Field
  • Form
  • Menu
  • RadioGroup
• AaAacolor.feedback.danger.icon
  Copy CSS variableCopy as JSCopy Figma name
  Danger message icon.danger 600 · 400
  16 components

  Components

  • Alert
  • Badge
  • Checkbox
  • CheckboxGroup
  • ChoiceCard
  • Combobox
  • Field
  • Form
  • Input
  • NumberField
  • Progress
  • RadioGroup
  • Select
  • Slider
  • Textarea
  • Toast
• color.feedback.danger.solid
  Copy CSS variableCopy as JSCopy Figma name
  Danger message solid fill, for compact labels like badges.danger 600
  1 component

  Components

  • Badge
• color.feedback.info.bg
  Copy CSS variableCopy as JSCopy Figma name
  Info message background.info 50 · 950
  2 components

  Components

  • Alert
  • Badge
• color.feedback.info.border
  Copy CSS variableCopy as JSCopy Figma name
  Info message edge.info 200 · 800
  2 components

  Components

  • Alert
  • Badge
• AaAacolor.feedback.info.text
  Copy CSS variableCopy as JSCopy Figma name
  Info message text.info 700 · 300
  1 component

  Components

  • Badge
• AaAacolor.feedback.info.icon
  Copy CSS variableCopy as JSCopy Figma name
  Info message icon.info 600 · 400
  3 components

  Components

  • Alert
  • Badge
  • Toast
• color.feedback.info.solid
  Copy CSS variableCopy as JSCopy Figma name
  Info message solid fill, for compact labels like badges.info 600
  1 component

  Components

  • Badge

• color.chart.series.1
  Copy CSS variableCopy as JSCopy Figma name
  Series 1, the signal hue: the series a chart is about.accent 500 · 400Unused
• color.chart.series.2
  Copy CSS variableCopy as JSCopy Figma name
  Series 2, the info hue.info 600 · 400Unused
• color.chart.series.3
  Copy CSS variableCopy as JSCopy Figma name
  Series 3, the success hue.success 600 · 400Unused
• color.chart.series.4
  Copy CSS variableCopy as JSCopy Figma name
  Series 4, the warning hue.warning 600 · 400Unused
• color.chart.series.5
  Copy CSS variableCopy as JSCopy Figma name
  Series 5, the categorical extra hue.categorical 600 · 400Unused
• color.chart.series.6
  Copy CSS variableCopy as JSCopy Figma name
  Series 6, neutral: "other" and baselines.neutral 500 · 400Unused
• color.chart.track
  Copy CSS variableCopy as JSCopy Figma name
  Unfilled part of a bar, gauge or donut.neutral 100 · 800Unused
• color.chart.grid
  Copy CSS variableCopy as JSCopy Figma name
  Grid lines and axis rules.neutral 200 · 800Unused
• color.chart.axis
  Copy CSS variableCopy as JSCopy Figma name
  Axis labels and tick text.neutral 600 · 400Unused

• color.selection.bg
  Copy CSS variableCopy as JSCopy Figma name
  Text selection highlight (::selection).accent 100 · 800
  Base styles

  Base styles

  Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.

• color.agent.surface
  Copy CSS variableCopy as JSCopy Figma name
  Tile behind the AI agent mark (Avatar kind agent): the Harbor zone color, with the mark in action.primary.bg (Deep Harbor), the zone pair the build already checks.primary 200 · 900
  1 component

  Components

  • Avatar

• color.illustration.surface
  Copy CSS variableCopy as JSCopy Figma name
  Behind line drawings (the Avatar illustrated faces): the Harbor zone color, kept light in dark so the black lines stay readable.primary 200 · 300
  1 component

  Components

  • Avatar

Keyboard focus ring. Shared by every focusable component so focus looks the same everywhere.

• focus.ring.color
  Copy CSS variableCopy as JSCopy Figma name
  Keyboard focus ring.accent 700 · 400
  25 components

  Components

  • Accordion
  • Breadcrumb
  • Button
  • Card
  • Checkbox
  • CodeBlock
  • Combobox
  • Drawer
  • Form
  • Input
  • Link
  • Menu
  • NumberField
  • Pagination
  • RadioGroup
  • SegmentedControl
  • Select
  • SidebarNav
  • Slider
  • Switch
  • Table
  • Tabs
  • Tag
  • Textarea
  • Toast

  Base styles

  Read by base.css, the global stylesheet apps import once with @bridge-ds/react/styles.css.

Raw values. Components never use these directly; semantic tokens point to them. Use them when you propose a new semantic token, not when you design a screen.

Want to know exactly who uses a value? Paste a hex in search, or filter All tokens.