Semantic Colors
Learn about background color, and how to best use it in the Base System
Last updated
Learn about background color, and how to best use it in the Base System
Last updated
The Base System uses variables to manage the use of color across your projects. Out of the box, the Base system provides clear semantic variables for use on text, backgrounds, borders you can use these and add to them for additional colors.
Primative colors are our fundational colors, and the base system implements a traditional 100-900 color weight scale. You can adjust these as you need.
Semantic Colors are maped to our primatives and provide context to their usage helping make styles meaning and consistent across the project.
Base Colors: Use descriptive names based on the color and its purpose.
Example: Primary Blue, Secondary Yellow, Neutral Gray
Shades and Tints: Use a numerical system to indicate variations.
Example: Primary Blue 50, Primary Blue 100, Primary Blue 200
| Name | Root Variable | Primative |
|---|---|---|
| Name | Root | Primative |
|---|---|---|
| Name | Root | Primative |
|---|---|---|
Text Primary
--text--primary
Neutral 900
Text Secondary
--text-secondary
Neutral 800
Text Tertiary
--text-tertiary
Neutral 600
Text Brand
--text-brand
Purple 500
Text Light
--neutral--white
White
Text Dark
--neutral--white
Black
Background Primary
--background--primary
Neutral 900
Background Secondary
--background-secondary
Neutral 800
Background Tertiary
--background-tertiary
Neutral 600
Background Brand
--background-brand
Purple 500
Background Light
--neutral--white
White
Background Dark
--neutral--black
Black
Border Primary
--border--primary
Neutral 200
Border Secondary
--border-secondary
Neutral 100
Border Tertiary
--border-tertiary
Neutral 50
Border Light
--border-light
White
