Colors
Elevate CSS comes with a thoughtfully designed default color scheme built into the framework. This system provides a comprehensive set of colors for designing consistent, accessible, and visually appealing user interfaces. Each color family includes a range of shades for flexibility across various design needs.
Color Structure
Below is an expanded explanation of our 9-step color ramp, spanning from -4 to +4. This extended structure offers more granular control over color usage, from deepest shades for text or accents to lightest tints for subtle backgrounds or highlights.
9-Step Ramp
-4: The darkest shade. Ideal for high-contrast text or very strong emphasis.
-3: A very deep tone, still excellent for text on light backgrounds or bold accents.
-2: A deep shade, suitable for stronger accents, outlines, or text on lighter backgrounds.
-1: A moderately dark shade, providing subtle emphasis for text, borders, or icons.
Base Color: The core shade — often used for brand elements or primary highlights.
+1: A lighter tint—useful for backgrounds, hover states, or gentle highlights.
+2: A soft tint for low-contrast elements, such as secondary backgrounds or UI components.
+3: An even lighter tint approaching a pastel range, suitable for large backgrounds or subdued highlights.
+4: The lightest tint—close to a near-white variant, perfect for minimal backgrounds, subtle overlays, or dividing elements.
These colors can be passed as a modifier in the following format: basecolor-shade, e.g. text:purple or bg-color:red-light.
You can utilize shades by adding a number to the base color, e.g. bg-color:red-1 or bg-color:red+2.
Below is an overview of the default colors with their respective shades: