Skip to contentSkip to footer
Yellow, blue, red, and green bird in close-up photograph

Photo: David Clode

Color

Introduction

Natura11y’s color system makes it easier to keep color relationships consistent. Theme classes can be applied to full pages, sections, or individual components like cards and buttons.

Theme Colors: Your Principal Palette

Your principal theme colors include Primary, Secondary, Dark, Light, and Canvas.

Primary

Secondary

Dark

Light

Canvas (default)

These five colors produce utility classes for theme colors, background colors, text colors, and border colors.

Natura11y treats canvas as a color, which serves as the default theme. The framework applies the canvas theme and its correlated colors to the page by default.

Correlated Colors

Every theme color has five correlated colors. These are used for text, borders, links, and instances of confirm and warn. Correlated colors work in isolation within their corresponding theme color utility class.

Figure 1 (below) depicts the CSS variable declared for the primary theme on line 3. Lines 7-11 provide CSS variables for primary’s correlated colors.

      // Primary Theme Color


      --primary: #440381;


      // Primary Correlated Colors


      --primary-text: white;
      --primary-border: hsla(0, 0%, 0%, 0.25);
      --primary-link: currentColor;
      --primary-confirm: #16db93;
      --primary-warn: #ff73aa;
Figure 1

See the Related Custom Properties section for a descriptive list of the available color variables.

Theme Color Utilities

Natura11y’s theme color utility classes are one of its most useful features. Each theme color utility provides predefined colors for background, text, borders, and links (within paragraphs). Theme color utilities also provide colors for instances of confirm and warn.

Figure 2 (below) provides the five theme color utilities:

HTML
      <div class="theme-primary">...</div>
      <div class="theme-secondary">...</div>
      <div class="theme-dark">...</div>
      <div class="theme-light">...</div>
      <div class="theme-canvas">...</div>
Figure 2

You may apply theme colors to any containing block-level element within the DOM. Consider the following five cards, each colored with a different theme color utility.

Primary

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

Secondary

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

Dark

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

Light

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

Canvas

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

In Figure 3, notice the .theme-primary utility. No other element within the card needs its color specified. Each theme color utility applies its correlated colors to descendants.

HTML
      <div class="card theme-primary border-radius-2">


          <div class="card__head border-bottom">
              <p>
                  <strong>Theme: Primary</strong>
              </p>
          </div>


          <div class="card__body">
              <h2 class="h4">
                  Rainbow lorikeet
              </h2>
              <p>
                  The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern <a href="#">Queensland</a> to <a href="#1">South Australia</a>. Its habitat is rainforest, coastal bush and woodland areas.
              </p>
          </div>


          <div class="card__foot border-top">
              <ul class="nav nav--horizontal justify-content-between">
                  <li>
                      <a href="#1">Search Images</a>
                  </li>
                  <li>
                      <a class="button button--outline border-radius-pill" href="#1">
                          Visit Wikipedia
                      </a>
                  </li>
              </ul>
          </div>


      </div>
Figure 3

Refer to Figure 1 (above), on line 9. The correlated link color (e.g. –primary-link) value sets the color of generic links (<a> tags) within paragraphs (<p> tags). This is not only convenient, it keeps paragraph links visible and accessible.

Primary

It is common along the eastern seaboard, from northern Queensland to South Australia.

Secondary

It is common along the eastern seaboard, from northern Queensland to South Australia.

Dark

It is common along the eastern seaboard, from northern Queensland to South Australia.

Light

It is common along the eastern seaboard, from northern Queensland to South Australia.

Canvas

It is common along the eastern seaboard, from northern Queensland to South Australia.

Beyond generic links, a text color utility named .text-color-link is available. Figure 4 uses .text-color-link to color the buttons with the current theme’s link color.

Sign In
HTML
      <div class="display-flex gap-2 justify-content-center text-color-link">


          <a class="button button--outline" href="#1">
              Sign In
          </a>


          <a class="button button--icon-only" href="#1" aria-label="Language">
              <span class="icon icon-language" aria-hidden="true"></span>
          </a>


          <a class="button button--icon-only" href="#1" aria-label="Search">
              <span class="icon icon-search" aria-hidden="true"></span>
          </a>


      </div>
