We rolled out a change yesterday that significantly simplifies how brand colors are handled in our Magma themes.

Previously, there were lots of color variables for every possible application, like, for example, linkText, blogColor and articleSeparator. Each of them could be set individually for every blog, so for example these could all be blue on Gizmodo, but on the A.V. Club, they were different. This led to a couple of problems:

  • It was sometimes hard to tell what exactly a variable is used for. This lead to inconsistencies in the design.
  • We kept introducing more and more variables and their number started to grow to an unmanageable level.

In the new system, each site has three accessible brand colors. These are:

  • primary: Used by default for most branded items. Used for text links on white and background. Has at least 4.5 contrast ratio with white and background. Saturated, visibly different from bodytext and secondarytext.
  • primaryLight: Used for text links on black. Has at least 4.5 contrast ratio with black. Saturated, visibly different from white and midgray.
  • backgroundLight: Used for visually separating sections, for example the left side of the login form. Colored, visibly different from white. Has at least 4.5 contrast ratio with primary, bodytext and secondarytext.

Advertisement

Sites can also have any number of decorative brand colors. These should never be used for important elements or text, because their contrast level is not guaranteed. Each site has at least one decorative color defined:

  • logo: Used on some sites for the logo, and for the background color of blog avatars. Also used for the border at the bottom of images on branded story cards. Doesn’t necessarily have a 4.5 contrast ratio with white, due to legacy reasons. Should be eventually replaced with primary if possible.

If you have questions on how to use colors in a project, ask anyone from the Design Team!