Design Tokens

Tailwind

The Skeleton Tailwind plugin provides a set of utility classes that adjust to your theme settings.

Getting Started

We recommend this conference talk by Brad Frost if you would like to learn more about the design token concept.

Skeleton utilizes a simple but powerful design token system to implement your theme settings for use in elements and components. Design tokens are the default classes for elements and components, which means they auto-adapt based on your theme with minimal configuration out of the box. However, we also make these available to use in your own projects, allowing you to utilize this same technique your own custom components and styling.

Theme Flow

Below is a visualization of how Skeleton uses your theme to control your UI. We start with your theme's CSS variables, then construct design token classes from these, next components utilize these design token classes, then finally you construct your pages with sets of elements and components.

flow

Color Pairing Chart

Below is a visualization of color pairings in Skeleton. This is how we balance light and dark mode for your themes in practice. For example, the surface color swatch 50 is the lightest available color, so we utilize that for your light theme background color. While swatch 900 is the darkest, so vice versa. These two colors form a pair. We then generate design token classes for .bg-surface-50-900-token and bg-surface-900-50-token that automaticallys switch between these in light/dark mode respectively.

pairings

Backgrounds

ClassValuesDescription
bg-[color]-backdrop-token Theme Colors Background styles for modal backdrops.
bg-[color]-hover-token Theme Colors Background styles for hoverable elements.
bg-[color]-active-token Theme Colors Background styles for active selected elements.
bg-[color]-[pairings]-token Theme Colors
See pairing chart above.
Can be 50-900 or 900-50 format.

Border Radius

ClassValuesDescription
rounded-token - Border radius for small elements: buttons, badges, chips, etc.
rounded-[corner]-token tl | tr | bl | br Corner border radius styles for small elements.
rounded-container-token - Border radius for large elements, such as cards and textareas
rounded-[corner]-container-token tl | tr | bl | br Corner border radius styles large small elements.

Borders

ClassValuesDescription
border-token - Implements your theme configured border size.
border-primary-[pairings]-token See pairing chart above. Can be 50-900 or 900-50 format.

SVG Fill Color

ClassValuesDescription
fill-token - The default responsive light/dark mode fill color.
fill-on-[color]-token Theme Colors Provides an accessible foreground color.

Rings

Utilities for creating outline rings with box-shadows.

ClassValuesDescription
ring-outline-token - Creates a subtle transparent outline like Card elements.
ring-[color]-[pairings]-token Theme Colors
See pairing chart above.
Can be 50-900 or 900-50 format.

Text

ClassValuesDescription
font-heading-token - Implements your theme configured heading text size.
font-token - Implements your theme configured base text size.
text-token - Implements your theme configured base text color.
text-on-[color]-token Theme Colors Provides an accessible foreground color.
text-[color]-[pairings]-token Theme Colors
See pairing chart above.
Can be 50-900 or 900-50 format.

Misc

Various styles that do not fit into any of the above categories.

ClassValuesDescription
accent-[color]-token Theme Colors Provides an input accent-color.

Requesting New Tokens

While we've covered common use cases, we do expect the tokens to expand over time. Pull requests are welcome, as well as feature requests on GitHub Issues.