The design language for the working day.
A quiet, precise, vanilla CSS + JS system. Warm paper and hairlines, Red Hat Mono figures, an 8px grid, and one signature gesture — the wing-wipe. No framework. Drop in two files and build.
Install
Two filesOne stylesheet for the language and component vocabulary, one script for behaviour. Both are vanilla — no build step, no dependencies. Static markup needs only the stylesheet.
<!-- Theme (FOUC prevention) -->
<script>try{var t=localStorage.getItem("across-theme")||"system";if(t==="light"||t==="dark")document.documentElement.setAttribute("data-theme",t);}catch(x){}</script>
<!-- Across UI v2 — pin a version for cache-safety (same scheme as pkg.acrossacross.com) -->
<link rel="stylesheet" href="https://ui.acrossacross.com/v2.0.7/styles.css">
<!-- Behaviour (theme, combobox, toasts, modal…) -->
<script src="https://ui.acrossacross.com/v2.0.7/primitives.js" defer></script>
<!-- Or use /latest/ to track the newest release, /v2/ for the latest v2.x. -->
<!-- Icons -->
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/[email protected]/src/light/style.css">Design Tokens
FoundationEverything sits on warm paper with hairline rules — no cool-gray, no shadows on chrome. Three product colors plus a chrome teal; one accent per surface.
Typography
FoundationPlus Jakarta Sans for everything human; Red Hat Mono, tabular, for every number, rate, and timestamp.
The Wing-Wipe
SignatureThe one flourish — a sheared 2px accent edge sweeps in from the leading edge on hover, active, and press, then retreats. Interaction only, never idle. Hover any surface below.
What's Inside
The system is the source of truth for every Across app — the language, the components, and the prompts that let AI agents build in it.