We use primary colors, reminiscent of childhood, to communication a sense of fun or wonder, but we slightly desaturated each color to look more modern. Together with a large palette of greys, our goal with color is to create a familiar app-like experience, with bright splashes of color throughout.
The overall goal of Catalytic Design System is make getting work done faster and easier, but we also want users to view our products as being fun and exciting. We never want users to think Catalytic is just another enterprise product. Color choice is a big part of attaining that look and feel.
Colors
Color should be used sparingly on each screen. Each screen should never present to the user more than one or two colors. A primary color to denote actions, like buttons and links. And optionally a secondary color to show status or alternate actions like complete or delete.
#00A5F7Cerulean
#33CCCCMint
#FC6666Strawberry
#8FC056Olive
#FFC640Canary
#FFC640Tangerine
#FF894FHeather
#AF79BDPorpoise
Greys
Greys should also be used sparingly, with never more than three different greys to a screen. Greys should be used for borders, keylines, content background, and subtitles. Greys should be used consistently across the entire experience.
#333333Pebble Grey
#4D4D4DSlate Grey
#868686Battleship Grey
#B3B3B3Ash Grey
#CCCCCCPastel Grey
#EBEBEBLight Grey
#F9F9F9Ghost White
Text & Background Colors
All text, with possibly the exception of subtitles, should be black. All designs should be on a white background.