Color utilities

Co-Design provides a powerful and functional color system. All colors can be overriden in the "_child.scss" file.

Primary color

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:

• .has-color-primary for foreground.
• .has-background-color-primary for background.
• .has-border-color-primary for border.

You can also append these classes with -X, where X is any of these numbers, to get these shades:

Secondary colors

Secondary colors represent a "mood" of your site. Something worked, failed, needs your attention, ... Co-Design has four secondary colors:

Tertiary 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: