Design Tokens

Skeleton themes are paired with a powerful design token system to create utility classes based on theme settings. These cover common styles for backgrounds, border radius, fonts, and more. In fact, most components use these tokens as the default settings, which means components auto-adapt to your theme style with minimal configuration out of the box.

Tokens are avialable to use anywhere in your project. Here's a few examples:

<!-- Apply your theme's border radius value -->
<div class="w-10 h-10 bg-primary-500 rounded-token">Rounded</div>

<!-- Apply your theme's heading font -->
<span class="font-heading-token">Font Family</span>

<!-- Set the text color, which auto adjusts for light/dark modes -->
<span class="text-token">Skeleton</span>