badge
ui-componentSmall chip for labeling type, state, or category.
Chiralkit / UI Kit
ChiralUI Specs
Explore the contracts that assemble ChiralUI: shared tokens, primitives, patterns, enantiomers, features, and compositions.
Ring 0
Tokens
Shared visual values consumed by every UI module. Inspect the CSS custom properties and their current values directly from @chiralkit/tokens.
Inspect a token layer
Select an atom layer
Raw, context-free values such as the color palette, spacing scale, and type scale. They define which values are available, not what role they play.
Meaningful roles such as surface, text, and brand map the raw values to interface intent. Themes can remap these roles while leaving the primitive palette intact.
Component and state values describe how controls respond to default, hover, focus, active, and disabled states, inheriting their base meaning from semantic tokens.
A carbon atom, the unit every later ring is built from. Its six protons are engraved 0: the primitive token layer. Its six neutrons are engraved 1: the semantic layer. Its six electrons are also engraved 1: the interaction layer. The two 1s are told apart by shape and by the tray below the atom, where references run primitive → semantic → interaction. A theme reassigns semantic roles only; primitive values stay the same.
Browse all generated token declarations
Colors and focus
| CSS custom property | Source value |
|---|---|
--ds-color-primary | var(--ds-semantic-color-brand) |
--ds-color-primary-hover | var(--ds-semantic-color-brand-hover) |
--ds-color-secondary | var(--ds-semantic-color-secondary) |
--ds-color-secondary-hover | var(--ds-semantic-color-secondary-hover) |
--ds-color-text-on-primary | var(--ds-semantic-color-text-on-primary) |
--ds-color-text-on-secondary | var(--ds-semantic-color-text-on-secondary) |
--ds-color-focus | var(--ds-interactive-button-focus) |
Spacing
| CSS custom property | Source value |
|---|---|
--ds-spacing-xs | var(--ds-primitive-spacing-xs) |
--ds-spacing-sm | var(--ds-primitive-spacing-sm) |
--ds-spacing-md | var(--ds-primitive-spacing-md) |
--ds-spacing-lg | var(--ds-primitive-spacing-lg) |
--ds-spacing-xl | var(--ds-primitive-spacing-xl) |
Radius
| CSS custom property | Source value |
|---|---|
--ds-radius-sm | var(--ds-primitive-radius-sm) |
--ds-radius-md | var(--ds-primitive-radius-md) |
Typography
| CSS custom property | Source value |
|---|---|
--ds-font-family | var(--ds-primitive-font-family) |
--ds-font-size-md | var(--ds-primitive-font-size-md) |
Ring 1a
Primitives
Independent UI building blocks defined by component contracts: props, events, slots, states, and accessibility behavior.
Inspect figure anatomy
Select a figure part
The central carbon inherited from Ring 0. It bonds the amino and carboxyl groups and carries the residue’s two hydrogens.
Nitrogen and its attached hydrogens form glycine’s amino end. In a chain, this end joins the previous residue through a peptide bond.
The carbonyl carbon and two oxygens form glycine’s carboxyl end. Linking it to the next amino group releases water and creates a peptide bond.
A glycine molecule: a carbon atom like the one in ring 0, bonded with nitrogen, oxygen and hydrogen atoms into one amino acid.
button
ui-componentBase design system button — primary/secondary variants with a disabled state.
card
ui-componentBordered, rounded surface for grouping content — no props, single default slot, no ARIA role. Consumers compose their own heading structure inside.
checkbox
ui-componentNative <input type="checkbox"> wrapped as a design-system custom element — checked/indeterminate props forward to the DOM, dsChange emits the new boolean state. Keeps the browser's default checkbox rendering to preserve AT and forced-color-mode behavior.
code-block
ui-componentCode block with a language label and a built-in copy button.
dialog
ui-componentNative <dialog> element wrapped as a design-system custom element — showModal() delivers the modal state machine (focus trap, Escape to close, inert background, return-focus) via the browser platform, not scratch-built ARIA. Props: open, label|labelledBy, describedBy. Events: dsOpen, dsClose.
input
ui-componentNative <input> wrapped as a design-system custom element — supports text/email/password/search/tel/url/number types, invalid+describedBy for error states, and emits dsInput with the current value on every keystroke.
loader
ui-componentIndeterminate loading indicator built from the chiralkit logo path — two mirrored halves oscillate around the ring center.
select
ui-componentNative <select> wrapped as a design-system custom element — options passed as a prop, emits dsChange with the new value.
textarea
ui-componentNative <textarea> wrapped as a design-system custom element — multi-line text field with rows prop, invalid+describedBy for error states, and dsInput event fired on every keystroke.
Ring 1b
Patterns
Reusable interaction patterns assembled from primitives, with explicit state, event, and accessibility contracts.
Inspect figure anatomy
Select a figure part
Each residue is one glycine unit. Repeating the same unit turns Ring 1a’s molecule into a longer polypeptide backbone.
These links connect one residue’s carboxyl carbon to the next residue’s nitrogen. Each link forms as water is released.
A polypeptide chain: five glycine molecules from ring 1a joined end to end by peptide bonds, each bond giving off one water molecule.
tabs
ui-componentWAI-ARIA Tabs pattern (scratch build) — tablist only, with roving tabindex, arrow-key navigation, Home/End, and automatic activation. The consumer renders their own tabpanels in light DOM and toggles visibility on dsChange. shadow:false so tab ids are addressable from tabpanels via aria-labelledby.
tooltip
ui-componentWAI-ARIA Tooltip pattern (scratch build) — wraps the consumer's first Element child as the trigger, opens on hover (with openDelay) and focus (immediate), dismisses on Escape while keeping the trigger focused, and closes on blur or genuine mouseleave. shadow:false so aria-describedby on the trigger can reference the tooltip's id.
Ring 2
Enantiomers
UI pairs share a structure and a named mirrored axis, with opposed functions on the same substrate within one system. Variants or visual similarity alone do not establish a pair.
Inspect figure anatomy
Select a figure part
The L form used by living proteins. Its arrangement around the alpha carbon gives it a handed shape.
The plane reflects one arrangement into the other. Rotation cannot superimpose the two structures, which makes them enantiomers.
The reflected form of L-alanine. It has the same atoms and bonds, arranged with the opposite handedness.
Two alanine molecules, each the ring 1a glycine with one hydrogen replaced by a methyl group. Which hydrogen is replaced decides the hand: L and D are mirror images across the plane between them, and no rotation lays one exactly over the other.
figure-canvas
ui-componentReusable figure viewport with zoom, inspection controls and optional horizontal drag rotation.
Ring 3
Features
Feature-level capabilities combine lower-ring contracts into a coherent capability for the user.
Inspect figure anatomy
Select a figure part
The membrane c-ring turns with the central γ stalk. Proton flow through F₀ drives this rotation and couples it to the catalytic head.
The α₃β₃ head stays still around the rotating stalk. Its β subunits use that relative motion to catalyze ATP formation.
The membrane anchors the F₀ rotor and separates the proton gradient that supplies energy for rotation.
ATP synthase, a molecular motor built only from L-hand protein chains (ring 2). A ring of subunits turns in the membrane, driving a central stalk inside a head that a side stalk holds still.
No UI feature modules are registered yet. This ring describes the feature layer; it does not list unregistered examples.
Ring 5
Compositions
Page and application compositions assemble lower-ring contracts. Layout contracts define regions, required regions, variants, and token use.
Inspect figure anatomy
Select a figure part
The nucleus stores the cell’s genetic material inside a membrane-bound compartment, shown here as a porous body.
The mitochondrion contains folded inner membrane and the ATP synthases from Ring 3, coupling a proton gradient to ATP production.
The flexible lipid boundary encloses the cell and separates its interior from the surrounding environment.
The fluid interior around the organelles contains free molecules and chains built from the earlier molecular rings.
A cell in cut-away, built from everything below it: a nucleus, free protein chains and amino acids from rings 1a to 2, and a mitochondrion whose inner membrane holds the ring 3 motors.
app-shell
ui-layoutFramework-neutral application geometry with optional primary and secondary rails around a required main region.
headerprimarymainsecondaryfooterStage 1 / 6