Photo by David Clode on Unsplash
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.
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
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:
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.
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.
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.
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.
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!
You can nest theme color utilities throughout the DOM.
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).
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
.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.
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.
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.
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:
Related CSS Variables
Further customize Color by redefining any of their related CSS variables as shown below.