https://www.youtube.com/watch?v=xPZ5FOesvAI

Benefits

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Change the color of any Webflow component

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Use any swatch at multiple opacities

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Create visual consistency throughout a project

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Reduce dependence on combo classes

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Make global color edits easily

</aside>

Global Swatches

All colors used throughout our design should be saved as RGB in global swatch variables. These swatches can fit into three categories: dark, light, & brand. Names are abstracted to prevent renaming if values ever change.

/* global swatches */
html {
  --dark-1: 34, 34, 32;
  --dark-2: 53, 53, 49;
	--light-1: 244, 244, 241;
  --light-2: 255, 255, 255;
  --brand-1: 198, 251, 80;
	--alt-selection-bg: rgba(var(--brand-1), 1);
	--alt-selection-fc: rgba(var(--dark-1), 1);
}

Color Modes

Color modes apply a new background, border, and font color to an element. They also define selection, border, and text stroke color for all children inside the mode. There are five types of modes, and we can add as many of each as our project requires.

Untitled

Section Mode (sm)

A section mode is often applied to a section to override the default mode assigned to the body. Changing the section mode changes colors of any card, element, button, or link modes inside that section.

Card Mode (cm)

A card mode is often applied to cards within a section. Card modes can affect the colors of element, button, or link modes when they’re inside that card.

Element Mode (em)

An element mode can be applied to any non-interactive element within a section or card mode. It will change color depending on the element that contains it.

Btn Mode (bm)