Semantic tokens plus vanilla, data-attribute components. Theme the tokens once per brand and the marketing site, the app shell and the checkout all follow — in React, Ember or plain HTML.
v0.0.1 · 7 kits · no build step · zero dependencies
Every component is bound by the same contract: tokens are the single source of truth, behaviors are framework-free, and accessibility is not optional.
No component hardcodes a color, radius, space or duration. Override --primary once and every fill, ring and border re-tints.
Canonical dark plus the warm Désert Dunes light scheme. Borders flow through a channel variable, so both flip cleanly.
JS attaches to rendered DOM via data-* hooks — combobox, drawer, OTP, theme toggle — and works under React, Ember or nothing at all.
Keyboard-operable components with sensible ARIA, and every animation respects prefers-reduced-motion.
Logical properties throughout, plus a density axis for data-heavy screens. Flip the direction; nothing breaks.
The display face is reserved for big headings and brand; body text stays on the body face; data and code stay mono.
Brand colors are semantic — --primary, --danger, --accent — never literal. Alpha tints use the channel form, so a single per-app override re-tints everything, including soft fills and focus rings.
rgb(var(--primary-rgb) / .12)tokens.json mirror for design tools/* any stack, no build step */ @import "@qazana/strata/tokens"; @import "@qazana/strata/site"; <!-- behaviors attach to the DOM --> <script src="qazana.js" defer></script>
Strata is stylesheets and one script. There is no runtime to adopt and no compiler to appease — the components are the rendered markup itself.
Each kit is scoped and independently importable, sharing the same token foundation. Every tile below is a live demo.
We override five tokens and the whole library reads as ours. The domain UI we built on top never fights the foundation.
The tokens map straight into Tailwind config. Our React components use Strata variables and stay in sync with everyone else for free.
Ember imports the CSS and references the variables. When Strata ships a new kit, our app picks it up with a version bump — no rewrite.
Yes — Strata is plain CSS plus data-attribute JS that binds to the rendered DOM. It is consumed today by vanilla, React + Tailwind and Ember apps, with no adapters.
Every component references semantic tokens. A product ships one override file that re-points --primary, --accent and friends; alpha tints are channel-based so they re-tint automatically.
Both schemes ship in the tokens. Switch by attribute or follow the OS — components never know which scheme is active.
In the product. Strata holds only generic primitives; anything that encodes business vocabulary stays in the consuming app, themed by the same tokens.
Start from the demos, theme the tokens, and ship a cohesive frontend without re-deciding a single radius.