build with rnbw.css. read https://rnbw.design/llms.txt first, then write plain html with its classes.
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.
a class is one decision. combined, they multiply their meaning.
197 icons, 12x12, in one sprite.
one face, one weight, a scale from text-s to h1.
fade, slide, zoom, spin and pulse, at three 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 source under the mit license. every design decision in it is a commit you can read: what changed, who changed it, and why, in plain words.
build rnbw.css and icons.svg from src/ with one node script and no dependencies, and make it yours with tokens and themes: change the base size, the font unit or a colour, and the whole system follows.
mit license. read every line of src/, and change any of it.
html, and the css that styles it. one node script builds rnbw.css, icons.svg and llms.txt from src/.
--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.