Skip to main content

Colors

Tokens

Main Colors

VariablesProperties
--ob-white-h
--ob-white-s
--ob-white-l
0
0%
100%
--ob-black-h
--ob-black-s
--ob-black-l
0
0%
9%
--ob-body-light-h
--ob-body-light-s
--ob-body-light-l
0
0%
100%
--ob-body-dark-h
--ob-body-dark-s
--ob-body-dark-l
216
20%
20%

Typography Colors

VariablesProperties
--ob-white-emph-h
--ob-white-emph-s
--ob-white-emph-l
0
0%
98%
--ob-black-emph-h
--ob-black-emph-s
--ob-black-emph-l
0
0%
12%

Base Colors

Colors Base
VariablesProperties
--ob-primary-h
--ob-primary-s
--ob-primary-l
173
47%
62%
--ob-secondary-h
--ob-secondary-s
--ob-secondary-l
214
28%
26%
--ob-tertiary-h
--ob-tertiary-s
--ob-tertiary-l
184
63%
40%
--ob-neutral-h
--ob-neutral-s
--ob-neutral-l
220
9%
46%
--ob-accent-h
--ob-accent-s
--ob-accent-l
356
79%
64%
Colors Variants
VariablesProperties
--ob-primary-l-50
--ob-primary-l-100
--ob-primary-l-200
--ob-primary-l-300
--ob-primary-l-400
--ob-primary-l-500
--ob-primary-l-600
--ob-primary-l-700
--ob-primary-l-800
--ob-primary-l-900
96%
92%
85%
77%
70%
var(--ob-primary-l)
50%
37%
25%
12%
--ob-secondary-l-50
--ob-secondary-l-100
--ob-secondary-l-200
--ob-secondary-l-300
--ob-secondary-l-400
--ob-secondary-l-500
--ob-secondary-l-600
--ob-secondary-l-700
--ob-secondary-l-800
--ob-secondary-l-900
96%
92%
82%
71%
55%
var(--ob-secondary-l)
23%
20%
16%
11%
--ob-tertiary-l-50
--ob-tertiary-l-100
--ob-tertiary-l-200
--ob-tertiary-l-300
--ob-tertiary-l-400
--ob-tertiary-l-500
--ob-tertiary-l-600
--ob-tertiary-l-700
--ob-tertiary-l-800
--ob-tertiary-l-900
94%
88%
76%
64%
52%
var(--ob-tertiary-l)
32%
24%
16%
8%
--ob-neutral-l-50
--ob-neutral-l-100
--ob-neutral-l-200
--ob-neutral-l-300
--ob-neutral-l-400
--ob-neutral-l-500
--ob-neutral-l-600
--ob-neutral-l-700
--ob-neutral-l-800
--ob-neutral-l-900
98%
96%
91%
84%
65%
var(--ob-neutral-l)
34%
27%
17%
11%
--ob-accent-l-50
--ob-accent-l-100
--ob-accent-l-200
--ob-accent-l-300
--ob-accent-l-400
--ob-accent-l-500
--ob-accent-l-600
--ob-accent-l-700
--ob-accent-l-800
--ob-accent-l-900
96%
93%
85%
78%
71%
var(--ob-accent-l)
51%
38%
25%
13%

Feedback Colors

Colors Base
VariablesProperties
--ob-informative-h
--ob-informative-s
--ob-informative-l
211
54%
50%
--ob-success-h
--ob-success-s
--ob-success-l
96
42%
50%
--ob-warning-h
--ob-warning-s
--ob-warning-l
44
86%
50%
--ob-error-h
--ob-error-s
--ob-error-l
7
88%
50%
Colors Variants
VariablesProperties
--ob-informative-l-50
--ob-informative-l-100
--ob-informative-l-200
--ob-informative-l-300
--ob-informative-l-400
--ob-informative-l-500
--ob-informative-l-600
--ob-informative-l-700
--ob-informative-l-800
--ob-informative-l-900
95%
90%
80%
70%
60%
var(--ob-informative-l)
40%
30%
20%
10%
--ob-success-l-50
--ob-success-l-100
--ob-success-l-200
--ob-success-l-300
--ob-success-l-400
--ob-success-l-500
--ob-success-l-600
--ob-success-l-700
--ob-success-l-800
--ob-success-l-900
95%
90%
80%
70%
60%
var(--ob-success-l)
40%
30%
20%
10%
--ob-warning-l-50
--ob-warning-l-100
--ob-warning-l-200
--ob-warning-l-300
--ob-warning-l-400
--ob-warning-l-500
--ob-warning-l-600
--ob-warning-l-700
--ob-warning-l-800
--ob-warning-l-900
95%
90%
80%
70%
60%
var(--ob-warning-l)
40%
30%
20%
10%
--ob-error-l-50
--ob-error-l-100
--ob-error-l-200
--ob-error-l-300
--ob-error-l-400
--ob-error-l-500
--ob-error-l-600
--ob-error-l-700
--ob-error-l-800
--ob-error-l-900
95%
90%
80%
70%
60%
var(--ob-error-l)
40%
30%
20%
10%

Elevations Colors

VariablesProperties
--ob-elevations-comp-h
--ob-elevations-comp-s
--ob-elevations-comp-l
var(--ob-secondary-h)
var(--ob-secondary-s)
var(--ob-secondary-l-400)