Color system overview
Get started with the CSS vars based OxyMade color system.
The problem:
Every design kit, even those from Oxygen default kits, core or our own kits, create its own global color set and a few colors for that kit to function properly.
As a result, the global color system usually becomes too crowded and turns the design system hard to maintain properly.
And we use colors in our classes such as color-primary, bg, bg-primary, and when we don’t have a particular color in the global color system, it turns everything bad and awkward.
The solution:
To resolve this issue and also prepare the path for bright future plans, we have created OxyMade color system.
Now, no matter what designs/design sets you use with our kits, our blocks will have no issues with colors. Additionally, we created a simple color palette generator to create different color palettes easily. The color palette generator will be improved over the next few weeks.
These are based on css variables, so these colors wont be available in your default Oxygen global colors, our css classes use our colors, so again, there will be no conflict with Oxygen’s global colors.
You can find our colors at: Your website → OxyMade Framework plugin → colors area. ( You will learn more about our plugin in next steps )
Colors & their role:
Here are the colors we are using and their role:
Primary → is the primary color we use through out the website, for buttons, headings, important elements, some backgrounds, etc.
Dark → is the darkest color in the set, Used for headings.
Paragraph → is the color which we use for paragraph text, not for headings.
Border → is for border color
Placeholder → is for any element that needs to be little highlighted, where primary, secondary colors are overkill.
Background → is a default background color through out the website.
Secondary → is a secondary color which might be useful to highlight a few areas where primary is not suitable.
Light → is exactly opposite of dark, and light is used for headings on high contrast backgrounds, mostly for primary or secondary color background areas.
Parapgraph alt → is an alternative paragraph color which can be used on high contrast backgrounds.
Same way, border alt, placeholder alt → are also can be used on high contrast background areas, like primary, secondary, or black backgrounds.
background alt → is an alternative background to divide each block in a page.
Black and white → are global colors and can be used whenever it is necessary.
We are using these colors to create a few colors based utility classes to offer with our framework.
You will learn more about them in next steps 👍