Our colors are broken down into four categories.
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:
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.
These are used to show errors, warnings, etc and should only be overridden if absolutely necessary.
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.
The shades of grey used for backgrounds, text and icons. Only edit if absolutely necessary.
Backgrounds for components and other parts of the client. Some of them include shadows and borders.