

Variants share a naming pattern that references their color role, the interaction state they define, and any UI elements they’re linked to.

There are 10 color roles, which we use to generate the values of all the color variants in the palette.Ĭolor variants are variables that apply color to the UI, and their values are generated from the color roles. We define colors based on the role they play in the interface. However you should never convey information using color alone. It also makes the whole experience more accessible for merchants who are color blind or who have low vision. This makes things easier to find, identify, and interact with. The color system is designed within the HSLuv color space to generate themes that meet WCAG 2.1 compliant contrast ratios. They also extend the color system so it works across any touchpoint at Shopify. Defined color roles make things easy to modify and customize later. Colors have meaningĬolors have assigned roles, which hold a specific meaning based on how they function within the interface. Color supports the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements.

InkScape: Free and open-source vector graphics editor.: A tool for creating and collecting color palettes.Thanks to the following tools developing this project is possible: Here is a list of them: 👾 Code EditorsĬatppuccin is released under the MIT license, which grants the following permissions:įor more convoluted language, see the LICENSE. To make the best use them please refer to the style guide.Ĭatppuccin is available for various apps and in different formats. Harmony is superior to dissonance: vivacious colors must complement each other.Ĭatppuccin consists of 4 beautiful pastel color palettes.Suitability under various light conditions is a must. There should be balance: not too dull, not too bright.Colorful is better than colorless: the colorfulness of something contributes to the distinction amongst the parts of that something, making it marginally easier to understand how things are structured.It consists of 4 soothing warm palettes with 26 eye-candy colors each, perfect for coding, designing, and much more! In addition, this repository tracks the development of the actual color palette, the project's documentation, organization-wide assets, resources and code samples for maintainers/developers. Catppuccin is a community-driven pastel theme that aims to be the middle ground between low and high contrast themes.
