Color System

To stay consistent, Yumma CSS has a set of colors ready to go right out of the box. You can customize them using the light and dark utility class color shades in your theme to get a specific color.

Base colors

The foundations of our color palette are defined in SCSS variables. Here’s how the colors are defined:

// variables
$yma-colors-red: #d73d3d;
$yma-colors-orange: #e06814;
$yma-colors-yellow: #d3a107;
$yma-colors-green: #1fb155;
$yma-colors-teal: #12a695;
$yma-colors-cyan: #05a4bf;
$yma-colors-blue: #3575dd;
$yma-colors-indigo: #595cd9;
$yma-colors-violet: #7d53dd;
$yma-colors-pink: #d4418a;
$yma-colors-silver: #bfc2c7;
$yma-colors-gray: #606773;
$yma-colors-lead: #3f3f4e
$yma-colors-black: black;
$yma-colors-white: white;
$yma-colors-transparent: transparent;

Color shades

To specify lighter or darker shade to a given color, you can use the [class]-l-[color]-[shade] selector to get a lighter color or [class]-d-[color]-[shade] selector to get a darker color:

Using shades

The current color range is restricted to shades from 1 to 6 for both light and dark variants, with the exclusion of the base color.

<!-- Light cyan -->
<button class="bg-l-cyan-3 fw-600 px-5 py-1 rad-1 tc-white">Subscribe</button>

<!-- Dark cyan -->
<button class="bg-d-cyan-3 fw-600 px-5 py-1 rad-1 tc-white">Subscribe</button>

Red

Orange

Yellow

Green

Teal

Cyan

Blue

Indigo

Violet

Pink

Gray

Lead

Silver

Color utilities

Here’s a list of all the Yumma CSS color classes for customizing your theme.

Accent Color Controls form control accent color.

Background Color Controls the background color of an element.

Border Color Controls the color of the borders of an element.

Caret Color Controls the text input cursor color.

Outline Color Controls the color of the outline of an element.

Text Color Controls the text color of an element.

Text Decoration Color Controls the color of the text decoration.