One number
--ae-phi: 1.618034;
Every proportion is a power of it.
| Token | Rule |
|---|
| space | --ae-unit · φⁿ (1rem by default), n = −4…4, snapped to whole pixels |
| type | base · φ^(n/2); leading φ for body, φ^¼ for headings, φ^⅛ for display |
| radius | --ae-radius-m · φⁿ (0 by default) |
| blur | 1rem · φⁿ |
| motion | --ae-duration · φⁿ, stagger φ⁻³ |
| shadow | key and ambient offsets on the space scale, each blur two steps above |
| tint | 7% · φⁿ for rest, hover, press |
| layout | .split and .panes at 1 : φ, .golden at φ : 1, container φ⁹ rem, measure 40ch · φ |
Not on the scale, by design: hairlines, the 1.5px stroke, the 2px state edge and focus rings (device pixels), the 24px minimum pointer target and the 11px floor under --ae-text-xs (accessibility floors), breakpoints and container thresholds (media and container queries can't read tokens), viewport caps such as 85dvh, the 999px pill, colour and alpha, letter-spacing and font weights (optical, tuned per size), the 0.96 entrance scale and 1.8 frost saturation (perceptual), and the geometry of glyphs and markers.
Use
<link rel="stylesheet" href="aequitas.css" />
<script type="module" src="aequitas.js"></script>
<button class="btn" data-variant="primary">Publish</button>
<button class="btn" aria-pressed="true">Pin</button>
Variants are data-* attributes and state is ARIA: there is no .btn-primary and no .active. Everything sits in @layer ae.reset, ae.tokens, ae.base, ae.layout, ae.components, ae.utilities, so any unlayered CSS of yours wins without !important.
Components
| Group | Classes |
|---|
| Controls | .btn, .input, .select, .input-group, checkbox, radio, switch, range, .range-pair, .segmented, .tabs, .chip, .combobox |
| Surfaces | .card, .list, .alert, .toast, .menu, .popover, dialog, dialog.drawer, dialog.palette, .navbar |
| Content | .badge, .avatar, .accordion, .table, .stat, progress, meter, .skeleton, .spinner, .empty, .steps, .frame, .stage |
| App | .shell, .sidebar, .page-header, .toolbar, .settings, .master-detail, .calendar, .tree, .thread |
| Chrome | .window, .menubar, .statusbar, .dock, .tabbar, .footer, .resizable |
| Marketing | .hero, .features, .pricing, .testimonial, .logos |
| Layout | .container, .measure, .stack, .cluster, .split, .grid, .golden, .section, .center, .switcher, .cover, .with-aside, .panes, .bento, .masonry, .prose, .snap, .gap-1…8 |
| Utilities | spacing, display, flex, grid, type and colour, with s: breakpoint and container variants |
The docs have a page for each, with live specimens, anatomy and the full API.
Theming
Set these on <html>. Light and dark follow the OS unless data-theme says otherwise.
| Attribute | Values |
|---|
data-theme | light dark |
data-accent | blue indigo purple pink red orange yellow green teal graphite |
data-density | compact spacious |
data-radius | soft round |
data-aurora | present: colour fields behind the page for frost to blur; drift also moves them |
data-type | serif humanist mono |
For any other colour, set --ae-hue and --ae-neutral-hue. Every control that sits in a row takes its height from --ae-control-size (with -s and -l), so buttons, fields and steppers line up. To move the aurora's fields, set --ae-aurora-seed to any number: the same seed always gives the same layout. Components take data-tone="accent|success|warning|danger|info".
Controls answer the pointer with tone, never movement, and persistent states add a 2px accent edge so colour never carries meaning alone. Frost falls back to solid surfaces without backdrop-filter or under prefers-reduced-transparency; prefers-contrast, forced-colors and prefers-reduced-motion are handled throughout.
Behaviours
aequitas.js is optional: about 8 kB minified and gzipped, ESM, typed. It initialises itself; markup added later (an SPA render, a fetched fragment) is enhanced as it lands. Add data-ae-manual to <html> and call init() yourself to start it later, e.g. after hydration.
| Markup | Does |
|---|
[role=tablist] | switches tabs on click and arrow keys |
[data-open="#id"], [data-close] | opens and closes dialogs and popovers |
dialog[data-light-dismiss] | closes on a backdrop click |
[data-dismiss] | removes the nearest alert, toast or chip, or the ancestor its value selects |
[data-toast] | shows a toast with that message |
[data-theme-set="light|dark|auto"] | switches and remembers the theme |
.combobox, dialog.palette | filters as you type, with arrow keys and Enter |
[data-copy] | copies a code block |
[data-toggle][aria-pressed] | flips aria-pressed on click |
.number > button[data-step] | steps the input up or down |
input[type=range][data-output] | keeps the track fill and an output element in sync |
.range-pair | fills between its two ranges and keeps them from crossing |
.tag-input, .otp | turns Enter into chips; advances between code cells and takes pastes |
.input-group > [data-password] | shows or hides a password |
.table with row checkboxes | select-all, aria-selected and a .selection-bar count |
.dropzone | sets data-active while files are dragged over it |
.dropzone[data-page] | shows while files are dragged anywhere over the page |
.toc | marks the link whose section is in view |
import { toast, setTheme } from "./aequitas.js";
toast("Northlight is live.", { title: "Published.", tone: "success" });
Build
pnpm build # dist/
pnpm dev # dist/ on change, docs on :3000
pnpm build:site # static docs in site/.output/public
File in dist/ | Contains |
|---|
aequitas.css | components, layouts and utilities |
aequitas.core.css | the same without utilities |
aequitas.icons.css | the icon set |
aequitas.js, aequitas.d.ts | the behaviours |
tokens.json | every token declared in src/tokens/, with its raw value |
manifest.json | every class, data-* value and token the CSS styles |
llms.txt, llms-full.txt, AGENTS.md, skills/ | the reference, written for coding agents |
aequitas-check.mjs | checks markup against what the CSS actually styles |
fonts/ | Geist, referenced by the stylesheets |
Each stylesheet also ships as .min.css, and the behaviours as aequitas.min.js.
