Qazana Strata

One token foundation. Every product. No framework, no build step.

Why Qazana Strata

A design system isn’t a component library — it’s the contract underneath one: the colours, spacing, type and motion every component references instead of hardcoding. Qazana Strata is that contract, owned in-house and consumed by every Qazana product.

Tokens are the contract

Nothing hardcodes a colour or size — everything references a token. One override re-skins everything. That’s what makes themes, density and per-product brands possible at all.

Two orthogonal axes

Colour scheme (data-theme: Dark Knight / Désert Dunes) and density (data-density: comfortable / compact) are independent and compose freely. Neither is a fork of the CSS.

Vanilla + data-attributes

Behaviours attach via data-* hooks and work in any framework through the rendered DOM. No framework dependency. No build step to consume.

Accessibility in the primitive

One dismissable-layer + roving-focus core powers modal, drawer, menu, combobox, command palette and popover — so every component inherits keyboard and ARIA support.

The 30-second version

<link rel="stylesheet" href="@qazana/strata/tokens" />
<link rel="stylesheet" href="@qazana/strata/app" />
<script type="module" src="@qazana/strata"></script>

<button class="btn btn-primary">Primary</button>
<button data-cmdk-open class="btn btn-secondary">Search… <span class="kbd-hint">⌘K</span></button>

That’s the whole integration: tokens + a kit + the behaviour script. Theme it per product by overriding a handful of brand tokens. See Install to go deeper.