Colors

Color Palette

Supports all standard Tailwind color utility classes using the following pattern.

{property}-{color}-{shade}

<div class="bg-primary-500">...</div>
<div class="border border-secondary-600">...</div>
<svg class="fill-surface-950">...</svg>

Contrast Colors

Contrast color values are available for every shade. Use these to set accessible text color and icon fill values.

{property}-{color}-contrast-{shade}

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <!-- Standard Colors -->
  <div class="bg-primary-500 text-primary-contrast-500">
    <p class="text-center p-4">Standard Colors</p>
  </div>
  <!-- Color Pairings -->
  <div class="bg-secondary-200-800 text-secondary-contrast-200-800">
    <p class="text-center p-4">Color Pairings</p>
  </div>
</div>

See the Preset system for additional utility classes that automatically mix each color and contrast tone.

Color Pairings

Provides a condensed syntax for implementing dual-tone color values that are balanced to easily swap between light and dark mode. These are enabled through the use of the CSS light-dark function.

{property}-{color}-{lightModeShade}-{darkModeShade}

How Pairings Work

The text-primary-300-700 pairing will enable Tailwind to generate the following class:

.text-primary-300-700 {
  color: light-dark(var(--color-primary-300), var(--color-primary-700));
}

Which is roughly equivilant to the following - just a lot more compact!

<div class="text-primary-300 dark:text-primary-700">...</div>

Pairing Previews

Below is a static representation of each pairing. Only primary is shown, but all Skeleton colors are supported.

Toggle this website bewteen light and dark mode to see how each color pairing reacts.

When to use Pairings

Color Parings are useful for generating a hierarchy of visual layers, ranging from foreground to background elements. Each reuse the same color ramp but, but inverts the order when toggling from light to dark mode.

<div class="bg-primary-950-50">Foreground</div>
<div class="bg-primary-900-100">...</div>
<div class="bg-primary-800-200">...</div>
<div class="bg-primary-700-300">...</div>
<div class="bg-primary-600-400">...</div>
<div class="bg-primary-500">Branding</div>
<div class="bg-primary-400-600">...</div>
<div class="bg-primary-300-700">...</div>
<div class="bg-primary-200-800">...</div>
<div class="bg-primary-100-900">...</div>
<div class="bg-primary-50-950">Background</div>

• We can use shade 950 for light mode and 50 from dark mode to represent our body text color.
• Then use shade 50 from light mode and 950 from dark mode to represent our app background.
• Use the static 500 shade for key branding elements, such as buttons or banners.
• Then reserve multiple layers between for elements such as cards, inputs, and more.

Transparancy

Both Skeleton Colors and Color Pairings support Tailwind’s color transparency syntax.

<div class="bg-primary-500/25">Primary Color @ 25% transparency</div>
<div class="bg-surface-50-950/60">Surface Pairing 50/950 @ 60% transparency</div>