# largen

> A property algebra for CSS. Plain CSS, with no build step, no preprocessor and no plugin.

largen is a property algebra rather than a component catalog. The library
supplies 14 slots, four axes and one universal paint rule; each project
authors its own components on top of them. There is no build step.

## Start here

- [The whole contract, inline](https://largen.dev/llms-compact.txt): everything below in one file, sized for a prompt.
- [MCP server](https://largen.dev/docs/authoring): `claude mcp add largen --transport http https://largen.dev/api/mcp`

## Documentation

- [The contract](https://largen.dev/docs/contract): slots, layers, and the rules for authoring a component.
- [The axes](https://largen.dev/docs/contract#the-axes): tone, variant, size and state.
- [Authoring](https://largen.dev/docs/authoring): writing a component, and how it fails.
- [Composing](https://largen.dev/llms-compact.txt): space, elevation, and what a slot cannot express. `get_contract` section "composition".
- [Components](https://largen.dev/docs/contract#reference-components): the optional reference set, to copy or ignore.

## The one rule to know

Unlayered CSS beats every layer. That is what makes overriding largen work
without `!important`. It is also exactly what breaks an unlayered *component*:
it outranks `largen.modifiers`, so `data-variant` silently stops applying while
tone and size keep working. If a variant "isn't applying", check this before
anything else.

## Stylesheet

- Current: https://cdn.jsdelivr.net/npm/largen@latest/dist/largen.css
- Pinned:  https://cdn.jsdelivr.net/npm/largen@0.6.3/dist/largen.css (immutable)