design for intention
and meaning

rnbw is a design system for clean, lightweight interfaces, built to be ai-ready from the ground up. semantic class names and a utility-first approach make it fluent for ai design-to-code workflows while staying simple for humans. no weird stuff.

rnbw 🌈 is a design system in one stylesheet. it makes your html designable. when the code changes, the design changes. when the design changes, the code changes. and, that's it! 

<h3>
  <span style="color:#006400">rnbw 🌈 is a design system in one stylesheet.</span>
  <span style="color:#0000cd">it makes your html designable.</span>
  <span style="color:#800080">when the code changes,</span>
  <span style="color:#ee82ee">the design changes.</span>
  <span style="color:#ff4500">when the design changes,</span>
  <span style="color:#ffa500">the code changes.</span>
  <span style="color:#ffd700">and, that's it!</span>
</h3>

we're not in canvas anymore

html, css and js are not just code, or what we see in the browser. they're design tools. designing with them, we're not on a flat canvas, we're crafting within the web's natural structure. and it's a whole different thing!

with rnbw, you design inside the web's own framework: the native elements, the box, the flow. working within its limits is embracing the essence of dynamic layouts, where the web performs best.

Tim Berners-Lee at the first web browser

"The first web browser was also an editor. The idea being that not only could everyone read content on the web, but they could also help create it."

Sir Tim Berners-Lee

simple yet dangerous

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.

a class is a design decision written as code. put a few together and you have a page: no components to learn, no framework between you and the web.

layout

row, column, gap, padding: boxes that line up.

typography

one face, one weight, a scale from text-s to h1.

AaAaAaAa
colors

surfaces, ink and two accents, light and dark.

borders

a line and a corner, from radius-xs to full.

code

code is a thing rnbw knows how to show.

gap-ltext-xl<h1>
motion

fade, slide, zoom, spin and pulse, at three speeds.

the styleguide is a good way to start ↗

one file, who knew?

that's right, rnbw is one stylesheet. link it, and every html element, headings, paragraphs, lists, quotes, forms, code, is styled as it is.

no install, no build step, no framework. one line for the styles, one for the icons. rnbw is built for the #nobuild era.

<link rel="stylesheet" href="https://rnbw.design/rnbw.css">
<script defer src="https://rnbw.design/icons.js"></script>

a heading

a paragraph, with a link and code in it.

  • a list
  • of things
a quote

a design system ai gets

rnbw's classes say what they do: text-xl, gap-l, inverse-primary. an ai reads them as easily as you do, and writes them as easily too.

the designer names it, the developer writes it, ai reads it. one word, the whole circle: describe a thing, and the classes that draw it are the design.

"a dark card, a big title, a quiet line under it."

<div class="inverse-primary radius-m
            padding-l column gap-s">
  <h3>full circle</h3>
  <p class="opacity-m">design and code,
    one material.</p>
</div>

full circle

design and code, one material.

every icon, one sprite

12x12 icons designed for clean, minimal, and info-rich interfaces. by the rainbow team.

one script inlines the sprite, and <svg><use href="#plus"/></svg> draws the icon, in the colour of the words around it.

all 197 icons ↗

design together, the dev way

embrace git and async collaboration. every design decision in rnbw is a commit you can read: what changed, who changed it, and why, in plain words.

a link in a sentence is underlined, a link that is the whole thing is not. that's a design rule, and it's a line of css. reviewing one is reviewing the other.

src/
A link in a sentence is underlined, a link that is the whole thing is not edenvidal • oct 2026
Block code reads at one leading, and a pre is monospace like the code inside it edenvidal • sep 2026
serve under from weareunder.design edenvidal • aug 2026
Make .row a pure horizontal primitive; add opt-in .stack edenvidal • jul 2026
Add text-xl typography size class edenvidal • jun 2026

optimized for openness

rnbw is open source under the mit license. read every line of src/, and build rnbw.css and icons.svg with one node script and no dependencies.

make it yours with tokens and themes: change the base size, the font unit or a colour, and the whole system follows.

source ↗ mit license ↗ 
:root {
    --base-size: 4px;
    --font-primary: "under", "HelveticaNeue-light", "Helvetica Neue Light",
        "Helvetica Neue", Helvetica, "inter", Arial, "Lucida Grande", sans-serif;