Strata is a framework-agnostic design system built on three tiers of tokens — primitive, semantic, component. Link a stylesheet, pick a scheme, and every surface from landing page to checkout re-skins itself.
No build step · vanilla CSS + data-attribute JS · dark, light and aurora schemes · RTL-ready · MIT-licensed.
<!-- one foundation, any stack -->
<link rel="stylesheet"
href="@qazana/strata/site">
<script type="module"
src="@qazana/strata"></script>
<html data-theme="aurora">
<button class="btn btn-primary">
Ship it
</button>Components never hardcode a colour, radius, space or duration. One override file re-skins an entire product.
Semantic names — --primary, --danger, --surface — with RGB channel twins, so alpha tints re-tint with the brand: rgb(var(--primary-rgb) / .12).
Vanilla CSS and data-attribute JS. Link the stylesheets, add one script, ship. The same files power vanilla, React + Tailwind and Ember apps today.
Keyboard-operable components, :focus-visible rings, sensible ARIA, and every animation honours prefers-reduced-motion.
Logical properties throughout plus targeted refinements — <html dir="rtl"> mirrors sidebars, drawers, timelines and form addons.
Compact mode is orthogonal to colour: control sizing flows through density tokens, so dense admin tables combine with any scheme.
A Playwright harness screenshots every demo in every scheme and gates on regressions — dead tokens, contrast flips and silent SVG failures included.
Primitive steps feed semantic roles, semantic roles feed component tokens. Change a layer and everything above it follows — that layering is what "Strata" names.
--text-2xs to --text-6xl with clamped display sizes--fs-h1, --surface-sunken, --on-primary--btn-pad-y, --cell-pad-x drive densitytokens.json for Figma via Tokens Studio/* rebrand every kit at once */
:root{
--primary:#3ddc97;
--primary-rgb:61 220 151;
--on-primary:#03190f;
--accent:#c084fc;
--accent-rgb:192 132 252;
}Override only the tokens that differ. Buttons, charts, focus rings, soft fills — every tint derives from the channel form, so one file restyles seven kits. This page ships its own scheme, Aurora; try them live:
Each kit is scoped, collision-free, and themed identically because they all stand on the same tokens.
In-product UI — buttons, full form coverage, tables, charts, modals, toasts, tabs, an admin shell and error pages.
/siteLanding and marketing — nav, hero, feature grids, spotlights, pricing, testimonials, FAQ, CTA bands. This page is built with it.
/contentBlogs and long-form prose: article typography, callouts, code blocks, author bios.
/authSign-in, sign-up and reset flows with OAuth buttons and split layouts.
/mediaVideo and audio players, embeds, share bars and profile cards.
/commerceThe full funnel — product grid, PDP gallery, variant pickers, cart, checkout steps and order summary.
/emailTransactional and newsletter templates — table layout, inlined CSS, palette baked from the tokens.
We rebranded soniq8's entire app surface by editing one theme file. Charts, focus rings, even the toasts picked up the green.
Strata's tokens map straight into our Tailwind config. React components and the marketing site finally agree on what "primary" means.
Dense finance tables wanted compact mode, not a new design. The density axis gave us that without touching a single component.
No. Link the tokens and a kit stylesheet, add js/qazana.js, and you're done. Behaviours attach via data-* hooks, so they work with any framework's rendered DOM.
Schemes (data-theme="aurora", dark-knight, desert-dunes) flip the whole palette and set color-scheme so native controls match. Product themes are small token-override files layered on top — brand colour, fonts, nothing else.
Yes — override the differing tokens under :root[data-theme="your-id"] and add the id to any data-theme-toggle list. The Aurora scheme on this page is exactly that: one extra CSS file.
Every kit is scoped under a root class (.site, .blog, .media…) and wrapped in @layer qazana, so your own unlayered CSS always wins without specificity battles.
A Playwright render harness screenshots every demo in every scheme and fails on dead tokens, broken contrast flips, page errors and SVGs that silently render none.
One foundation, seven kits, three schemes. Install the package and copy the quick-start below.