Seventeen primitives. Each class opens its rendered specimen and the canonical markup — what you see is what you ship.
| CLASS | ROLE | SINCE |
|---|---|---|
| .ae-screen / .ae-bar / .ae-stage | viewport shell: chrome bars, centered stage | 2.0 |
| .ae-wide | screen modifier: the 68rem measure for catalog shapes | 2.3 |
| .ae-stage-scroll | inner scroll for long documents — this very page | 2.0 |
| .ae-view | one screenful, quiet entrance on remount | 2.0 |
| .ae-nav + .ae-nav-ind | view switcher, sliding ink underline | 2.1 |
| .ae-row-link | whole-row links; the cursor never strobes | 2.1 |
| .ae-chrome / .ae-foot | the 13px chrome register; hairline footer | 2.1 |
| .ae-icon | Lucide at 1.5px stroke, riding with text | 2.1 |
| .ae-mode | sun/moon rotate-crossfade toggle | 2.1 |
| .ae-panel | soft depth for dense content, radius 0 | 2.1 |
| .ae-name / .ae-lede | the name, never large; the argument, plainly | 1.0 |
| .ae-group / .ae-h | a section and its muted heading | 1.0 |
| .ae-item / .ae-dim | medium ink / muted ink | 1.0 |
| .ae-accent | THE accent: one per view | 1.0 |
| .ae-label / .ae-input | fields as lines, not boxes | 1.0 |
| .ae-button / .ae-button-quiet | solid ink primary, hairline secondary | 2.2 |
| .ae-send | label resolves to “Sent ✓”, exactly once | 2.2 |
.AE-SCREEN / .AE-BAR / .AE-STAGE
One viewport, never scrolling: a bar, a centered stage, a bar. Add
.ae-wide to the screen for the 68rem catalog measure.
<div class="ae-screen">
<header class="ae-bar">
<a class="ae-name" href="/">NAME</a>
<nav class="ae-nav">…</nav>
<button class="ae-mode">…</button>
</header>
<main class="ae-stage">
<div class="ae-view">…one screenful…</div>
</main>
<footer class="ae-bar">…</footer>
</div>.AE-STAGE-SCROLL
For genuinely long documents: the document scrolls inside the stage, the chrome stays put, the page itself never scrolls.
Legal pages, changelogs, long-form prose — the screen law holds, the inner column moves. This box scrolls; the bars around this page do not. The chrome register keeps utility text at 13px while content stays at the one size. Scroll on: nothing above or below this column will move, which is the entire point.
<main class="ae-stage ae-stage-scroll">
<article>…the long document…</article>
</main>.AE-NAV + .AE-NAV-IND + .AE-VIEW
Quiet words with a sliding ink underline. Views remount on swap and replay their entrance.
<nav class="ae-nav">
<button aria-current="page">work</button>
<button>writing</button>
<button>contact</button>
<span class="ae-nav-ind"></span>
</nav>
// the site positions the indicator
// (left/width) on view change.AE-ROW-LINK
In lists, the whole row is the link — the cursor never strobes across dead bands between rows.
<a class="ae-row-link" href="…">
<span class="ae-item">A project that matters</span>
<span class="ae-dim">— and its description</span>
</a>.AE-CHROME / .AE-FOOT
The one sanctioned second size: 13px, muted ink, for footers, utility links, and metadata.
.AE-ICON / .AE-MODE
Lucide, inlined as SVG symbols: 1.5px stroke, round caps, sized to ride with text. The mode toggle rotate-crossfades sun and moon.
Icons ride with text , and the toggle is live:
<button class="ae-mode" aria-label="toggle color mode">
<svg class="ae-icon ae-sun">…sun…</svg>
<svg class="ae-icon ae-moon">…moon…</svg>
</button>
// toggle .dark/.light on the root;
// pin style.colorScheme to match.AE-PANEL
Soft depth for genuinely dense content: light shadow in light mode, wash in dark, radius 0. Forms on a stage stay naked.
Dense content lives here
and earns its quiet lift off the surface.
<div class="ae-panel">
…dense content…
</div>THE REGISTERS
Hierarchy is ink and weight, never scale. Faint ink is decoration only — placeholders and resting underlines.
THE NAME
The lede: the page's whole argument, plainly.
An item that matters
supporting matter, muted
The one accent per view.
<p class="ae-name">THE NAME</p>
<p class="ae-lede">The argument, plainly.</p>
<p class="ae-item">An item that matters</p>
<p class="ae-dim">supporting matter</p>
<span class="ae-accent">one accent</span>.AE-LABEL / .AE-INPUT
A line, not a box. Placeholders are decorative supplements to always-visible labels.
<label class="ae-label" for="name">Name</label>
<input class="ae-input" id="name" type="text">
<textarea class="ae-input"></textarea>.AE-BUTTON / .AE-SEND
Contained ink shapes with a small press — links navigate, buttons act. The send moment resolves exactly once; success persists and the control disables.
<button class="ae-button ae-send">
<span class="ae-send-label">Send message</span>
<span class="ae-send-done" aria-hidden="true">
Sent <svg class="ae-icon">…check…</svg>
</span>
</button>
// on success: add .is-sent, set disabled