Colors

Our colors are broken down into four categories.

  • Brand colors

  • Signal colors

  • Sandwich Filter colors

Sandwich-colors.png

  • Theme colors

  • Client background colors

The colors are set using Layer Styles. Brand and Signal colors in the UI Kit has a base color complimented with four tints and four shades. The base color is called 500, tints go from 100 to 400 and the shades from 600 to 900 which is reflected in the Layer Style names.

Each color has nine options:

  • 100 (lightest)
  • 200
  • 300
  • 400
  • 500 (base)
  • 600
  • 700
  • 800
  • 900 (darkest)

Brand colors

When creating a new theme, the best place to start is by setting the brand colors. These are the three main colors used throughout the UI. They should be aligned with the brand, and include primary, secondary, and accent colors. By default, the primary brand color are used for the buttons in the client UI, but these can be overridden, if necessary.

Setting up

  1. Go to the Colors page in the Sketch UI Kit.
  2. Edit the brand, signal, theme and client background colors.
  3. These colors are Layer Styles so any changes you make to them will be reflected across the entire UI Kit document. Make sure to update the Layer Style in the Appearance dropdown menu in the Sketch Inspector panel after changing the color to affect the whole UI Kit.

Signal colors

These are used to show errors, warnings, etc and should only be overridden if absolutely necessary.

Sandwich Filter colors

These are the Sandwich Filter background colors. The top bar has the same background color as the headers which equals the primary color in many themes. The second bar is 10% lighter and the third bar is 20% lighter than the top bar. The end result should be colors that doesn't use opacity or alpha, use the method described in the Youtube video to create solid colors.

Theme colors

The shades of grey used for backgrounds, text and icons. Only edit if absolutely necessary.

Client background colors

Backgrounds for components and other parts of the client. Some of them include shadows and borders.