Skip to content
DESIGN SYSTEMS

Nucleus: a CSS system with no runtime

697 documented classes, zero runtime JavaScript, and a machine-readable manifest so coding assistants use it accurately.

The problem with most design systems

Most CSS frameworks solve layout and leave everything else to convention: which class means what, which states exist, which combinations are valid. That convention lives in a person's head, not in the system, so it drifts the moment a second person (or an AI coding assistant) starts writing markup against it.

Nucleus takes the opposite approach: every valid class, component, state, and token is described in a manifest. There is no invented class, because a validator can check against the manifest and catch one that doesn't exist.

Zero runtime, on purpose

697 classes, 76 tokens, 60 components, and 0KB of runtime JavaScript. Nucleus ships as a single stylesheet (npm, a CDN, or modular imports) with no configuration file and nothing that has to hydrate.

That constraint forces every interactive state (focus, hover, disabled, checked) to be solvable in CSS alone, which turns out to also be the more accessible default: a focus ring that doesn't depend on JavaScript having loaded.

Built to be read by a coding assistant, not just a developer

Nucleus publishes llms.txt and llms-full.txt alongside the human documentation, plus a JSON manifest with roles, aliases, and structured queries. A coding assistant can be pointed at the manifest instead of guessing class names from training data, and a CLI validator checks a project's markup against it before anything ships.

This came directly out of using AI tools daily to build LeadScrapper Pro and Itiner: a framework that only documents itself for humans is already behind, because a meaningful share of the markup being written today isn't typed by a human first.