Set of colors used as the default Garden interface.


We highly encourage the usage of color interfaces rather than color names. Color interfaces represent a purpose, not a color itself. While you can and should use your own color scheme, using color names such as $color-green on a project makes theming a hard task.
The color palette grows as our own needs on interfaces grow as well. You can click on the color to copy its interface name.


To customize the default color interface, you can use a configuration file or override the variables at any moment before Garden CSS is processed.

  /* your css */

  $color-primary: #ffffff;

  @import "garden/buttons";

  /* or */

  @import "garden";

Check out our scaffolding section for more info on providing your own defaults for colors.