One Li8
An open-source design system I created, named One Light. Its visual rules, naming grammar, materials and reasoning travel with every component, from Figma to React, Core and Tokens.
One Li8 is an open-source design system I created. I own every design decision, working with AI across implementation and verification. It is built so the reasoning ships with the components, not in a wiki someone forgets to read.
A design system easily splits into separate realities: a Figma library, token files, application code and documentation that gradually stop agreeing. One Li8 makes shared design decisions part of the deliverable.
From the public repository and npm, September 2026.
It began as a pen sketch: a 1, an 8, and the 8 redrawn as a damru, two triangles meeting at a single point. Read together, One Li8 is One Light.
The system is inspired by the teachings of Guruji Shrii Arnav and the 9×12 Way. Six principles guide every decision, and they ship inside each package as PRINCIPLES.md.
Token names follow a grammar borrowed from Sanskrit rather than a CSS convention. Two rules explain every name in the system.
--ol8namespacecolorcategoryactionprimaryone role, one worddefaultstateSanskrit joins words into a compound when they name a single idea. actionprimary is one role, not action plus primary; writing action-primary would suggest two things where there is one.
actionprimarycutedgeinnerwidthIn the Gem control token, hover is a state applied to start, so it keeps its hyphen. That is why disabledcontent is joined and hover-start is not.
--ol8-material-control-gem--primary-hover-startHyphens separate levels of the hierarchy, never words inside a level. No abbreviations, no truncation.
Every Figma variable carries an explicit code name, recorded verbatim in figma-code-syntax.txt. The build reads that record instead of re-deriving names from the grammar, because guessing is how design and code drift apart.
Composition, ownership and measurement each get their own law, so a change has exactly one place to happen.
Each tier may only reference the one above it, and the build refuses a component token that reaches straight for a primitive. npm run check enforces the rest: margins belong to parents, atoms compose nothing, and every pixel token sits on the 3px grid.
Gem Morphism is One Li8’s own material for transparent, glass-like surfaces, the way Liquid Glass is Apple’s. It was inspired by a gem slab resting on a surface in an open landscape, and it is a transparent material skin, not a separate component anatomy, guided by four qualities: Cut (bezel and edge), Color (semantic tint), Clarity (legibility) and Carat (appropriate visual presence). Facets are rare accents, not decoration.
In One Li8, Gem is a material skin, not a second component. Regular and Gem share structure, measurements and behavior; only the surface changes. Everything that follows is rendered from real One Li8 components.
to bottom right under a specular top rim.Decision: Gem is an adapter on the component, never a fork of it.
θ = 90° + atan(W / H)Figma bakes a gradient angle into every Gem instance: 153.16° at 83×42, 151.66° at 89×48, 149.29° at 101×60. All three fit this formula, which is exactly what CSS’s to bottom right computes, so the Gem body holds at any label width where a fixed degree would not.
Gem is approved for Primary and Secondary buttons only, so renderButton throws for Gem on Quiet or Destructive. An Icon Button without an accessible name throws too. The design constraint is an error, not a review comment.
Nine compositions informed by real products on Mobbin, translated through One Li8. References guide behavior and information density, never visual identity.
Theme and primary color are independent attributes that compose: data-ol8-color-scheme for light or dark, data-ol8-primary for blue, orange or green. Dark remaps 86 semantic roles. Because roles are emitted as references, repointing a ramp repaints everything that reads it.
WCAG and WAI-ARIA live inside One Li8’s knowledge graph, ai-context.json, as invariants every component carries. People and AI collaborators read the same rules, and code that breaks them fails instead of shipping.
renderIconButton throws without an accessible name, and hydration reports any unnamed button already on the page. A loading button keeps its label in the DOM and carries aria-busy, so its name never changes mid-action.
aria-labelaria-busyAn Icon Button is two boxes: a transparent protected target and the visible surface inside it. At Compact the surface is 36px while the target stays 48px. Merging the two would shrink the target to 36px, so the split is the component.
target 48pxbox 36pxButtons draw their focus ring inside the edge, so an overflow parent cannot clip it and the control keeps its measured size. Icon Buttons draw a two-tone ring from the two focus tokens. An outline-based focus style is forbidden by the system’s rules.
:focus-visible--ol8-color-focus-outerA Choice Group is a real fieldset and legend with radios that share a name, so arrow keys, single selection and form submission come from the browser. Adding a radiogroup role is forbidden, because it would override semantics that already work.
fieldset + legendaria-describedbyOptions are never focusable. The active option is a virtual cursor carried by aria-activedescendant, so caret, composition, dictation and undo keep working in the native input. Escape closes the list and restores the committed value.
aria-activedescendantaria-labelledbyA Choice Chip is a real checkbox, so selection is carried by native checked state and a stronger edge. In a Multi-select Field, tokens are not tab stops: arrow keys walk them, and removal takes two presses so a stray Backspace cannot drop a value.
input:checkedTab → arrowsContrast is measured, not assumed. Where Figma’s own bindings failed WCAG 1.4.11, the code fixed them at the source, and the measurements are below.
Every component comes from a component set in Figma, and React and Core are checked against each other on every build, so the two cannot answer differently about a role, a name or a state.
npm install @oneli8/react
import { MultiSelectField } from '@oneli8/react';
import '@oneli8/react/styles.css';
<MultiSelectField
label="Skills"
options={skills}
values={chosen}
placeholder="Add skill…"
onRemoveValue={remove}
/>Built for AI collaborators as well as people: AGENTS.md, llms.txt, ai-context.json and three skills for UI composition, icons and Figma-to-code travel with the repository.