Primative Colors

Learn about background color, and how to best use it in the Base System

1.0 Semantic Colors

To streamline your workflow and maintain consistency, you'll add your colors as variables in Webflow. This allows you to quickly reference and reuse colors throughout your project.

2.0 Classes & Variables

2.1 Text Variables

Class Name	Root Variable	Primative Variable
Text Primary	--text--primary	Neutral 900
Text Secondary	--text-secondary	Neutral 800
Text Tertiary	--text-tertiary	Neutral 600
Text Brand	--text-brand	Purple 500
Text Light	--neutral--white	White
Text Dark	--neutral--white	Black

2.2 Background Variables

Name	Root	Primative
Background Primary	--background--primary	Neutral 900
Background Secondary	--background-secondary	Neutral 800
Background Tertiary	--background-tertiary	Neutral 600
Background Brand	--background-brand	Purple 500
Background Light	--neutral--white	White
Background Dark	--neutral--black	Black

2.3 Border Variables

Name	Root	Primative
Border Primary	--border--primary	Neutral 200
Border Secondary	--border-secondary	Neutral 100
Border Tertiary	--border-tertiary	Neutral 50

3.0 General Usage

3.1 Naming Convention

• Base Colors: Use descriptive names based on the color and its purpose.

  • Example: Primary Blue, Secondary Yellow, Neutral Gray

• Shades and Tints: Use a numerical system to indicate variations.

  • Example: Primary Blue 50, Primary Blue 100, Primary Blue 200