Figure 4

Confirm and Warn

In Figure 1 (above), on lines 10 and 11, you will find declarations for confirm and warn color values. Natura11y allows you to specify confirm and warn values for each theme color!

Primary

Alert Confirm
Alert Warn

Secondary

Alert Confirm
Alert Warn

Dark

Alert Confirm
Alert Warn

Light

Alert Confirm
Alert Warn

Canvas

Alert Confirm
Alert Warn

Instances of confirm and warn appear in alert and form elements.

Infinitely Nestable

You can nest theme color utilities throughout the DOM.

Primary

Secondary

Dark

Light

Canvas

Breakpoint Specific

Apply a theme color at a specific breakpoint. Chain a breakpoint modifier, such as --lg for the large breakpoint, to the color utility. Figure 5 applies .theme-primary--lg to the parent of the navigation.

HTML
      <div class="theme-primary--lg padding-3">


          <ul class="nav nav--divider nav--horizontal border border-radius-2">
              <li>
                  <a href="#1">Link</a>
              </li>
              <li>
                  <a href="#1">Link</a>
              </li>
              <li>
                  <a href="#1">Link</a>
              </li>
          </ul>


      </div>
Figure 5

On smaller viewports, the example uses the default canvas theme. It switches to the primary theme when the viewport reaches the large breakpoint. Scale your browser horizontally to see this change occur.

Prefers Color Scheme

Natura11y’s .theme-canvas utility offers a special --prefers modifier class. Use .theme-canvas--prefers when a canvas surface should use the dark theme values when the operating system prefers a dark color scheme.

Prefers

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

Subtle Fill

The .subtle-fill-1 and .subtle-fill-2 classes add light background tints to any element, using a percentage of the element’s text color (currentColor).

  • .subtle-fill-1 applies a background color that is 5% of the current text color.
  • .subtle-fill-2 applies a background color that is 10% of the current text color.

In the card examples below, we apply a subtle fill to the card footer with these variations.

Rainbow

A rainbow is a meteorological phenomenon that appears as a multicolored arc that forms with the sunlight reflecting off water.

HTML
      <div class="card theme-dark">


          <div class="card__body">
              <!-- ... -->
          </div>


          <div class="card__foot subtle-fill-1">
              <!-- ... -->
          </div>


      </div>
Figure 6

Notice how subtle fills appear differently depending on the theme: darker on the canvas theme and lighter on the dark theme.

Background Color Utilities

Need to apply only a background color? The background color utilities shown in Figure 7 apply a background color to an element.

Primary

Secondary

Dark

Light

White

HTML
      <div class="background-color-primary">...</div>
      <div class="background-color-secondary">...</div>
      <div class="background-color-dark">...</div>
      <div class="background-color-light">...</div>
      <div class="background-color-canvas">...</div>
Figure 7

Text Color Utilities

Natura11y’s text color utilities apply a text color to specific elements.

Figure 8 applies the primary theme to a containing element. The third button uses .text-color-secondary, which overrides the inherited theme text color.

HTML
      <div class="theme-primary padding-4">


          <ul class="nav nav--horizontal justify-content-center">
              <li>
                  <a class="button" href="#1">
                      Button
                  </a>
              </li>
              <li>
                  <a class="button" href="#1">
                      Button
                  </a>
              </li>
              <li>
                  <a class="button text-color-secondary" href="#1">
                      Button
                  </a>
              </li>
          </ul>


      </div>
Figure 8

Text color utilities take priority over color applied by theme color utilities.

Available text color utilities are shown in Figure 9:

HTML
      <div class="text-color-primary">...</div>
      <div class="text-color-secondary">...</div>
      <div class="text-color-dark">...</div>
      <div class="text-color-light">...</div>
      <div class="text-color-canvas">...</div>
      <div class="text-color-link">...</div>
Figure 9

Customization

Accessibility