Colors

The default set of color palettes have been selected to look great and be extremely flexible.

Color palettes

The default color palettes provide a robust set of colors for use throughout your theme.

Theme

Primary

#0072EF

Heading

#222

Text

#333

Link

#0072EF

Outline

rgba(0, 114, 239, .25)

Background

#fff

Black and white

Black

#000

White

#fff

Translucent

rgba(255, 255, 255, .1)

Gray

Gray-100

#F7FAFC

Gray-200

#EDF2F7

Gray-300

#E2E8F0

Gray-400

#CBD5E0

Gray-500

#A0AEC0

Gray-600

#718096

Gray-700

#4A5568

Gray-800

#2D3748

Gray-900

#1A202C

Green

Green-100

#F0FFF4

Green-300

#9AE6B4

Green-500

#48BB78

Green-700

#2F855A

Green-900

#22543D

Orange

Orange-100

#FFFAF0

Orange-300

#FBD38D

Orange-500

#ED8936

Orange-700

#C05621

Orange-900

#7B341E

Red

Red-100

#FFF5F5

Red-300

#FEB2B2

Red-500

#F56565

Red-700

#C53030

Red-900

#742A2A

Adding and changing colors

You can easily add your own custom color palettes by specifying defining them in your theme’s _variables.scss file. All colors defined in the $colors Sass map are used to generate text, background and border color utilities. By default this includes all colors except for the Heading, Text, Link and Outline theme colors.

The following example adds a purple color palette to the theme:

$colors: (
  "purple-100": #faf5ff,
  "purple-300": #d6bcfa,
  "purple-500": #9f7aea,
  "purple-700": #6b46c1,
  "purple-900": #44337a,
);

Any color values that are already defined as defaults by the framework will be overridden.

Introduction

Base styles

Plugins