An early experiment in setting foundations.

What if a CSS scaffold was minimally designed to guide and lint agents, avoiding class soup and declaration drift? largen is that experiment: 14 slots, four axes, one universal paint rule, and the components are yours to write. Plain CSS, with no build step.

The contract Authoring and MCP Playground

A scaffold, not a component library

largen ships almost nothing to adopt. It is a scaffold: a universal paint rule, @property slots that stop values cascading where they should not, and @layer rules that make overrides work without !important or other dark magic. On top of that sit semantic attributes such as data-tone="danger", data-variant="outline" and data-size="sm", very few utilities, and a linter you can reach over MCP. An agent working inside the scaffold produces uniform styling, with or without a component library, and the linter catches it when it drifts.

Treat this repo as agent memory for how to do design systems in this style. You should probably not vendor it. Read it, take the ideas, and point your agent at the linter.

A complete component

@layer largen.components {
  .notification, notification {
    --bg: var(--tone-soft);
    --fg: var(--tone-ink);
    --border-width: 0 0 0 3px;
    --border-color: var(--tone);
    --border-style: solid;
    --radius: var(--radius-md);
    --pad: .75em 1em;
    --gap: .75em;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}

<notification data-tone="warning">Two accounts need review.</notification>
<div class="notification" data-tone="warning">…same thing…</div>

That is a complete component: seven tones, four variants, five sizes, every state and both themes, none of which it mentions.

Slots, the mechanism

Plain CSS decides a colour and applies it in the same rule, so every change after that needs another rule that knows the component. With seven tones, four variants and five sizes, that is 140 combinations per component before hover and dark mode. A slot splits deciding from applying.

.chip { --bg: var(--tone); }                     /* the component fills a blank */
* { background-color: var(--bg, revert-layer); } /* one shared rule applies it  */
[data-variant="outline"] { --bg: transparent; }  /* an axis changes the answer  */

The outline rule knows nothing about chips, so it works on every component, including ones not written yet. The cost of the system drops from axes times components to axes plus components.

Four features make it hold

@property registers each slot as non-inheriting, so a slot stops at its element. A card's background stays on the card.

revert-layer is the fallback when a slot is unset, so an empty blank leaves the element as the browser drew it.

@layer keeps every largen rule in a named layer, so your page CSS always beats largen without !important.

color-mix() derives the soft, ink and line shades from the one tone in scope, so dark mode needs no per-component rules.

Every tier is paired with a check

A component that sets a colour literal, reaches past the tone axis, sets an unregistered slot or forgets its layer fails largen verify and check_component_css, and a spec that names an unapproved component fails validate_spec. With one legal way to colour a thing, anything hand-set is easy for a machine to spot.

The same premise shapes the MCP server: it cannot know your components, so every tool takes an optional manifest of them and answers in your vocabulary rather than largen's.

Start here

The contract {{slots}} slots, the axes, the layout utilities and the reference components. What the scaffold guarantees. Authoring {{rules}} rules, the {{modes}} ways a component fails, and the MCP server that checks your work. Migrating A runbook for moving a site off Tailwind, daisyUI, CVA and a component registry. Playground Render a spec. Share it in a URL with no server involved.

Use it

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/largen@latest/dist/largen.css">

# or pinned. A published version is immutable:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/largen@0.6.3/dist/largen.css">

# or install it:
npm install largen

For agents: /llms-compact.txt carries the whole contract inline, about 6,100 tokens.

Evidence, not a showcase

Two pages that run in your browser and report what they find. Neither is a gallery. They exist because the claims below them are the ones no static check can settle.

Conformance The mechanism everything hangs on, revert-layer against a guaranteed-invalid slot, and the @property fallback that preserves it in Firefox 113–127 and Safari 16.2–16.3. {{conformance}} checks. Open it in Safari, Firefox and Chrome; nothing static can answer this. The load-bearing tests UA defaults survive the universal paint rule, tone inherits, slots do not leak to children, and modifiers outrank components.

Releases

0.6.3: Five defects in the DTCG token layer, found by running 0.6.1 against a real consumer theme rather than against largen's own files. The headline: a theme whose dark half referenced extras its light half defined could not be imported at all — three errors, nothing written. Four of the five were invisible to the shipped tests because every fixture was shaped like largen. No CSS change — the build id stays 0073498a.

Every entry in the log is checked against the bytes that version actually shipped. The full log · npm