Co-Design provides a powerful and functional color system. All colors can be overriden in the "_child.scss" file.
Every site has a primary color. That one is part of a sites identity and brand.
Co-Design defaults to Codidacts brand color #4B68FF, however you should change it to your sites brand color.
You can access the primary color with these classes:
You can also append these classes with
-X, where X is any of these numbers, to get these shades:
Secondary colors represent a "mood" of your site. Something worked, failed, needs your attention, ... Co-Design has four secondary colors:
The tertiary colors are black, gray and white.
You can access the tertiary colors with these classes:
.has-color-black for foreground.
.has-background-color-black for background.
.has-border-color-black for border.
.has-color-tertiary for foreground.
.has-background-color-tertiary for background.
.has-border-color-tertiary for border.
.has-color-white for foreground. (using gray here for visibility)
.has-background-color-white for background. (using gray here for visibility)
.has-border-color-white for border. (using gray here for visibility)
For "tertiary" (but not "black" and "white"), you can also append the classes with `-X`, where X is any of these numbers, to get these shades: