Skip to content

Colours

Every colour below is read from the token file the Base installs into each site. Components never use a hex value: they use the token name, so changing a value here (or in a client’s copy) recolours every section at once.

Text

  • text-primary

    #0a0a0a

  • text-secondary

    #515258

  • text-tertiary

    #696969

  • text-quaternary

    #878787

  • text-placeholder

    #9e9e9e

  • text-muted

    #919191

    Grey half of two-tone headlines and muted copy. 3.0:1 on the page background (WCAG AA large text).

  • text-nav

    #6b6b6b

  • text-inverse

    #fafafa

  • text-on-dark

    #f5f7fa

Icons

  • icon-primary

    #0a0a0a

  • icon-secondary

    #636363

  • icon-tertiary

    #878787

  • icon-quaternary

    #b2b2b2

Surfaces

  • surface-page

    #fdfcfc

  • surface-primary

    #ffffff

  • surface-secondary

    #f8f8fb

  • surface-muted

    #f5f5f5

  • surface-card-light

    #f2f2f2

  • surface-card-dark

    #1b1b1b

  • surface-inverse

    #0a0a0a

  • surface-dark

    #0f1115

Borders

  • border-04

    #0000000a

  • border-06

    #0000000f

  • border-10

    #0000001a

  • border-16

    #00000029

  • border-24

    #0000003d

  • border-light

    #e8e8e8

  • border-dark

    #2a2a2a

  • border-on-dark

    #2a2f3a

  • border-interactive

    #3f51f4

Buttons

pills copied from the ElevenLabs reference, hover fills in the Firefly greys, no lift

  • button-primary

    #0a0a0a

  • button-primary-hover

    #333333

  • button-content-primary

    #ffffff

  • button-secondary

    #ffffff

  • button-secondary-hover

    #f7f7f7

  • button-content-secondary

    #0a0a0a

  • surface-pressed

    #ebebeb

    Hover / pressed layer under inactive tabs and ghost controls

  • surface-hover

    #0000000d

    Translucent hover fill for navigation links and round bar controls (works on any light background)

  • pagination-dot

    #d4d4d4

    Pagination dots

  • pagination-active

    #333333

Status

tags, dots

  • status-positive

    #166534

  • status-positive-bg

    #f0fdf4

  • status-negative

    #b91c1c

  • status-negative-bg

    #fff5f5

  • status-warning

    #b94020

  • status-warning-bg

    #fff1ec