A framework-agnostic core
Contracts, tokens, and headless renderers with zero framework dependencies.
- ↳oklch token system
- ↳typed component contracts
- ↳headless renderers
havn systems · interface system
Tangarer.
A headless core and Svelte 5 adapter for the calm, precise interface language across Havn.
One set of tokens, contracts, and headless renderers, so every Havn surface feels like the same product.
package
@havn-earth/tangarer-corehavn / tangarer connected
Tangarer is the interface system underneath Havn. The core is framework-agnostic: oklch design tokens, typed contracts, and headless renderers that own behaviour and structure without owning a framework.
A thin Svelte 5 adapter turns those renderers into native components. Surfaces compose the adapter; the look, motion, and accessibility come from one place.
See it in the architectureA system of surfaces needs one interface language.
When each app re-implements its own buttons, menus, and colour decisions, the product fragments quietly. Nothing is broken, but nothing quite matches, and every fix has to be made several times.
Tangarer keeps the decisions in one library. Change a token or a renderer once, publish, and every surface that composes it moves together.
Small boundary.
Large surface area.
Tokens as the source
oklch colour, spacing, motion, and type are defined once and themeable.
Headless by default
Renderers own behaviour and a11y; the framework layer stays thin.
Versioned and shared
Published packages mean surfaces upgrade deliberately, not by copy-paste.
A calm Svelte adapter
Native Svelte 5 components that stay close to the renderer they wrap.
- ↳tg-* components
- ↳schema-driven controls
- ↳sandbox chrome
Behaviour that carries
Accessibility, motion, and interaction live in the system, not in each app.
- ↳keyboard + ARIA baked in
- ↳reduced-motion aware
- ↳safe-triangle menus
How the layer
moves.
Every surface in Havn has a job in the loop. This one keeps its responsibility clear, then hands the work to the layer that comes next.
Define
Set the token, contract, or renderer in the core.
Adapt
Expose it as a native component in the Svelte layer.
Publish
Ship a versioned package to the surfaces that consume it.
Compose
Every surface builds from the same language.
Nothing here
stands alone.
Tangarer is useful because it has a precise relationship with the other layers. Follow the handoffs and the product gets easier to understand.
knowing canvas↗
Board
Composes the Tangarer adapter for its chrome, panels, and controls.
strategy & product truth↗
havn-kaa
Supplies the words; Tangarer supplies the consistent way they are shown.
compute foundation↗
Kernel
A sibling foundation — Kernel for compute primitives, Tangarer for interface primitives.
Make every Havn surface feel like one product.
Tangarer is the interface system beneath Havn: tokens, headless renderers, and a thin adapter that keeps the whole system coherent.