Colors

This section provides a quick reference of each available theme color and their intended uses.


ColorIDExample
[style]-primary-[50-900] Typically your primary brand color.
[style]-secondary-[50-900] A secondary branding color for supplementary value.
[style]-tertiary-[50-900] A third and additional branding color.
[style]-success-[50-900] Used for successful or positive actions, such as a form submit alert.
[style]-warning-[50-900] Used for negative or harmful actions, such as errors.
[style]-error-[50-900] May be used for errors, alerts, and invalid inputs.
[style]-surface-[50-900] The base level colors, used for backgrounds.

Usage

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

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