Volter tokens

The semantic roles products read (https://brand.volter.ai/tokens.css), in the light scheme and the dark one. A product gets the dark values by declaring a dark color-scheme; one that declares none stays light. The same small interface is drawn from the roles in each scheme.

Intake reviewlivedonewaitingfailed

Review the intake form before Friday.

Alex asked 10:20 · 2 replies

Visible to the team

const world = twin('stripe', { seed: 42 }); // faithful where touched

Selected row

Row

Intake reviewlivedonewaitingfailed

Review the intake form before Friday.

Alex asked 10:20 · 2 replies

Visible to the team

const world = twin('stripe', { seed: 42 }); // faithful where touched

Selected row

Row

role	light	dark
--volter-surface-page	`#f7f6f1`	`#0f1a1f`
--volter-surface-raised	`#fbfaf7`	`#16252c`
--volter-surface-subtle	`#f2f1eb`	`#1d2d34`
--volter-surface-sunken	`#efeee8`	`#0b141a`
--volter-surface-inset	`#e7e6df`	`#22343c`
--volter-surface-disabled	`#dad9d1`	`#2a3a42`
--volter-surface-overlay	`rgba(251, 250, 247, 0.97)`	`rgba(22, 37, 44, 0.97)`
--volter-surface-inverse	`#16252c`	`#f7f6f1`
--volter-surface-media	`#0f1a1f`	`#070d10`
--volter-surface-inverse-raised	`#1d2d34`	`#fbfaf7`
--volter-surface-inverse-glow	`#22343c`	`#ffffff`
--volter-border-default	`#d9dad3`	`#2c3d45`
--volter-border-subtle	`#e9e8e1`	`#223239`
--volter-border-strong	`#c4c5bc`	`#3d5059`
--volter-border-emphasis	`#16252c`	`#f3f2ec`
--volter-text-primary	`#16252c`	`#f3f2ec`
--volter-text-muted	`#5d6970`	`#a9b0ad`
--volter-text-tertiary	`#66727a`	`#8b979b`
--volter-text-faint	`#a3aaa9`	`#6c7a80`
--volter-text-disabled	`#8a918f`	`#56646a`
--volter-text-inverse	`#f3f2ec`	`#16252c`
--volter-text-inverse-muted	`#a9b0ad`	`#5d6970`
--volter-text-on-strong	`#ffffff`	`#16252c`
--volter-text-on-bright-muted	`rgba(22, 37, 44, 0.78)`	`rgba(22, 37, 44, 0.78)`
--volter-text-on-bright-dim	`rgba(22, 37, 44, 0.6)`	`rgba(22, 37, 44, 0.6)`
--volter-action-default	`#16252c`	`#e4f09c`
--volter-action-hover	`#000000`	`#d8eb6a`
--volter-action-soft	`#eef4c4`	`rgba(228, 240, 156, 0.14)`
--volter-action-text	`#16252c`	`#e4f09c`
--volter-selection-default	`#16252c`	`#e4f09c`
--volter-selection-soft	`#eef4c4`	`rgba(228, 240, 156, 0.14)`
--volter-selection-text	`#16252c`	`#f3f2ec`
--volter-selection-object	`#ff6a1f`	`#ff6a1f`
--volter-selection-wash	`rgba(216, 235, 106, 0.55)`	`rgba(216, 235, 106, 0.3)`
--volter-status-live-base	`#5f9a2e`	`#9bcf62`
--volter-status-live-soft	`#eef4c4`	`rgba(155, 207, 98, 0.14)`
--volter-status-live-line	`#d7e8a6`	`rgba(155, 207, 98, 0.35)`
--volter-status-live-text	`#3f6b17`	`#b8e08a`
--volter-status-live-ring	`rgba(95, 154, 46, 0.18)`	`rgba(155, 207, 98, 0.22)`
--volter-status-live-wash	`rgba(228, 240, 156, 0.45)`	`rgba(228, 240, 156, 0.16)`
--volter-status-healthy-base	`#3f7a55`	`#6fbf8e`
--volter-status-healthy-soft	`#e8f0e6`	`rgba(111, 191, 142, 0.14)`
--volter-status-healthy-text	`#2f5f40`	`#93d3aa`
--volter-status-success-base	`#6a5a92`	`#aa98d8`
--volter-status-success-soft	`#ebe6f3`	`rgba(170, 152, 216, 0.16)`
--volter-status-success-line	`#d9d1ea`	`rgba(170, 152, 216, 0.38)`
--volter-status-success-text	`#4f4275`	`#c4b7e6`
--volter-status-attention-base	`#c7641a`	`#ec9a52`
--volter-status-attention-soft	`#fbede0`	`rgba(236, 154, 82, 0.14)`
--volter-status-attention-line	`#f1d6bd`	`rgba(236, 154, 82, 0.35)`
--volter-status-attention-text	`#8a3f0c`	`#f3b87f`
--volter-status-danger-base	`#d24a1f`	`#f07650`
--volter-status-danger-soft	`#fbebe4`	`rgba(240, 118, 80, 0.14)`
--volter-status-danger-line	`#f2cfc0`	`rgba(240, 118, 80, 0.38)`
--volter-status-danger-text	`#9c3310`	`#f59a7d`
--volter-status-danger-faint	`rgba(210, 74, 31, 0.08)`	`rgba(240, 118, 80, 0.08)`
--volter-status-recording-base	`#d24a1f`	`#f07650`
--volter-status-recording-text	`#ffffff`	`#ffffff`
--volter-data-base	`#4f6574`	`#8fa6b4`
--volter-data-soft	`#e9edef`	`rgba(143, 166, 180, 0.14)`
--volter-data-violet	`#6a5a92`	`#aa98d8`
--volter-data-green	`#3f7a55`	`#6fbf8e`
--volter-data-amber	`#c7641a`	`#ec9a52`
--volter-data-blue	`#3b5f8a`	`#7ea6d8`
--volter-overlay-hover	`rgba(22, 37, 44, 0.05)`	`rgba(243, 242, 236, 0.06)`
--volter-overlay-active	`rgba(22, 37, 44, 0.09)`	`rgba(243, 242, 236, 0.1)`
--volter-overlay-emboss	`rgba(22, 37, 44, 0.06)`	`rgba(243, 242, 236, 0.06)`
--volter-overlay-scrim	`rgba(22, 37, 44, 0.38)`	`rgba(0, 0, 0, 0.55)`
--volter-overlay-control	`rgba(22, 37, 44, 0.8)`	`rgba(15, 26, 31, 0.8)`
--volter-control-track	`#b3b6ae`	`#3d5059`
--volter-code-text	`#16252c`	`#f3f2ec`
--volter-code-comment	`#66727a`	`#8b979b`
--volter-code-keyword	`#d24a1f`	`#f59a7d`
--volter-code-variable	`#6a5a92`	`#c4b7e6`
--volter-code-string	`#3f7a55`	`#93d3aa`
--volter-code-constant	`#6a5a92`	`#c4b7e6`
--volter-code-function	`#16252c`	`#f3f2ec`
--volter-code-type	`#16252c`	`#f3f2ec`
--volter-code-tag	`#d24a1f`	`#f59a7d`
--volter-code-attribute	`#6a5a92`	`#c4b7e6`
--volter-code-punctuation	`#5d6970`	`#a9b0ad`
--volter-code-inline	`#6a5a92`	`#c4b7e6`
--volter-code-invalid	`#d24a1f`	`#f07650`
--volter-axis-x	`#d24a1f`	`#f07650`
--volter-axis-y	`#5f9a2e`	`#9bcf62`
--volter-axis-z	`#3b5f8a`	`#7ea6d8`
--volter-axis-grid	`#c4c5bc`	`#3d5059`
--volter-scene-dynamic	`#6a5a92`	`#aa98d8`
--volter-scene-dynamic-soft	`#dcd5e9`	`rgba(220, 213, 233, 0.3)`
--volter-scene-instance	`#5f9a2e`	`#9bcf62`
--volter-terminal-background	`#ffffff`	`#1e1e1e`
--volter-terminal-foreground	`#000000`	`#ffffff`
--volter-terminal-cursor	`#9d9d9d`	`#9d9d9d`
--volter-terminal-selection	`#b3d7ff`	`#3f638b`
--volter-terminal-black	`#000000`	`#000000`
--volter-terminal-red	`#990000`	`#990000`
--volter-terminal-green	`#00a600`	`#00a600`
--volter-terminal-yellow	`#999900`	`#999900`
--volter-terminal-blue	`#0000b3`	`#0000b3`
--volter-terminal-magenta	`#b300b3`	`#b300b3`
--volter-terminal-cyan	`#00a6b3`	`#00a6b3`
--volter-terminal-white	`#bfbfbf`	`#bfbfbf`
--volter-terminal-bright-black	`#666666`	`#666666`
--volter-terminal-bright-red	`#e60000`	`#e60000`
--volter-terminal-bright-green	`#00d900`	`#00d900`
--volter-terminal-bright-yellow	`#e6e600`	`#e6e600`
--volter-terminal-bright-blue	`#0000ff`	`#0000ff`
--volter-terminal-bright-magenta	`#e600e6`	`#e600e6`
--volter-terminal-bright-cyan	`#00e6e6`	`#00e6e6`
--volter-terminal-bright-white	`#e6e6e6`	`#e6e6e6`
--volter-accent-lime	`#e4f09c`	`#e4f09c`
--volter-accent-lime-strong	`#d8eb6a`	`#d8eb6a`
--volter-accent-lilac	`#dcd5e9`	`#dcd5e9`
--volter-accent-orange	`#ff6a1f`	`#ff6a1f`

role

light

dark

--volter-surface-page

#f7f6f1

#0f1a1f

--volter-surface-raised

#fbfaf7

#16252c

--volter-surface-subtle

#f2f1eb

#1d2d34

--volter-surface-sunken

#efeee8

#0b141a

--volter-surface-inset

#e7e6df

#22343c

--volter-surface-disabled

#dad9d1

#2a3a42

--volter-surface-overlay

rgba(251, 250, 247, 0.97)

rgba(22, 37, 44, 0.97)

--volter-surface-inverse

#16252c

#f7f6f1

--volter-surface-media

#0f1a1f

#070d10

--volter-surface-inverse-raised

#1d2d34

#fbfaf7

--volter-surface-inverse-glow

#22343c

#ffffff

--volter-border-default

#d9dad3

#2c3d45

--volter-border-subtle

#e9e8e1

#223239

--volter-border-strong

#c4c5bc

#3d5059

--volter-border-emphasis

#16252c

#f3f2ec

--volter-text-primary

#16252c

#f3f2ec

--volter-text-muted

#5d6970

#a9b0ad

--volter-text-tertiary

#66727a

#8b979b

--volter-text-faint

#a3aaa9

#6c7a80

--volter-text-disabled

#8a918f

#56646a

--volter-text-inverse

#f3f2ec

#16252c

--volter-text-inverse-muted

#a9b0ad

#5d6970

--volter-text-on-strong

#ffffff

#16252c

--volter-text-on-bright-muted

rgba(22, 37, 44, 0.78)

--volter-text-on-bright-dim

rgba(22, 37, 44, 0.6)

--volter-action-default

#16252c

#e4f09c

--volter-action-hover

#000000

#d8eb6a

--volter-action-soft

#eef4c4

rgba(228, 240, 156, 0.14)

--volter-action-text

#16252c

#e4f09c

--volter-selection-default

#16252c

#e4f09c

--volter-selection-soft

#eef4c4

rgba(228, 240, 156, 0.14)

--volter-selection-text

#16252c

#f3f2ec

--volter-selection-object

#ff6a1f

--volter-selection-wash

rgba(216, 235, 106, 0.55)

rgba(216, 235, 106, 0.3)

--volter-status-live-base

#5f9a2e

#9bcf62

--volter-status-live-soft

#eef4c4

rgba(155, 207, 98, 0.14)

--volter-status-live-line

#d7e8a6

rgba(155, 207, 98, 0.35)

--volter-status-live-text

#3f6b17

#b8e08a

--volter-status-live-ring

rgba(95, 154, 46, 0.18)

rgba(155, 207, 98, 0.22)

--volter-status-live-wash

rgba(228, 240, 156, 0.45)

rgba(228, 240, 156, 0.16)

--volter-status-healthy-base

#3f7a55

#6fbf8e

--volter-status-healthy-soft

#e8f0e6

rgba(111, 191, 142, 0.14)

--volter-status-healthy-text

#2f5f40

#93d3aa

--volter-status-success-base

#6a5a92

#aa98d8

--volter-status-success-soft

#ebe6f3

rgba(170, 152, 216, 0.16)

--volter-status-success-line

#d9d1ea

rgba(170, 152, 216, 0.38)

--volter-status-success-text

#4f4275

#c4b7e6

--volter-status-attention-base

#c7641a

#ec9a52

--volter-status-attention-soft

#fbede0

rgba(236, 154, 82, 0.14)

--volter-status-attention-line

#f1d6bd

rgba(236, 154, 82, 0.35)

--volter-status-attention-text

#8a3f0c

#f3b87f

--volter-status-danger-base

#d24a1f

#f07650

--volter-status-danger-soft

#fbebe4

rgba(240, 118, 80, 0.14)

--volter-status-danger-line

#f2cfc0

rgba(240, 118, 80, 0.38)

--volter-status-danger-text

#9c3310

#f59a7d

--volter-status-danger-faint

rgba(210, 74, 31, 0.08)

rgba(240, 118, 80, 0.08)

--volter-status-recording-base

#d24a1f

#f07650

--volter-status-recording-text

#ffffff

--volter-data-base

#4f6574

#8fa6b4

--volter-data-soft

#e9edef

rgba(143, 166, 180, 0.14)

--volter-data-violet

#6a5a92

#aa98d8

--volter-data-green

#3f7a55

#6fbf8e

--volter-data-amber

#c7641a

#ec9a52

--volter-data-blue

#3b5f8a

#7ea6d8

--volter-overlay-hover

rgba(22, 37, 44, 0.05)

rgba(243, 242, 236, 0.06)

--volter-overlay-active

rgba(22, 37, 44, 0.09)

rgba(243, 242, 236, 0.1)

--volter-overlay-emboss

rgba(22, 37, 44, 0.06)

rgba(243, 242, 236, 0.06)

--volter-overlay-scrim

rgba(22, 37, 44, 0.38)

rgba(0, 0, 0, 0.55)

--volter-overlay-control

rgba(22, 37, 44, 0.8)

rgba(15, 26, 31, 0.8)

--volter-control-track

#b3b6ae

#3d5059

--volter-code-text

#16252c

#f3f2ec

--volter-code-comment

#66727a

#8b979b

--volter-code-keyword

#d24a1f

#f59a7d

--volter-code-variable

#6a5a92

#c4b7e6

--volter-code-string

#3f7a55

#93d3aa

--volter-code-constant

#6a5a92

#c4b7e6

--volter-code-function

#16252c

#f3f2ec

--volter-code-type

#16252c

#f3f2ec

--volter-code-tag

#d24a1f

#f59a7d

--volter-code-attribute

#6a5a92

#c4b7e6

--volter-code-punctuation

#5d6970

#a9b0ad

--volter-code-inline

#6a5a92

#c4b7e6

--volter-code-invalid

#d24a1f

#f07650

--volter-axis-x

#d24a1f

#f07650

--volter-axis-y

#5f9a2e

#9bcf62

--volter-axis-z

#3b5f8a

#7ea6d8

--volter-axis-grid

#c4c5bc

#3d5059

--volter-scene-dynamic

#6a5a92

#aa98d8

--volter-scene-dynamic-soft

#dcd5e9

rgba(220, 213, 233, 0.3)

--volter-scene-instance

#5f9a2e

#9bcf62

--volter-terminal-background

#ffffff

#1e1e1e

--volter-terminal-foreground

#000000

#ffffff

--volter-terminal-cursor

#9d9d9d

--volter-terminal-selection

#b3d7ff

#3f638b

--volter-terminal-black

#000000

--volter-terminal-red

#990000

--volter-terminal-green

#00a600

--volter-terminal-yellow

#999900

--volter-terminal-blue

#0000b3

--volter-terminal-magenta

#b300b3

--volter-terminal-cyan

#00a6b3

--volter-terminal-white

#bfbfbf

--volter-terminal-bright-black

#666666

--volter-terminal-bright-red

#e60000

--volter-terminal-bright-green

#00d900

--volter-terminal-bright-yellow

#e6e600

--volter-terminal-bright-blue

#0000ff

--volter-terminal-bright-magenta

#e600e6

--volter-terminal-bright-cyan

#00e6e6

--volter-terminal-bright-white

#e6e6e6

--volter-accent-lime

#e4f09c

--volter-accent-lime-strong

#d8eb6a

--volter-accent-lilac

#dcd5e9

--volter-accent-orange

#ff6a1f