Foundations

Colors

Theme colors from the Figma 02 Theme collection. Light is the default; Dark is opt-in.

Device Density

surface 6

Token	Value	Preview
`--color-surface-background` 02 Theme / surface/background	Light `#f2f2f2` Dark `#030805`
`--color-surface-background-invert` 02 Theme / surface/background-invert	Light `#030805` Dark `#fafafa`
`--color-surface-level-1` 02 Theme / surface/level-1	Light `#ffffff` Dark `#1a1a1a`
`--color-surface-level-2` 02 Theme / surface/level-2	Light `#fafafa` Dark `#232323`
`--color-surface-level-3` 02 Theme / surface/level-3	Light `#ededed` Dark `#2b2b2b`
`--color-surface-level-4` 02 Theme / surface/level-4	Light `#e5e5e5` Dark `#343434`

foreground 7

Token	Value	Preview
`--color-foreground-ghost-emphasis` 02 Theme / foreground/ghost-emphasis	Light `var(--color-static-black-alpha-24)` Dark `var(--color-static-white-alpha-24)`
`--color-foreground-high-emphasis` 02 Theme / foreground/high-emphasis	Light `var(--color-static-black-alpha-96)` Dark `var(--color-static-white-alpha-96)`
`--color-foreground-level-1` 02 Theme / foreground/level-1	Light `var(--color-static-black)` Dark `var(--color-static-white)`
`--color-foreground-level-2` 02 Theme / foreground/level-2	Light `var(--color-static-white)` Dark `var(--color-static-black)`
`--color-foreground-low-emphasis` 02 Theme / foreground/low-emphasis	Light `var(--color-static-black-alpha-40)` Dark `var(--color-static-white-alpha-40)`
`--color-foreground-medium-emphasis` 02 Theme / foreground/medium-emphasis	Light `var(--color-static-black-alpha-72)` Dark `var(--color-static-white-alpha-72)`
`--color-foreground-static-black-alpha-32` 02 Theme / foreground/static-black-alpha-32	`#25252552`

primary 7

Token	Value	Preview
`--color-on-primary` 02 Theme / primary/on-primary	`#ffffff`
`--color-on-primary-tint` 02 Theme / primary/on-primary-tint	`var(--color-static-white-alpha-64)`
`--color-primary` 02 Theme / primary/primary	`var(--color-static-brand-color)`
`--color-primary-natural` 02 Theme / primary/primary-natural	Light `#494949` Dark `#40c79a`
`--color-primary-shade` 02 Theme / primary/primary-shade	Light `#222222` Dark `#108b69`
`--color-primary-soft` 02 Theme / primary/primary-soft	Light `#ededed` Dark `#d4f7e6`
`--color-primary-tint` 02 Theme / primary/primary-tint	Light `#5e5e5e` Dark `#77deb8`

secondary 7

Token	Value	Preview
`--color-on-secondary` 02 Theme / secondary/on-secondary	Light `var(--color-foreground-high-emphasis)` Dark `#ffffff`
`--color-on-secondary-tint` 02 Theme / secondary/on-secondary-tint	Light `var(--color-foreground-medium-emphasis)` Dark `#2f4e3c`
`--color-secondary` 02 Theme / secondary/secondary	Light `var(--color-surface-level-3)` Dark `#1b3325`
`--color-secondary-natural` 02 Theme / secondary/secondary-natural	Light `var(--color-surface-level-2)` Dark `#2d4839`
`--color-secondary-shade` 02 Theme / secondary/secondary-shade	Light `var(--color-surface-level-4)` Dark `#102017`
`--color-secondary-soft` 02 Theme / secondary/secondary-soft	Light `var(--color-surface-level-1)` Dark `#647b6e`
`--color-secondary-tint` 02 Theme / secondary/secondary-tint	Light `var(--color-surface-level-3)` Dark `#325842`

tertiary 7

Token	Value	Preview
`--color-on-tertiary` 02 Theme / tertiary/on-tertiary	`var(--color-foreground-high-emphasis)`
`--color-on-tertiary-tint` 02 Theme / tertiary/on-tertiary-tint	`var(--color-foreground-medium-emphasis)`
`--color-tertiary` 02 Theme / tertiary/tertiary	`var(--color-surface-level-1)`
`--color-tertiary-natural` 02 Theme / tertiary/tertiary-natural	Light `var(--color-surface-level-2)` Dark `var(--color-surface-level-3)`
`--color-tertiary-shade` 02 Theme / tertiary/tertiary-shade	`var(--color-surface-level-4)`
`--color-tertiary-soft` 02 Theme / tertiary/tertiary-soft	`var(--color-surface-level-2)`
`--color-tertiary-tint` 02 Theme / tertiary/tertiary-tint	`var(--color-surface-level-3)`

success 7

Token	Value	Preview
`--color-on-success` 02 Theme / success/on-success	`#ffffff`
`--color-on-success-tint` 02 Theme / success/on-success-tint	`#ffffffa3`
`--color-success` 02 Theme / success/success	Light `#22c55e` Dark `#00bb82`
`--color-success-natural` 02 Theme / success/success-natural	Light `#4ade80` Dark `#00ce8f`
`--color-success-shade` 02 Theme / success/success-shade	Light `#16a34a` Dark `#008158`
`--color-success-soft` 02 Theme / success/success-soft	Light `#f0fdf4` Dark `#e6fcf5`
`--color-success-tint` 02 Theme / success/success-tint	Light `#86efac` Dark `#00c78a`

info 7

