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|neutral".
This is the beginning of the README. Read the rest at the original. Read the full README ↗
