Colors - Skeleton

Skeleton
  1. design
  2. ›
  3. colors

Colors

The Skeleton color system.

Source
Primary
50
100
200
300
400
500
600
700
800
900
950
Secondary
50
100
200
300
400
500
600
700
800
900
950
Tertiary
50
100
200
300
400
500
600
700
800
900
950
Success
50
100
200
300
400
500
600
700
800
900
950
Warning
50
100
200
300
400
500
600
700
800
900
950
Error
50
100
200
300
400
500
600
700
800
900
950
Surface
50
100
200
300
400
500
600
700
800
900
950

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

{property}-{color}-{shade}
KeyAccepted Values
Propertyaccent, bg, border, caret, decoration, divide, fill, outline, ring, shadow, stroke, text
Colorprimary, secondary, tertiary, success, warning, error, surface
Shade50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
 
<div class="bg-primary-500">...</div>
<div class="border border-secondary-600">...</div>
<svg class="fill-surface-950">...</svg>

Contrast Colors

Skeleton themes also include contrast color values for every shade. Use these to provide accessible overlapping text and icon fill color styles. Defined via each respective theme property.

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

This text has contrast for all themes.

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

Color Pairings

Utility classes that provide an opinionated pairing of colors for light and dark mode.

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

For example, here’s what the text-primary-300-700 color pairing represents. Since this is a combination of classes, Tailwind features like transparency are not possible. If you need this, consider using each primitive class directly.

.text-primary-300-700 { @apply text-primary-300 dark:text-primary-700; }

Below shows a static representation of each available pairing for the primary color.

500
Brand
400
300
200
100
50
600
700
800
900
950

Toggle light and dark mode to preview how the following pairings automatically adjust.

50 950
100 900
200 800
300 700
400 600
500
600 400
700 300
800 200
900 100
950 50
Based on mode
Static
Based on mode

Color Parings are useful for generating a heierarchy 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.

Dark Mode 950 900 800 700 600 500 400 300 200 100 50 Light Mode 50 100 200 300 400 500 600 700 800 900 950
  • 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.
<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>