Token	Value	Preview
`--color-info` 02 Theme / info/info	`#12d0fa`
`--color-info-natural` 02 Theme / info/info-natural	`#32daff`
`--color-info-shade` 02 Theme / info/info-shade	`#0dc2e9`
`--color-info-soft` 02 Theme / info/info-soft	`#f0fcff`
`--color-info-tint` 02 Theme / info/info-tint	`#20d7ff`
`--color-on-info` 02 Theme / info/on-info	`#093f4b`
`--color-on-info-tint` 02 Theme / info/on-info-tint	`#093f4ba3`

warning 7

Token	Value	Preview
`--color-on-warning` 02 Theme / warning/on-warning	`#ffffff`
`--color-on-warning-tint` 02 Theme / warning/on-warning-tint	`#ffffffa3`
`--color-warning` 02 Theme / warning/warning	`#fd7e14`
`--color-warning-natural` 02 Theme / warning/warning-natural	`#ffa94d`
`--color-warning-shade` 02 Theme / warning/warning-shade	`#d9480f`
`--color-warning-soft` 02 Theme / warning/warning-soft	`#fff4e6`
`--color-warning-tint` 02 Theme / warning/warning-tint	`#ffd8a8`

error 7

Token	Value	Preview
`--color-error` 02 Theme / error/error	`#fa5252`
`--color-error-natural` 02 Theme / error/error-natural	`#ff8888`
`--color-error-shade` 02 Theme / error/error-shade	`#c92a2a`
`--color-error-soft` 02 Theme / error/error-soft	`#fff5f5`
`--color-error-tint` 02 Theme / error/error-tint	`#ffc9c9`
`--color-on-error` 02 Theme / error/on-error	`#ffffff`
`--color-on-error-tint` 02 Theme / error/on-error-tint	`#ffffffa3`

static 20

Token	Value	Preview
`--color-static-black` 02 Theme / static/black	`#030805`
`--color-static-black-alpha-0` 02 Theme / static/static-black-alpha-0	`#1a171100`
`--color-static-black-alpha-4` 02 Theme / static/static-black-alpha-4	`#1a17110a`
`--color-static-black-alpha-8` 02 Theme / static/static-black-alpha-8	`#1a171114`
`--color-static-black-alpha-24` 02 Theme / static/static-black-alpha-24	`#1a17113d`
`--color-static-black-alpha-40` 02 Theme / static/static-black-alpha-40	`#1a171166`
`--color-static-black-alpha-64` 02 Theme / static/static-black-alpha-64	Light `#1a1711a3` Dark `#1a1711b8`
`--color-static-black-alpha-72` 02 Theme / static/static-black-alpha-72	Light `#1a1711b8` Dark `#1a1711f5`
`--color-static-black-alpha-96` 02 Theme / static/static-black-alpha-96	Light `#1a1711f5` Dark `#1a1711b8`
`--color-static-brand-color` 02 Theme / static/brand-color	`#3c3c3c`
`--color-static-white` 02 Theme / static/white	`#ffffff`
`--color-static-white-alpha-0` 02 Theme / static/static-white-alpha-0	`#ffffff00`
`--color-static-white-alpha-4` 02 Theme / static/static-white-alpha-4	`#ffffff0a`
`--color-static-white-alpha-8` 02 Theme / static/static-white-alpha-8	`#ffffff14`
`--color-static-white-alpha-24` 02 Theme / static/static-white-alpha-24	`#ffffff3d`
`--color-static-white-alpha-32` 02 Theme / static/static-white-alpha-32	`#ffffff52`
`--color-static-white-alpha-40` 02 Theme / static/static-white-alpha-40	`#ffffff66`
`--color-static-white-alpha-64` 02 Theme / static/static-white-alpha-64	Light `#ffffffa3` Dark `#ffffffb8`
`--color-static-white-alpha-72` 02 Theme / static/static-white-alpha-72	Light `#ffffffb8` Dark `#fffffff5`
`--color-static-white-alpha-96` 02 Theme / static/static-white-alpha-96	Light `#fffffff5` Dark `#ffffffb8`

opacity 9

Token	Value	Preview
`--color-invert-opacity-0` 02 Theme / opacity/invert-opacity-0	Light `#ffffff00` Dark `#00022800`
`--color-invert-opacity-8` 02 Theme / opacity/invert-opacity-8	Light `#ffffff14` Dark `#00022814`
`--color-invert-opacity-12` 02 Theme / opacity/invert-opacity-12	Light `#ffffff1f` Dark `#0002281f`
`--color-invert-opacity-24` 02 Theme / opacity/invert-opacity-24	Light `#ffffff3d` Dark `#0002283d`
`--color-opacity-0` 02 Theme / opacity/opacity-0	Light `#00022800` Dark `#ffffff00`
`--color-opacity-8` 02 Theme / opacity/opacity-8	Light `#00022814` Dark `#ffffff14`
`--color-opacity-12` 02 Theme / opacity/opacity-12	Light `#0002281f` Dark `#ffffff1f`
`--color-opacity-24` 02 Theme / opacity/opacity-24	Light `#0002283d` Dark `#ffffff3d`
`--color-opacity-32` 02 Theme / opacity/opacity-32	Light `#00022852` Dark `#ffffff52`

Token	Value	Preview
`--color-component-modal-overlay` 02 Theme / component/modal/overlay	`var(--color-foreground-static-black-alpha-32)`

Colors 2

Token	Value	Preview
`--color-link-color` 02 Theme / link-color	`var(--color-static-brand-color)`
`--color-link-color-light` 02 Theme / link-color-light	`var(--color-primary-tint)`

surface 6

foreground 7

primary 7

secondary 7

tertiary 7

success 7

info 7

warning 7

error 7

static 20

opacity 9

modal 1

Colors 2