Colors

Skeleton provides guardrails and utilities to help you craft your custom color system. This includes a number of colors, shades, and contrast values that work together seamlessly. Providing a visually appealing and accessible palette for each theme.

Color Palette

Supports all 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

Test the following with different themes and dark mode combinations.

---
import { SwatchBookIcon } from 'lucide-react';
---

<section class="space-y-8">
	<div class="grid grid-cols-3 gap-6">
		<!-- Standard Colors -->
		<div class="flex flex-col space-y-2">
			<p class="text-xs">Direct Use</p>
			<div class="badge justify-start bg-primary-500 text-primary-contrast-500">
				<SwatchBookIcon className="size-4" />
				<span>Primary</span>
			</div>
			<div class="badge justify-start bg-secondary-500 text-secondary-contrast-500">
				<SwatchBookIcon className="size-4" />
				<span>Secondary</span>
			</div>
			<div class="badge justify-start bg-tertiary-500 text-tertiary-contrast-500">
				<SwatchBookIcon className="size-4" />
				<span>Tertiary</span>
			</div>
		</div>
		<!-- Presets -->
		<div class="flex flex-col space-y-2">
			<p class="text-xs">Presets</p>
			<div class="badge justify-start preset-filled-primary-950-50">
				<SwatchBookIcon className="size-4" />
				<span>Primary</span>
			</div>
			<div class="badge justify-start preset-filled-secondary-950-50">
				<SwatchBookIcon className="size-4" />
				<span>Secondary</span>
			</div>
			<div class="badge justify-start preset-filled-tertiary-950-50">
				<SwatchBookIcon className="size-4" />
				<span>Tertiary</span>
			</div>
		</div>
		<!-- Preset + Pairings -->
		<div class="flex flex-col space-y-2">
			<p class="text-xs">Preset + Pairings</p>
			<div class="badge justify-start preset-filled-primary-50-950">
				<SwatchBookIcon className="size-4" />
				<span>Primary</span>
			</div>
			<div class="badge justify-start preset-filled-secondary-50-950">
				<SwatchBookIcon className="size-4" />
				<span>Secondary</span>
			</div>
			<div class="badge justify-start preset-filled-tertiary-50-950">
				<SwatchBookIcon className="size-4" />
				<span>Tertiary</span>
			</div>
		</div>
	</div>
</section>

Contrast color values are available for every shade in the color ramp. Use these to set accessible text color and icon fill values. You may also refer to the Preset system for utility classes that automatically mix each color and contrast tone.

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

Color Pairings

Provides a condensed syntax for dual-tone color values, evenly balanced to swap between light and dark mode. Pairings are supported for all Tailwind utility color classes (bg, border, fill, etc).

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

<div class="bg-surface-200-800">...</div>
<div class="border border-secondary-400-600">...</div>
<svg class="fill-secondary-50-950">...</svg>

How Pairings Work

Color Pairing are enabled through the use of the CSS light-dark function. This means instead of writing the standard light/dark syntax with Tailwind utilities:

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

You can instead use a much more condensed syntax:

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

This will then be implemented into your CSS bundle as follows:

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

Plus, as a benefit to using the CSS light-dark() function, this also enables use of Tailwind’s Color Scheme utilities. Learn more about using Color Scheme .

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 invert the order when switching from light to dark mode.

• 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.

Brand Color

A variable accent color for your design system. Use this as the default when styling elements and components.

TIP: The Nouveau theme makes use of variable brand color for light and dark modes.

---
import { SwatchBookIcon } from 'lucide-react';
---

<div class="w-full grid grid-cols-[1fr_auto_auto_auto] items-stretch gap-4">
	<div class="card p-4 text-center bg-brand-light dark:bg-brand-dark text-brand-contrast-light dark:text-brand-contrast-dark">
		<div class="flex justify-center items-center gap-2">
			<SwatchBookIcon className="size-4" />
			<span>Brand Color</span>
		</div>
	</div>
	<span class="vr"></span>
	<div class="card p-4 text-center bg-brand-light text-brand-contrast-light">Light</div>
	<div class="card p-4 text-center bg-brand-dark text-brand-contrast-dark">Dark</div>
</div>

Benefits

• Brand can use any colors from your palette (ex: primary/secondary/tertiary)
• Brand supports the use of custom colors.
• Brand can use any shade from 50-950; not just limited to shade 500.
• Brand color/shade can be tailored for light and dark mode independently.
• Brand includes a contrast color for foreground elements.
• Brand supports all standard presets, ex: preset-filled-brand.

Transparency

All available 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>

Core API

For more information on theme properties, please refer to the Core API documentation.