Stable

Color

Bridge's colors from Arch: every token by job in light and dark, where each may appear, the contrast it meets, and the full Arch palette.

Bridge's colors come from Arch, the design system in Figma, and reach code as role tokens: a name for the job (--text-muted), not the paint (Slate). Pick a color by what it's for. Every token has a light and a dark value; this page shows both, with its Arch name.

Color by job

Surfaces and lines

The page, what sits on it, and the lines between things. Most of every screen is drawn from these.

White--surface-primary

The page, inputs and table rows.

Light: #FFFFFF
Dark: #0B0F1A

Slate 05--surface-secondary

Hover fills and light icon backgrounds.

Light: #F9F9FA
Dark: #111627

Slate 10--surface-tertiary

Selected and inactive fills, skeletons.

Light: #F2F3F5
Dark: #1A2035

White--surface-elevated

Menus, popovers and bordered buttons: anything above the page.

Light: #FFFFFF
Dark: #151B2E

Slate 15--border-default

Card and input outlines.

Light: #ECEDF0
Dark: #252D44

Slate 30--border-hover

An outline under the pointer.

Light: #D9DBE1
Dark: #3A4460

Slate 10--border-divider

Lines between rows inside a card.

Light: #F2F3F5
Dark: #1E2640

Text

Five steps of ink, from headings to disabled.

Charcoal--text-primary

Headings, names, the most important text.

Light: #0D1531
Dark: #F0F1F4

Charcoal 80--text-secondary

Strong secondary text and button labels.

Light: #3D445A
Dark: #C8CCD8

Charcoal 70--text-body

Body copy and descriptions.

Light: #676C7E
Dark: #9BA1B4

Slate, darkened to read on white--text-muted

Dates, metadata, column headers. Not on --surface-tertiary.

Light: #6D7284
Dark: #868CA3

Slate 60--text-disabled

Disabled things only. Too faint for text people need.

Light: #B3B7C4
Dark: #505872

Royal

Bridge blue. Spent on the decision, the selection and focus: see where it goes, below.

Royal--primary

Links, focus rings, selected states, section icons.

Light: #0038FF
Dark: #4D7AFF

Royal S10--primary-hover

A link or blue control under the pointer.

Light: #0036D7
Dark: #6B91FF

Royal, pressed--primary-active

A blue control while pressed.

Light: #0028C0
Dark: #3A66E8

Royal--primary-solid

The primary button's fill. Anything with white text on blue.

Light: #0038FF
Dark: #2F5BFF

Royal S10--primary-solid-hover

The primary button under the pointer.

Light: #0036D7
Dark: #3D68F5

Status

Done, failed, waiting. Each comes as a strong color for icons, a tint, an outline and a text ink, and always travels with a word.

Kelly--success

Done, accepted: icons and dots.

Light: #0EA02E
Dark: #34C759

Kelly 10--success-bg

The green tag's fill.

Light: #E7F6EA
Dark: rgba(52, 199, 89, 0.12)

Kelly S10--success-text

Green text.

Light: #005F15
Dark: #4ADE80

Ruby--error

Failed, declined: icons, dots and red outlines.

Light: #E13535
Dark: #FF6B6B

Ruby 10--error-bg

The red tag's and error banner's fill.

Light: #FCEBEB
Dark: rgba(255, 107, 107, 0.12)

Ruby S10--error-text

Red text on a red tint.

Light: #9E0000
Dark: #FFA0A0

Ruby, darkened for white text--danger-solid

The destructive button's fill.

Light: #C72B2B
Dark: #C0392B

Ruby, darkened to read on white--danger-text

Red text on white, like the danger-ghost button.

Light: #C72B2B
Dark: #F58A8A

Amber, from Bridge OS--warning

Waiting, at risk: icons and dots.

Light: #F59E0B
Dark: #FBBF24

Honey 10--warning-bg

The yellow tag's fill.

Light: #FCF4E6
Dark: rgba(251, 191, 36, 0.12)

Honey S10--warning-text

Amber text.

Light: #714A00
Dark: #FCD34D

Accents

Information, categories and a few marks that belong to one component.

Royal S10--info

Blue tag text and avatar initials.

Light: #0036D7
Dark: #60A5FA

Sky 10--info-bg

Blue tag, info banner and avatar fill.

Light: #EEF4FF
Dark: rgba(96, 165, 250, 0.12)

Purple S10--purple

Purple tag text.

Light: #552BCB
Dark: #9A81ED

Purple 10--purple-bg

Purple tag fill.

Light: #F6F2FF
Dark: rgba(139, 110, 232, 0.12)

Honey--honey

The alum badge's outline. Only Badge uses it.

Light: #E19500
Dark: #F5C451

Honey, darkened for a white mark--badge-warning

The avatar's warning mark. Only Avatar uses it.

Light: #B87A00
Dark: #B87A00

