Tokens · yravg UI

Section

Tokens

Read from design/yravg-ui.css. Swatches use the live custom properties. The second figure is the computed value.

Accent is the single product colour. This gallery sets --accent: #B4532A.

Colour

--accent
#B4532A

--danger
#8E3B24

--warn
#C98A2B

--ok
#3F7D5A

--canvas
#FAF9F5

--surface
#FFFFFF

--line
#E6E2D8

--line-strong
#C9C3B5

--track
#EEE9DF

--ink
#1F1F1F

--ink-dim
rgba(31,31,31,.62)

--ink-faint
rgba(31,31,31,.45)

--ink-off
rgba(31,31,31,.28)

11px Register open 128

12px Register open 128

13px Register open 128

15px Register open 128

18px Register open 128

26px Register open 128

44px Register open 128

--s1 8px

--s2 16px

--s3 24px

--s4 32px

--s5 40px

--s6 48px

--s9 72px

--s12 96px

--r-card 10px

--r-input 8px

--r-chip 999px