Photo by David Clode on Unsplash
Color
Introducing Natura11y's dynamic color system. Intuitively maintain colors—apply them with little effort across pages, components, and content.
When selecting color combinations, make sure your colors meet a sufficient contrast ratio.
Learn more about accessible contrast ratios.
Theme Colors: Your Principle 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 (white) as a color—and this is important—it serves as your default theme. Natura11y's CSS file applies the canvas theme (and its correlated colors) to the <body> selector.
Correlated Colors
Every theme color has five correlated colors. These are for text, borders, and certain links—along with 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.
For a descriptive list of all colors available, jump over to the css variable reference guide.
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:
<div class="theme-primary">...</div>
<div class="theme-secondary">...</div>
<div class="theme-dark">...</div>
<div class="theme-light">...</div>
<div class="theme-white">...</div>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 (below), on line 1, notice the .theme-primary utility present. No other element within the card needs color specified. Each theme color utility applies its correlated colors to all descendants.
<div class="card theme-primary border-radius">
<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 rounded-pill" href="#1">
Visit Wikipedia
</a>
</li>
</ul>
</div>
</div>Links
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. With the following example, .text-color-link (Figure 4, Line 5) colors the buttons within the button group selector blue.
<div class="button-group 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>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
Secondary
Dark
Light
Canvas
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 (e.g. --lg for a large breakpoint) to a the color utility. In the following example, .theme-primary--lg is present on the parent selector of our nav (Figure 5, line 1).
<div class="theme-primary--lg">
<ul class="nav nav--divider nav--horizontal border border-radius">
<li>
<a href="#1">Link</a>
</li>
<li>
<a href="#1">Link</a>
</li>
<li>
<a href="#1">Link</a>
</li>
</ul>
</div>On smaller viewports The above example uses the default white theme. It instead used 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. With .theme-canvas--prefers present on the <body> tag for example, a light or dark color theme is used depending on the operating system's settings.
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.
Background Color Utilities
Need to apply only a background color? Our background color utilities (shown in Figure 6) apply a background color to its selector.
Primary
Secondary
Dark
Light
White
<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-white">...</div>Text Color Utilities
Natura11y's text color utilities are useful for applying text color specificly to certain selectors.
Consider the following example in Figure 7. With our primary theme applied to the containing element (line 1), .text-color-secondary is present on the third button selector.
<div class="theme-light">
<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>Keep in mind that text color utilities take priority over color applied with theme color utilies. This, of course allows for even more variations within your themes.
Available text color utilities shown in figure 8:
<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-white">...</div>
<div class="text-color-link">...</div>Related CSS Variables
Further customize Color by redefining any of their related CSS variables as shown below.
:root {
--primary: #1E00B3;
--primary-text: white;
--primary-border: hsla(0, 0%, 0%, 0.25);;
--primary-link: currentColor;
--primary-confirm: currentColor;
--primary-warn: currentColor;
--secondary: #64cc7e;
--secondary-text: var(--dark);
--secondary-border: hsla(0, 0%, 0%, 0.25);
--secondary-link: currentColor;
--secondary-confirm: currentColor;
--secondary-warn: currentColor;
--dark: #191b35;
--dark-text: currentColor;
--dark-border: currentColor;
--dark-link: currentColor;
--dark-confirm: currentColor;
--dark-warn: currentColor;
--light: #191b35;
--light-text: var(--dark);
--light-border: hsla(0, 0%, 50%, 0.25);
--light-link: var(--a11y-link);
--light-confirm: #007e35;
--light-warn: #ce1736;
--canvas-text: var(--dark);
--canvas-border: hsla(0, 0%, 50%, 0.25);
--canvas-link: var(--a11y-link);
--canvas-confirm: #008237;
--canvas-warn: #e4193c;
--a11y-link: blue;
}