Colors

All the colors are available as Sass variables and a Sass map in the variables file. We use them to create a subset of these colors for a theme palette for easier usage. It allows you to remain consistent.

Available colors

We manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., $indigo-500) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s mix() color function.

Changing default values

When you do need to customize your palette, you can configure your base colors which will automatically create a complete suite of colors. Be sure to monitor contrast ratios as you customize colors.

All variables in the $colors map are defined as standalone variables. To modify an existing color in our $colors map, add the following to your custom Sass file:

$blue:    #3b6eff;
$indigo:  #6366F1;
$purple:  #5F1F7A;
$pink:    #FF92AE;
$red:     #F16063;
$orange:  #F7936F;
$yellow:  #fdb813;
$green:   #66CB9F;
$teal:    #4DD9CB;
$cyan:    #68DBF2;

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables. This enables more comprehensive customization and extension for any project.

Available theme colors

Changing theme colors

Since now we have a pre-defined color palette it is easy to change the default theme colors just by swaping the default value. You can use the variable below for customization.

$primary:       $indigo;
$secondary:     $gray-300;
$tertiary:      $pink;
$neutral:       $white;
$success:       $green;
$info:          $cyan;
$warning:       $orange;
$danger:        $red;
$light:         $gray-200;
$dark:          $gray-900;

Gray colors

Available gray colors

Each gray color has a specific use in our themes. Some of them are used for backgrounds, some of them are used for component properties or text colors.

Changing gray colors

Inside the variables file you will find the pre-defined gray colors and Sass map. Here’s an example of the variables used:

$gray-50:  #FAFAFA;
$gray-100: #F7FAFC;
$gray-200: #EDF2F7;
$gray-300: #E2E8F0;
$gray-400: #CBD5E0;
$gray-500: #A0AEC0;
$gray-600: #718096;
$gray-700: #425466;
$gray-800: #2D3748;
$gray-900: #1A202C;

Typography

Headings

All HTML headings, <h1> through <h6>, are available.

<h1>h1. This is a heading</h1>
<h2>h2. This is a heading</h2>
<h3>h3. This is a heading</h3>
<h4>h4. This is a heading</h4>
<h5>h5. This is a heading</h5>
<h6>h6. This is a heading</h6>

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

<p class="h1">h1. This is a heading</p>
<p class="h2">h2. This is a heading</p>
<p class="h3">h3. This is a heading</p>
<p class="h4">h4. This is a heading</p>
<p class="h5">h5. This is a heading</p>
<p class="h6">h6. This is a heading</p>

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

<h1 class="display-1">Display heading</h1>
<h1 class="display-2">Display heading</h1>
<h1 class="display-3">Display heading</h1>
<h1 class="display-4">Display heading</h1>
<h1 class="display-5">Display heading</h1>
<h1 class="display-6">Display heading</h1>

Lead

Make a paragraph stand out by adding .lead.

<p class="lead">
    This is a lead paragraph. It stands out from regular paragraphs.
</p>