Color
Every color has a job. Each group below shows its tokens at work in both themes, then lists them. Design and build with these semantic tokens; the primitive palette at the end is what they point to.
Updated Oct 16, 2026
Background
color.bg 3 tokens Page backgrounds. default for the main canvas, subtle for side panels and zones that sit behind content.
- Page canvas behind panels. neutral 50 · 950
Base styles
Base styles
Read by
base.css, the global stylesheet apps import once with@bridge-ds/react/styles.css. - Recessed areas: table headers, code blocks, footers. neutral 100 · 900
- Tracks, skeletons, neutral fills. neutral 200 · 800
Surface
color.surface 7 tokens Anything that sits on the page: cards, inputs, menus. raised is for surfaces that also carry elevation.
- Panels, cards, inputs. neutral 0 · 900
- Floating layers: popovers, menus, dialogs, toasts. neutral 0 · 800
- Hover fill for rows, menu items, ghost controls. neutral 100 · 800
7 components
Components
- Hover fill inside a raised surface. neutral 100 · 700
- Pressed fill. neutral 200 · 700
4 components
Components
- Selected rows and items. accent 50 · 950
1 component
Components
- Tooltips and inverse chips. neutral 900 · 100
Text
color.text 8 tokens 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.
Approve the token change text.default
Edited 2 hours ago by Florian text.muted
Not available in compact density text.disabled
Read the contrast rules on hover text.link
3 matches in this file text.signal
Approve the token change text.default
Edited 2 hours ago by Florian text.muted
Not available in compact density text.disabled
Read the contrast rules on hover text.link
3 matches in this file text.signal
- Body text and icons. neutral 900 · 50
30 components
Components
- Accordion
- Alert
- Avatar
- Badge
- Breadcrumb
- Card
- Checkbox
- CheckboxGroup
- Combobox
- Dialog
- Drawer
- EmptyState
- Field
- Form
- Input
- Menu
- NumberField
- Pagination
- Popover
- Progress
- RadioGroup
- 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. - Secondary text. neutral 600 · 400
28 components
- Disabled text. neutral 400 · 600
14 components
- Text on surface.inverse. neutral 0 · 950
- Text and icons on feedback and danger solids. neutral 0
1 component
Components
- Links in running text. link 600 · 300
1 component
Components
Base styles
Read by
base.css, the global stylesheet apps import once with@bridge-ds/react/styles.css. - Links on hover. link 700 · 200
1 component
Components
- Signal-colored text (match highlights, current step). accent 700 · 300
1 component
Components
Border
color.border 4 tokens Dividers and outlines. default for quiet separators, strong for control edges that must be found.
- Hairlines: card edges, dividers. neutral 200 · 800
- Row separators inside tables and lists. neutral 100 · 900
1 component
Components
- Edges that identify a control (inputs, checkboxes, switches). neutral 500
- Control edge on hover. neutral 600 · 400
9 components
Components
Action
color.action 18 tokens Interactive controls only. Never use action colors for decoration, or users will try to click it.
- Primary action fill (steel ink in the bridge brand). primary 900 · 50
1 component
Components
- Primary action fill on hover. primary 800 · 200
1 component
Components
- Primary action fill when pressed. primary 950 · 300
1 component
Components
- Primary action label. neutral 0 · primary 950
1 component
Components
- Secondary action fill. neutral 0 · 900
1 component
Components
- Secondary action fill on hover. neutral 100 · 800
1 component
Components
- Secondary action fill when pressed. neutral 200 · 700
1 component
Components
- Secondary action label. neutral 900 · 50
1 component
Components
- Secondary action edge. neutral 300 · 600
1 component
Components
- Ghost action fill on hover. neutral 100 · 800
2 components
Components
- Ghost action fill when pressed. neutral 200 · 700
2 components
Components
- Ghost action label. neutral 800 · 100
1 component
Components
- Danger action fill. danger 600
1 component
Components
- Danger action fill on hover. danger 700
1 component
Components
- Danger action fill when pressed. danger 800
1 component
Components
- Danger action label. neutral 0
1 component
Components
- Disabled action fill. neutral 100 · 800
9 components
Components
- Disabled action label. neutral 400 · 600
4 components
Components
Controls
color.control 6 tokens - Unchecked checkbox, radio, input fill. neutral 0 · 900
7 components
Components
- Checked checkbox, radio, switch track. primary 900 · 50
6 components
Components
Base styles
Read by
base.css, the global stylesheet apps import once with@bridge-ds/react/styles.css. - Checked control fill on hover. primary 800 · 200
3 components
Components
- Check mark, radio dot, switch thumb when checked. neutral 0 · primary 950
5 components
Components
- Unchecked switch track and slider rail edge. neutral 500
1 component
Components
- Switch thumb and slider handle. neutral 0 · 50
Signal
color.signal 2 tokens Search: bg.default signal.subtle · text.signal
signal.defaultSearch: bg.default signal.subtle · text.signal
signal.default- The signal: active indicators, progress, slider range. accent 500 · 400
- Soft signal fill: highlighted search matches. accent 100 · 900
1 component
Components
Overlay
color.overlay 1 token - Backdrop behind dialogs and drawers. alpha steel-48 · black-64
Feedback
color.feedback 20 tokens Status and system messages. bg + text + border for inline messages, solid for compact labels like badges. Always pair with words.
Figma changes arrive as a pull request
Contrast checks pass
Unused tokens show up in Checks
A failing contrast pair blocks the release
Figma changes arrive as a pull request
Contrast checks pass
Unused tokens show up in Checks
A failing contrast pair blocks the release
- Success message background. success 50 · 950
- Success message edge. success 200 · 800
- Success message text. success 700 · 300
1 component
Components
- Success message icon. success 600 · 400
- Success message solid fill, for compact labels like badges. success 600
1 component
Components
- Warning message background. warning 50 · 950
- Warning message edge. warning 200 · 800
- Warning message text. warning 700 · 300
1 component
Components
- Warning message icon. warning 600 · 400
- Warning message solid fill, for compact labels like badges. warning 600
1 component
Components
- Danger message background. danger 50 · 950
- Danger message edge. danger 200 · 800
- Danger message text. danger 700 · 300
6 components
Components
- Danger message icon. danger 600 · 400
15 components
- Danger message solid fill, for compact labels like badges. danger 600
1 component
Components
- Info message background. info 50 · 950
- Info message edge. info 200 · 800
- Info message text. info 700 · 300
1 component
Components
- Info message icon. info 600 · 400
- Info message solid fill, for compact labels like badges. info 600
1 component
Components
Selection
color.selection 1 token Semantic tokens give each color a job. Design and build with semantic tokens only, so a brand can repaint every screen at once.
selection.bgSemantic tokens give each color a job. Design and build with semantic tokens only, so a brand can repaint every screen at once.
selection.bg- 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.
Focus
focus 1 token Keyboard focus ring. Shared by every focusable component so focus looks the same everywhere.
- Keyboard focus ring. accent 500 · 400
22 components
Components
- Accordion
- Breadcrumb
- Button
- Card
- Checkbox
- Combobox
- Form
- Input
- Link
- Menu
- NumberField
- Pagination
- RadioGroup
- 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.
Primitive palette
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.
white
black
steel
orange
crimson
teal
ochre
cable
slate
sea
plum
alpha
Want to know exactly who uses a value? Paste a hex in search (⌘K) or in the token explorer.