Chiralkit

Chiralkit / UI Kit

One visual system. Every stack.

Tokens, primitives, and patterns expressed once, then implemented for React, Web Components, and server-rendered templates.

View registry View specs

The six levels of the UI Kit

Each level composes from the one below — the ChiralKit taxonomy applied to what the UI Kit actually ships. Cardinality at each ring follows Fibonacci: 1, 1, 2, 3, 5, 8.

See the cross-domain framing in Chiral Architecture

  1. Tokens

    Fibonacci count — 1

    The shared vocabulary — color, spacing, radius, typography — declared once in @chiralkit/tokens and consumed by every stack as CSS custom properties.

  2. Primitives

    Fibonacci count — 1

    Single-purpose custom elements built directly from tokens: ds-button, ds-badge, ds-code-block. React and template usage both reach the same tag.

  3. Patterns

    Fibonacci count — 2

    Compositions of primitives that solve recurring interactions — dialogs, forms, tabs — with the same prop and event contract across stacks.

  4. Enantiomers

    Fibonacci count — 3

    Paired specializations of a pattern that share structural DNA and mirror per context. Two cards, two form modes, shipped together with the transition contract between them.

  5. Features

    Fibonacci count — 5

    End-to-end user flows — sign-in, checkout, settings — assembled from patterns and enantiomers, portable across React and server templates.

  6. Pages

    Fibonacci count — 8

    Full compositions of features and shared chrome. The surface a user actually sees; the top of the UI Kit's spiral.