The Architecture of Things — From Nature to Virtual

The Fibonacci-shaped taxonomy every Chiralkit module lives in — and the axes that give it a hand.

The six levels

Each level composes from the previous. The count at each level follows the Fibonacci sequence: 1, 1, 2, 3, 5, 8.

  1. Tokens

    Fibonacci count — 1

    The atomic vocabulary — color, spacing, radius, typography — that every higher level composes from.

  2. Primitives

    Fibonacci count — 1

    Single-purpose UI elements built directly from tokens: buttons, badges, inputs, labels. The smallest recognizable unit of the system.

  3. Patterns

    Fibonacci count — 2

    Compositions of primitives that solve a recurring interaction: dialogs, forms, dropdowns, tabs. Structural, not contextual.

  4. Enantiomers

    Fibonacci count — 3

    Specializations of a pattern that keep the original's structural identity, mirrored for context — a ProductCard and a HomeHeroCard as chiral variants of a base Card. The concept this project is named after.

    In chemistry, an enantiomer is one of a pair of molecules that share every atom and every bond but cannot be superimposed on each other — like a left and a right hand. In Chiralkit, an enantiomer is the same idea applied to design: two components that inherit the structural DNA of a shared pattern, mirrored for two different contexts. This is what separates Chiralkit from a component catalog. Level 3 is where the pair itself becomes the unit of packaging — two components (or two state slices) shipped together with a transition contract, not two artifacts that happen to look alike.

  5. Features

    Fibonacci count — 5

    End-to-end user flows built from patterns and enantiomers: sign-in, checkout, profile editing. Where the design system meets product goals.

  6. Pages

    Fibonacci count — 8

    Full compositions assembled from features and shared chrome. The surface a user actually sees; the top of the spiral.

The relations

Every level is built from the one below it. Primitives read tokens. Patterns compose primitives. Enantiomers specialize patterns. Features assemble enantiomers into flows. Pages compose features. This is not a taxonomy of categories — it is a build order.

The count at each level — 1, 1, 2, 3, 5, 8 — is Fibonacci. This is not decorative. A design system that scales like nature (branching, growth, packing) is one where every level has more variety than the last and the growth rate stays bounded. Linear growth (1, 2, 3, 4, 5, 6) understates the combinatorial reality; exponential growth (1, 2, 4, 8, 16) overpromises. Fibonacci is what natural systems actually look like.

The chiral axis is not localized at level 3 — it runs through all six levels. Every level has its own enantiomeric pair: tokens have atoms (local vs. shared), primitives have hooks (committed vs. draft), patterns have state patterns (read vs. write), features have server vs. client halves, pages have authoritative vs. ephemeral state. What makes level 3 distinct is not that it is the home of chirality — it is that its cardinality of delivery is two: the ring where you ship a packaged pair (editor+viewer, draft+committed) with a transition contract wired between the halves. Chirality is the property; level 3 is the packaging axis.

Every ring has two enantiomeric faces: a visual face (the design system as it ships today) and a state face (the shape of reactive state that pairs with it). The two faces share the same dependency graph and the same Fibonacci magnitude of change — no discount for working only one side. The state face is specified prescriptively as ChiralkitState; a future ChiralkitStore covers the persistence spiral that couples to the state face at its outer rings.