Theme Styles

Theme Colors

Here's a quick reference for what each theme color represents.

Primary [x]-primary-[50-900] Typically your primary brand color.
Accent [x]-accent-[50-900] A secondary offset color or supplementary value.
Tertiary [x]-tertiary-[50-900] A third and additional offset color. Great for informational alerts.
Warning [x]-warning-[50-900] May be used for warnings, alerts, and invalid inputs.
Surface [x]-surface-[50-900] May be used for backgrounds, card elements, and some typography.

Skeleton themes extend Tailwind's color palette and can be used anywhere within your project. Here's a few examples:

<!-- Inlined classes -->
<div class="bg-primary-500 text-accent-500">Skeleton</div>
<!-- Tailwind opacity scale -->
<div class="border border-primary-500/50">Skeleton</div>
/* Using Tailwind @apply */
.example { @apply text-primary-500; }
/* Using CSS custom properties. Note that colors are RGB values! */
body { background: rgba(var(--color-surface-900) / 1); }

Design Tokens

Preset utility classes based on your theme CSS property settings.

Design Tokens