Colour

Brand colours

Binds has two official colours. They anchor every surface, and nothing else is a brand colour.

Binds Ivory#FCF6EB

Binds Indigo#140C2E

Ivory on indigo: 17.40:1 contrast.

Ink scale

The neutrals are an OKLab interpolation from ivory (0) to indigo (1000). Every grey in Stance is a mix of the two brand colours, never a borrowed palette.

Token	Value	On ivory	On indigo
`--st-color-ink-0`	`#FCF6EB`	1.00:1	17.40:1
`--st-color-ink-25`	`#F4EEE5`	1.07:1	16.23:1
`--st-color-ink-50`	`#ECE6DF`	1.15:1	15.11:1
`--st-color-ink-100`	`#DED9D5`	1.30:1	13.36:1
`--st-color-ink-150`	`#CFC9C9`	1.52:1	11.46:1
`--st-color-ink-200`	`#BDB8BB`	1.82:1	9.57:1
`--st-color-ink-300`	`#9E9AA3`	2.57:1	6.78:1
`--st-color-ink-400`	`#817D8C`	3.72:1	4.68:1
`--st-color-ink-500`	`#6A657A`	5.20:1	3.35:1
`--st-color-ink-600`	`#555169`	7.05:1	2.47:1
`--st-color-ink-700`	`#423D58`	9.57:1	1.82:1
`--st-color-ink-800`	`#2F2A48`	12.63:1	1.38:1
`--st-color-ink-900`	`#201A3A`	15.37:1	1.13:1
`--st-color-ink-950`	`#191233`	16.60:1	1.05:1
`--st-color-ink-1000`	`#140C2E`	17.40:1	1.00:1

Semantic roles

Components only use semantic roles. Each theme assigns every role a value, so a component written once is correct in all three modes. Use them in your CSS as var(--st-color-<role>).

Status colours (danger, success, warning) are functional. Use them only to communicate state, and always alongside text or an icon.

Backgrounds

Role	Light	Dark	High contrast
`bg-canvas`	`#FCF6EB`	`#140C2E`	`#FCF6EB`
`bg-subtle`	`#F4EEE5`	`#191233`	`#FCF6EB`
`bg-muted`	`#ECE6DF`	`#201A3A`	`#F4EEE5`
`bg-emphasis`	`#DED9D5`	`#2F2A48`	`#ECE6DF`
`bg-surface`	`#FFFCF6`	`#191233`	`#FCF6EB`
`bg-surface-raised`	`#FFFCF6`	`#201A3A`	`#FCF6EB`
`bg-overlay`	`#FFFCF6`	`#201A3A`	`#FCF6EB`
`bg-inverse`	`#140C2E`	`#FCF6EB`	`#140C2E`
`bg-scrim`	`rgba(20, 12, 46, 0.48)`	`rgba(6, 3, 16, 0.64)`	`rgba(20, 12, 46, 0.72)`

Foregrounds

Role	Light	Dark	High contrast
`fg-default`	`#140C2E`	`#FCF6EB`	`#140C2E`
`fg-muted`	`#555169`	`#CFC9C9`	`#2F2A48`
`fg-subtle`	`#6A657A`	`#9E9AA3`	`#2F2A48`
`fg-disabled`	`#9E9AA3`	`#555169`	`#555169`
`fg-inverse`	`#FCF6EB`	`#140C2E`	`#FCF6EB`
`fg-link`	`#140C2E`	`#FCF6EB`	`#140C2E`

Borders and separators

Role	Light	Dark	High contrast
`border-subtle`	`#ECE6DF`	`#201A3A`	`#140C2E`
`border-default`	`#DED9D5`	`#2F2A48`	`#140C2E`
`border-strong`	`#BDB8BB`	`#423D58`	`#140C2E`
`border-control`	`#817D8C`	`#817D8C`	`#140C2E`
`border-control-hover`	`#555169`	`#BDB8BB`	`#140C2E`
`separator`	`#DED9D5`	`#2F2A48`	`#140C2E`

Accent and interaction

Role	Light	Dark	High contrast
`accent-bg`	`#140C2E`	`#FCF6EB`	`#140C2E`
`accent-bg-hover`	`#2F2A48`	`#ECE6DF`	`#2F2A48`
`accent-bg-active`	`#423D58`	`#DED9D5`	`#423D58`
`accent-fg`	`#FCF6EB`	`#140C2E`	`#FCF6EB`
`interactive-hover`	`rgba(20, 12, 46, 0.06)`	`rgba(252, 246, 235, 0.07)`	`#ECE6DF`
`interactive-active`	`rgba(20, 12, 46, 0.11)`	`rgba(252, 246, 235, 0.12)`	`#DED9D5`
`interactive-selected`	`#ECE6DF`	`#2F2A48`	`#140C2E`
`interactive-selected-fg`	`#140C2E`	`#FCF6EB`	`#FCF6EB`
`focus-ring`	`#140C2E`	`#FCF6EB`	`#140C2E`
`focus-ring-offset`	`#FCF6EB`	`#140C2E`	`#FCF6EB`
`disabled-bg`	`#ECE6DF`	`#201A3A`	`#F4EEE5`
`disabled-fg`	`#9E9AA3`	`#555169`	`#555169`
`disabled-border`	`#DED9D5`	`#2F2A48`	`#555169`

Status

Role	Light	Dark	High contrast
`danger-fg`	`#A3262E`	`#F0868A`	`#8A1F27`
`danger-bg`	`#F6E2DC`	`#3A1530`	`#FCF6EB`
`danger-border`	`#D9A39C`	`#7A3448`	`#8A1F27`
`danger-solid`	`#A3262E`	`#F0868A`	`#8A1F27`
`danger-solid-hover`	`#8A1F27`	`#F4A0A3`	`#701820`
`danger-on-solid`	`#FCF6EB`	`#140C2E`	`#FCF6EB`
`success-fg`	`#2E6B3D`	`#7FC99A`	`#235530`
`success-bg`	`#E3EEDC`	`#15283A`	`#FCF6EB`
`success-border`	`#A9C6A3`	`#2F5A4C`	`#235530`
`success-solid`	`#2E6B3D`	`#7FC99A`	`#235530`
`success-on-solid`	`#FCF6EB`	`#140C2E`	`#FCF6EB`
`warning-fg`	`#8A5300`	`#E8B464`	`#6B4000`
`warning-bg`	`#F7E8C8`	`#2E1F2C`	`#FCF6EB`
`warning-border`	`#DDBB7A`	`#6B5038`	`#6B4000`
`warning-solid`	`#8A5300`	`#E8B464`	`#6B4000`
`warning-on-solid`	`#FCF6EB`	`#140C2E`	`#FCF6EB`
`info-fg`	`#140C2E`	`#FCF6EB`	`#140C2E`
`info-bg`	`#ECE6DF`	`#201A3A`	`#FCF6EB`
`info-border`	`#CFC9C9`	`#423D58`	`#140C2E`
`info-solid`	`#140C2E`	`#FCF6EB`	`#140C2E`
`info-on-solid`	`#FCF6EB`	`#140C2E`	`#FCF6EB`

Data visualisation

Role	Light	Dark	High contrast
`chart-1`	`#140C2E`	`#FCF6EB`	`#140C2E`
`chart-2`	`#423D58`	`#CFC9C9`	`#2F2A48`
`chart-3`	`#6A657A`	`#9E9AA3`	`#555169`
`chart-4`	`#9E9AA3`	`#6A657A`	`#6A657A`
`chart-5`	`#CFC9C9`	`#423D58`	`#817D8C`