Start
Install
One stylesheet, linked. The icons and the behaviours are separate files you add only if you use them.
Get the files.
The build writes everything to dist/. Copy the files you need, and keep fonts/ next to the stylesheets: they load Geist from ./fonts/.
git clone https://github.com/sovrin/aequitas.git
cd aequitas
pnpm install
pnpm build # writes dist/aequitas.min.css | Components, layouts and utilities. |
aequitas.core.min.css | The same without utilities. |
aequitas.icons.min.css | The icon set, as masks in currentColor. |
aequitas.min.js | The behaviours, about 8 kB gzipped. ESM, typed by aequitas.d.ts. |
fonts/ | Geist and Geist Mono, referenced by the stylesheets. |
tokens.json, manifest.json | Every token with its raw value; every class, data-* value and token the CSS styles. |
Link it.
Then write semantic HTML, add a component class and pick variants with data-* attributes. State is ARIA: there is no .active.
<link rel="stylesheet" href="aequitas.min.css" />
<link rel="stylesheet" href="aequitas.icons.min.css" /> <!-- optional -->
<script type="module" src="aequitas.min.js"></script> <!-- optional -->Theme it.
Presets are attributes on <html> or any subtree. Light and dark follow the system unless data-theme says otherwise. For any other colour, set the two hues; everything else derives from them.
<html data-theme="dark" data-accent="teal" data-density="compact" data-radius="soft">:root {
--ae-hue: 160; /* the accent */
--ae-neutral-hue: 200; /* the greys lean toward it */
} Everything sits in @layer ae.*, so your own unlayered CSS wins without !important. See every preset.
Check it.
aequitas-check reads your markup against what the CSS actually styles: unknown classes (with the aequitas name for Bootstrap and Tailwind habits), data-* values it doesn't style, misplaced attributes, unknown tokens and unnamed icons.
node dist/aequitas-check.mjs index.html src/**/*.html Coding agents get the same reference: llms.txt, llms-full.txt, AGENTS.md and a skill in skills/, all in dist/.