Colors Use it!

Primary Colors

The Decoded Yellow is our main brand color. It translates the enlightenment we bring to our clients to the visual plane. It works best if used very sparingly.

Use yellow to highlight important information, but don’t use it for random small accents. At any given time there should be a maximum of 4 yellow elements on a page/in a browser window, including the logo.

Note that we use a slight off-white and a very dark grey on screen, but full process black and white in print. This is to reduce eye strain on screen.

Warm Greys

The Decoded Warm Greys are used to provide context, group and annotate. Each grey can be used with a tint of 40% to provide extra hues if needed.

Use Dark or Medium Grey to set copy. Light grey can only be used for backgrounds and graphical elements, and should not be used for copy.

Secondary Colors

Secondary colors are mainly used for infographics and interface elements. They should not dominate the main brand colors in any given user journey, but can take up a significant part of an individual asset.

• Use Full Colors for small text, thin outlines and where a bold color is needed.
• Use sparingly and make sure it doesn’t overpower our yellow or get too flashy.
• Use full colors at full opacity.
• Use Light Secondary Colors for backgrounds and bigger graphical elements.
• Always use proper light colors, not alpha values of full color.

Use It

GDocs

Our basic templates have color swatches set up.

Adobe

Use our Decoded CC Library to get all the color swatches.

Code

For basic apps and web sites, link to the decoded.css, then use helper classes as described in the documentation.

For more complex apps, include the Decoded Style Framework in your app and use the variable names listed above.