Skeletonic Stylus

Skeletonic Stylus v2.0.0 ships three optional colour palettes, each distributed as its own minified stylesheet so you only pay for what you use.

Palette File Size (min)
Material dist/css/palettes/material/skeletonic-material.min.css ≈17.4 KB
Tachyons dist/css/palettes/tachyons/skeletonic-tachyons.min.css 7.3 KB
Web-safe dist/css/palettes/websafe/skeletonic-websafe.min.css ≈3.5 KB

This page is loading the Tachyons palette so the colour utility classes below render correctly.

Interactive OKLCH Theme Customiser

Tune your brand lightness, chroma, and hue sliders below to generate WCAG AAA conformant OKLCH colour definitions live.

:root {
  --cl-primary: oklch(0.45 0.20 250);
}

Skeletonic core greys

The core stylesheet ships an accessible 11-step grey scale exposed as --cl-grey-100 … --cl-grey-1000.

100
300
500
700
200
400
600
900

Brand colours (v2.0.0 — AA contrast)

In v2.0.0 the primary and secondary tokens were darkened to meet WCAG 4.5:1 contrast against white text out of the box.

--cl-primary
hsl(210 100% 42%)
--cl-secondary
hsl(195 100% 33%)
--cl-tertiary
#757c8a

Note. --cl-tertiary (#757c8a) achieves a 4.71:1 contrast ratio against white — AA-conformant for large text (≥ 18 px bold / ≥ 24 px regular) but not for body text. Pair it with darker backgrounds or use it only for non-essential decorative elements.

Tachyons palette utility classes

When you load skeletonic-tachyons.min.css you get a full set of single-purpose colour classes — same shipped artefact, opt-in module.

<span class="bg-blue white pa2">.bg-blue .white</span>
<span class="bg-light-green dark-green pa2">.bg-light-green .dark-green</span>
<span class="bg-washed-yellow dark-gray pa2">.bg-washed-yellow .dark-gray</span>

The full Tachyons palette spec is documented at tachyons.io/docs/themes/skins; the version shipped here is the one Skeletonic compiles.

Back to components →