rnbw.css ↗
style it with https://rnbw.design/rnbw.css and https://rnbw.design/icons.js. semantic html first, its classes for the rest, no inline styles.
you
your agent
plain html
on it. one stylesheet, its classes, and plain html:
<main class="column gap-l padding-xl"> <h1>full circle</h1> <p class="text-xl">design and code, one material.</p> </main>
simple enough for anyone, complex enough for anything, and open enough to use anyhow. rnbw is focusing on atomic concepts. when combined, they multiply their meaning.
rnbw's classes say what they do: text-xl, gap-l, inverse-primary. the designer names it, the developer writes it, ai reads it. describe a thing, and the classes that draw it are the design.
one class, one decision.
195 icons, 12x12, in one sprite.
one face, thin by default, a scale from text-xs to h1.
fade, slide, zoom, spin and pulse, at four speeds.
headings, lists, quotes, forms and code are styled before you add a class.
xs, s, m, l, xl: every gap, padding, size and radius steps together.
rnbw is open all the way down: its source, its history and the reasons behind every choice are there to read, and yours to change.
nothing stands between you and it: no framework, no package to install, no build step to use it. link one stylesheet and write html.
mit license. read every line of src/, and change any of it.
html, and the css that styles it. one node script, with nothing to install, builds rnbw.css from src/ and icons.svg from icons/.
--base-size: 4px; --font-unit: 1.25rem;
change the base size, the font unit or a colour, and the whole system follows.
every design decision is a commit you can read: what changed, who, and why, in plain words.