Colors
Main Colors
| Variables | Properties |
|---|---|
--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
| Variables | Properties |
|---|---|
--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
| Variables | Properties |
|---|---|
--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
| Variables | Properties |
|---|---|
--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
| Variables | Properties |
|---|---|
--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
| Variables | Properties |
|---|---|
--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
| Variables | Properties |
|---|---|
--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) |