Color

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.

You've Gotta Start Somewhere, Right?

Elevate includes a set of sensible defaults for most things, but you can always extend them or override them as you see fit. For more information, check out the Configuration & Extension guide.

Color Structure

Each color in the default palette is categorized into five variations:

• Darkest: The deepest shade, suitable for accents or text on light backgrounds.
• Dark: A moderately dark shade for subtle emphasis.
• Base: The core shade of the color family.
• Light: A slightly lighter shade for backgrounds or highlights.
• Lightest: The softest shade, ideal for backgrounds or low contrast elements.

These colors can be passed as a modifier in the following format: basecolor-shade, e.g. text:purple or bg-color:red-light.

Below is an overview of the default colors with their respective shades:

Purple

Red

Indigo

Orange

Green

Black

White