A hand-written CSS design system built on native cascade layers, oklch() colour and light-dark() dark mode. Long-text safe from the first line. Nothing to install, nothing to compile, nothing to run.
The whole install:
<link rel="stylesheet" href="node_modules/@arag/css/src/index.css">Live specimen, not a screenshot
Settled today
+4.2% from yesterday
| Account | Amount |
|---|---|
| New transaction | 4,250,000₮ |
| Kiosk float | 1,200,000₮ |
Shipping in five surfaces
Every number here is asserted in CI. If the package and the documentation ever disagree, the build fails.
Every design system eventually grows a build step, a config file and a class scanner. This one refuses all three, and gives up nothing to do it.
What the preprocessors were for, the platform now does. @layer, custom properties, nesting, color-mix(), oklch() and light-dark() all ship in Chrome, Edge, Firefox and Safari today. The package is plain CSS because plain CSS became enough.
Six layers, declared once
The order is reset, tokens, base, components, utilities, overrides. Your application CSS is unlayered, which places it above all six, so plain authoring wins by default, with no specificity trick and no escalation. There is not one priority-raising declaration in the package, and that is greppable.
Five ramps of eleven steps, each one hue plus a shared lightness ladder plus its own chroma ladder. Change --hue-brand and all eleven steps regenerate. Hover and active shades derive from their base with color-mix(): no hand-written state colours exist.
light-dark() resolves against the used color-scheme, so the manual override is a plain [data-theme] attribute that works on any subtree. The hero at the top of this page is a dark region on a page in your own theme. Same tokens, nothing overridden.
A translated string routinely runs 15–25% longer than its English source. Nothing in the package assumes a single line or a fixed width, and no translated string is ever truncated, clamped or held to one line. An ellipsis eats the end of the string, which in many languages is the suffix that carries the grammatical meaning. The one carve-out is a run of digits, which is not translated and is misread if it breaks.
Read the constraint →Bare BEM class names, so your CSS wins a collision. Variants and sizes are data-attributes, so two variants can never apply at once. Native state stays native. Every component exposes a namespaced custom property API, so a variant re-points four values instead of restating a block.
Browse all twenty-six →A static file, written by hand. No generator, no arbitrary-value syntax, no scanner and no config. If a class cannot be named, it is not needed, which is why there is no fixed-width utility and no truncation utility, and never will be.
See the whole list →Every control here is real markup styled by the same src/index.css this page links. None of it needs JavaScript to render, and none of it needs any to keep working.
button · 7 variants, 3 sizes
badge · 5 variants, 2 emphases
alert · 4 variants
Payment updated
Payment details were updated successfully.
progress · native <progress>
collapse · native <details>, no script
Open it, close it, reload with scripting disabled. It behaves the same, because the disclosure is the browser's and not ours.
table · numeric columns align on the attribute
| Account | Amount |
|---|---|
| New order | 1,250,000 |
| Kiosk float | 84,500 |
| Transaction fee | 1,200 |
Both themes, long labels
Those two panels are one page in one theme. Each is a subtree with its own color-scheme, and every token underneath re-resolves.
Create a new order
Create a new order
The constraint
A translated string routinely runs 15–25% longer than its English source, and in many languages the suffix that carries the grammatical meaning sits at the end of the word. That is why no translated string in this package is truncated, clamped or forbidden to wrap: the ellipsis would eat the grammar. The sole exception is a numeral run, in money and in numeric table cells: digits are not translated, and 1,250,000 broken across two lines is read as two numbers.
Highest priority first. Unlayered CSS beats every layer, regardless of specificity, so the thing you write in your own app is the thing that applies.
your app CSS unlayered: beats all six, by ruleoverrides reserved, empty in the packageutilities 161 static classescomponents 26 files, one per componentbase element defaultstokens 313 custom propertiesreset token-free by designChrome and Edge 123+, Firefox 120+, Safari 17.5+ (the maximum, per engine, of every feature the package uses). The binding constraint is light-dark().