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 rings
Each ring is built from the two before it. The rings follow Fib(0..5): 0, 1, 1, 2, 3, 5. The two 1s are distinct rings, a unit and the union that relates it to what comes next, so every ring is named by its id (0, 1a, 1b, 2, 3, 5) and not by its Fibonacci value.
Tokens
The atomic vocabulary (color, spacing, radius, typography) that every ring above composes from. The point the spiral starts from.
Primitives
Single-purpose UI elements built directly from tokens: buttons, badges, inputs, labels. The unit: the smallest recognizable piece of the system.
Patterns
Compositions of primitives that solve a recurring interaction: dialogs, forms, dropdowns, tabs. The union: they relate the unit to everything built above it. Structural, not contextual.
Enantiomers
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. Ring 2 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.
Features
End-to-end user flows built from patterns and enantiomers: sign-in, checkout, profile editing. Where the design system meets product goals.
Compositions
Layouts and pages: the geometry that lays features out on a surface, and the full compositions a user actually sees. The top of the spiral.
The relations
Every ring is built from the ones below it. Primitives read tokens. Patterns compose primitives. Enantiomers specialize patterns. Features assemble enantiomers into flows. Compositions lay features out as layouts and pages. This is not a taxonomy of categories. It is a build order.
The rings, 0, 1, 1, 2, 3, 5, are Fibonacci: each one adds up the two before it. This is not decorative, and it is a shape, not a quota of modules. A design system that scales like nature (branching, growth, packing) is one where every ring has more variety than the last and the growth rate stays bounded. Linear growth (1, 2, 3, 4, 5, 6) understates how compositions multiply; exponential growth (1, 2, 4, 8, 16) overpromises. Fibonacci is what natural systems actually look like.
The chiral axis is not confined to ring 2. It runs through all six rings, and every ring 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, compositions have authoritative vs. ephemeral state. What makes ring 2 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; ring 2 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.