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.
Skeletonic core greys
The core stylesheet ships an accessible 11-step grey scale exposed as
--cl-grey-100 … --cl-grey-1000.
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.
hsl(210 100% 42%)
hsl(195 100% 33%)
#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.