Color quads

SFUMATO provides a color quad system for easily controlling theme colors across your web application. There are a set of base color quads that should not be customized. There is also a set of theme colors quads that should be customized for your project.

The color quads are simple color themes that you can assign with one mixin.

div {
    @include sf-set-color-scheme (slate);

Each color quad is a collection of four colors for background, foreground, hyperlinks, and headlines. The background (first) color represents the name of the quad. So if you just need one color, there are functions available for all four quad elements.

p {
    color: sf-get-foreground-color(primary);
    background-color: sf-get-background-color(primary);

h2 {

    color: sf-get-headline-color(primary);

a, a:visited {

    color: sf-get-anchor-color(primary);

Check out the _config.scss partial for the color quad lists.