Purple strong--super-connector-from

The Super Connector award, with --super-connector-to.

Light: #6A3AF3
Dark: #6A3AF3

Royal strong--cta-from

The call-to-action banner, with --cta-to.

Light: #0038FF
Dark: #0D1531

Every token, grouped, with its light and dark value

Using color

Royal is for the decision

Do. One blue button: the thing people came to do. Everything else is secondary or ghost.

Don’t. Two blue buttons. Nothing says which one matters.

A word beside every status color

AcceptedWaitingDeclined

Do. Pair the color with the word, so the status reads in grayscale and to a screen reader.

Don’t. Show status as dots alone. Red and green are the pair most people with color blindness confuse.

Categories never look like status

FundraisingHiringOther

Do. Give categories blue, purple or grey: colors that never mean status.

FundraisingHiring

Don’t. Color a category green or red. “Fundraising” in green reads as done, “Hiring” in red as failed.

Fills that carry white text

Do. Fill with --danger-solid or --primary-solid. White text on them passes 4.5:1.

Don’t. Fill with --error. A color that works as an icon can fail as a fill: white on it is 4.41:1.

Green (--success) and amber (--warning) are for icons, dots and fills. For text, use their -text tokens.
--text-disabled is for disabled things only. It is 2:1 on white.
--text-muted sits on white or --surface-secondary. On --surface-tertiary it drops under 4.5:1: use --text-body there.
Section and feature icons are --primary, or green, amber or purple by topic (Card's iconColor), never an app's own accent color.
Charts use --primary for series, --border-divider for gridlines and --text-muted for labels, so they work in both themes.
Never a hex value in a component. If no token fits, a new role token is added first (see Design tokens).

Where Royal goes

A closed list. If a use isn't on it, the answer is ink, a grey fill or a Tag.

Use	How	See
The one main button	`--primary-solid` fill, white text	Button
Links and link buttons	`--primary` text that underlines on hover	Button
Ticked and switched-on controls	`--primary-solid` fill	Checkbox, Switch
Selection	A blue border and light blue tint on the open card; a blue line under the active tab	Card, Tabs
Focus	A blue ring or outline on whatever has keyboard focus	Accessibility
Section icons	A blue icon on an 8% blue square in a card header	Card
Chart series	`--primary` bars and lines on `--border-divider` gridlines	Color rules, below
Text selection	Royal highlight when text is selected	Styles

Never on headings, body text, borders or decoration.
Never two blue buttons in one view.
Never to mean a category: a blue Tag is a category color, not a softer primary.

Contrast

Computed from the stylesheet on every build. Text and fills behind text need 4.5:1; marks such as icons and badge glyphs need 3:1. Tinted fills are measured over the page they sit on.

Text	On	Used for	Light	Dark
`--text-primary`	`--surface-primary`	primary text on primary surface	17.97:1Pass	16.94:1Pass
`--text-primary`	`--surface-secondary`	primary text on secondary surface	17.08:1Pass	15.92:1Pass
`--text-primary`	`--surface-elevated`	primary text on elevated surface	17.97:1Pass	15.14:1Pass
`--text-secondary`	`--surface-primary`	secondary text on primary surface	9.66:1Pass	11.92:1Pass
`--text-secondary`	`--surface-secondary`	secondary text on secondary surface	9.19:1Pass	11.20:1Pass
`--text-secondary`	`--surface-elevated`	secondary text on elevated surface	9.66:1Pass	10.65:1Pass
`--text-body`	`--surface-primary`	body text on primary surface	5.22:1Pass	7.43:1Pass
`--text-body`	`--surface-secondary`	body text on secondary surface	4.96:1Pass	6.98:1Pass
`--text-body`	`--surface-elevated`	body text on elevated surface	5.22:1Pass	6.64:1Pass
`--text-muted`	`--surface-primary`	muted text on primary surface	4.78:1Pass	5.73:1Pass
`--text-muted`	`--surface-secondary`	muted text on secondary surface	4.55:1Pass	5.39:1Pass
`--text-muted`	`--surface-elevated`	muted text on elevated surface	4.78:1Pass	5.12:1Pass
`--text-disabled`	`--surface-primary`	disabled text (exempt from contrast rules)	2.00:1Fail	2.72:1Fail
`--primary`	`--surface-primary`	links and primary-coloured text	6.98:1Pass	5.05:1Pass
`--danger-text`	`--surface-primary`	danger-ghost button text	5.51:1Pass	8.10:1Pass
`white`	`--primary-solid`	primary button	6.98:1Pass	5.17:1Pass
`white`	`--primary-solid-hover`	primary button, hovered	8.37:1Pass	4.67:1Pass
`white`	`--danger-solid`	destructive button	5.51:1Pass	5.44:1Pass
`white`	`--danger-solid-hover`	destructive button, hovered	7.17:1Pass	4.55:1Pass
`white`	`--primary`	why buttons don't fill with --primary	6.98:1Pass	3.79:1Fail
`white`	`--error`	why buttons don't fill with --error	4.41:1Fail	2.78:1Fail
`--success-text`	`--success-bg`	green tag	7.09:1Pass	9.20:1Pass
`--error-text`	`--error-bg`	red tag	7.43:1Pass	8.53:1Pass
`--warning-text`	`--warning-bg`	yellow tag	7.17:1Pass	10.71:1Pass
`--info`	`--info-bg`	blue tag	7.58:1Pass	6.35:1Pass
`--purple`	`--purple-bg`	purple tag	7.35:1Pass	5.42:1Pass
`white`	`--primary-solid`	avatar member tick (a mark: needs 3:1)	6.98:1Pass	5.17:1Pass
`white`	`--super-connector-to`	avatar Super Connector award, lighter end (a mark: needs 3:1)	3.30:1Pass	3.30:1Pass
`white`	`--badge-warning`	avatar warning mark (a mark: needs 3:1)	3.61:1Pass	3.61:1Pass

The Arch palette

Every color in Arch, as the Figma file draws it. The line under each name says which token carries it in code. “Figma only” colors are for design; when a screen needs one in code, a role token is added for the job first. Tints going lighter take a number (Royal 10); shades going darker take S and a number (Royal S10).

Royal

Royal#0038FF--primary, --primary-solid, --selection-text

Royal 80#3360FFFigma only

Royal 10#E6EBFFFigma only

Royal 07#EDF1FFFigma only

Royal 05#F2F5FFFigma only

Royal 02#FAFBFFFigma only

Royal S10#0036D7--primary-hover, --primary-solid-hover, --info

Charcoal

Charcoal#0D1531--text-primary

Charcoal 80#3D445A--text-secondary

Charcoal 70#676C7E--text-body

Slate

Slate#81879CFigma only

Slate 80#9A9FB0Figma only

Slate 60#B3B7C4--text-disabled

Slate 30#D9DBE1--border-hover

Slate 20#E6E8EDFigma only

Slate 15#ECEDF0--border-default

Slate 10#F2F3F5--surface-tertiary, --border-divider

Slate 05#F9F9FA--surface-secondary

Sky

Sky#568FFFFigma only

Sky 20#DDE9FFFigma only

Sky 15#E6EEFF--info-border

Sky 10#EEF4FF--info-bg

Muted sky#97B0C8Figma only

Kelly

Kelly#0EA02E--success

Kelly 60#6EC682Figma only

Kelly 20#CFECD5Figma only

Kelly 15#DBF1E0--success-border

Kelly 10#E7F6EA--success-bg

Kelly S10#005F15--success-text

Honey

Honey#E19500--honey

Honey 70#EBB449Figma only

Honey 20#F9EACCFigma only

Honey 15#FBEFD9--warning-border

Honey 10#FCF4E6--warning-bg

Honey S10#714A00--warning-text

Ruby

Ruby#E13535--error

Ruby 20#F9D7D7--error-border

Ruby 10#FCEBEB--error-bg

Ruby S10#9E0000--error-text

Purple

Royal purple#7450DAFigma only

Purple S10#552BCB--purple

Purple 20#ECE5FFFigma only

Purple 15#F1ECFF--purple-border

Purple 10#F6F2FF--purple-bg

Purple dark#3F3181Figma only

Gradients

Royal strong#0038FF → #0085FF--cta-from, --cta-to

Royal subtle#0038FF → #0066FFFigma only

Purple sky#5795FF → #5C5DFFFigma only

Purple strong#6A3AF3 → #7A80FF--super-connector-from, --super-connector-to

Royal purple#0038FF → #A07FFFFigma only

Slate light#F2F3F5 → #FFFFFFFigma only

Kelly strong#0EA02E → #56C13BFigma only

Graphics

For illustrations and marketing graphics only, never interface parts.

Purple#A07FFFFigma only

Green#86CF97Figma only

Yellow#EBB449Figma only

Blue#628AFFFigma only

Red#EB7171Figma only

Rules

Colors are tokens

Components use role tokens only: bg-[var(--surface-secondary)], text-[var(--text-muted)]. Never hex, rgb() or Tailwind palette classes such as bg-blue-500, and never a dark: patch to fix a color: if dark mode looks wrong, fix the token.

Fill with -solid

Anything with white text on a colored fill uses --primary-solid or --danger-solid. The brand --primary and --error are for text, icons and focus rings; as fills they fail contrast (white on --error is 4.41:1).

One blue button per group

In each group of actions, only the single most important one is a primary (filled blue) button. The others are secondary, ghost or link. When everything is blue, nothing stands out.

Never by color alone

Status and meaning are never carried by color alone. A colored tag has a word; a status color comes with an icon or text; a chart says in words what it shows.