rnbw is a straightforward yet powerful toolkit for your design and development tasks. this guide will take you through everything you need to get started, including easy steps to install, customize, and create themes. let's dive in and explore its capabilities together.
rnbw brings a fresh approach focused on clear, intentional design patterns. built to be ai-ready from the ground up. a fluent bridge between design and code.
<div class="column gap-m padding-l">
<h4>hello world</h4>
<p>clean & intentional design</p>
</div>
the framework uses descriptive class names that clearly communicate their purpose. this makes it naturally fluent for ai design-to-code workflows, while staying intuitive for human developers.
<div class="animate slide-up ease-in duration-normal">
<div class="flex width-full padding-m radius-m">
<p>animated content</p>
</div>
</div>
rnbw's utility-first approach provides flexible building blocks that can be combined to create complex layouts. when needed, inline styles are supported for specific customizations without breaking the system's consistency.
<div class="flex width-full row gap-m padding-l" style="max-width: 600px">
<div class="flex width-50 pulse transition">
<p>flexible layout</p>
</div>
</div>
as both a library and framework, rnbw offers ready-to-use elements with a consistent, customizable structure. a common ground for designers, developers, and ai tools to work together seamlessly.
<nav class="flex width-full justify-between gap-m">
<a class="flex width-50 padding-m radius-m
pulse transition">
menu item
</a>
</nav>
in this example, the <link> tag is placed within the <head> element to load the stylesheet from the specified url. this will apply the styles from the stylesheet to the elements on the page, allowing you to control their appearance and layout.
<!DOCTYPE html>
<html>
<head>
<title>my website</title>
<link rel="stylesheet" href="https://rnbw.design/rnbw.css" />
</head>
<body>
...
</body>
</html>
include the icons script to load the canonical sprite, then reference any glyph by name. browse the full set in the icons gallery.
<script defer src="https://rnbw.design/icons.js"></script>
<svg class="icon-xs" viewBox="0 0 12 12" fill="currentColor">
<use href="#star"/>
</svg>
to create your own theme, copy the following code to a new theme.css file and override it with the following guidelines.
one of the cool things about rnbw is it already has light and dark modes. this means you can easily create designs that suit any user preference. the best part? any changes you make will reflect in both modes. so, you can focus on crafting great designs, knowing they'll shine in both light and dark settings.
:root {
--base-size: 4px;
--font-primary:"HelveticaNeue", "Helvetica
Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
}
[data-theme="theme-name"] {
--color-accent-primary: #8080ff;
--color-accent-secondary: #a640ff;
--color-primary-background: #000000;
--color-secondary-background: #0b0b0b;
--color-primary-foreground: #ffffff;
--color-secondary-foreground: #f3f3f3;
--color-positive: green;
--color-warning: orange;
--color-negative: red;
}
rnbw is built with the theory of relativity in mind - the base size is used as a reference point for other font sizes on the page. the entire layout system is applied relatively across everything and everywhere from one fundamental base size.
by changing this custom property, you're relatively increasing/decreasing the sizing of your entire design system.
--base-size: 4px;
rnbw supports one primary font that is applied across. yet you can easily add a secondary font and use it natively as you wish.
--font-primary:"HelveticaNeue", "Helvetica
Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
start by giving a name to your theme.
rnbw is built with four color groups in mind - brand colors, backgrounds/foregrounds colors, and semantic colors.
[data-theme="light"] {
--color-accent-primary: #0000cd;
--color-accent-secondary: #800080;
--color-primary-background: #ffffff;
--color-secondary-background: #eeeeee;
--color-tertiary-background: #dddddd;
--color-primary-foreground: #111111;
--color-secondary-foreground: #222222;
--color-tertiary-foreground: #333333;
--color-positive: #006400;
--color-warning: #d97706;
--color-negative: #ff4500;
}
rnbw uses elements and class names as simple yet effective building blocks. it's about getting more done with less. it provides the essentials, helping designers and developers to create diverse designs from minimal components.
rnbw's typography system is built around rem units. this means that all font sizes are relative to the root element. it allows for consistency in design, making it look good on all devices. also, using rem units can enhance accessibility, as it respects user preferences for default font sizes.
the following example shows how typography is used in a relative way
h1 {
font-size: 5.28rem; /* 6rem * 0.88 */
line-height: 0.95;
}
write something
write something
write something
rnbw uses semantic colour naming. this means colours are named for their purpose, not their look. so, "error" or "error-red" could be names for colours used in messages.
this makes the stylesheet easier to understand and maintain, and reduces confusion in design.
use 'view' when you want to fill the viewport, giving you control over the visible area.
use '.sticky' to keep elements in view while scrolling, enhancing user navigation.
use '.hidden' to remove elements from the display, managing content visibility without removing them from the document flow.
use '.hidden-on-mobile' to hide certain elements on mobile view, tailoring user experience per device type.
use 'header' for top-level navigation and branding, offering an intuitive user interface.
use 'nav' for main navigation links, directing users across the site.
use 'footer' for secondary information like copyright notices, enhancing site credibility.
use flex-1 when you want to stack items in a specific way, offering flexibility in arranging your content.
use 'hr' to separate sections or elements visually, improving content readability.
.row stays horizontal on every screen. add .stack to make a container turn vertical below 768px — it also releases direct-child .width-25/.width-50/.width-75 back to auto.
| header 1 | header 2 | header 3 |
|---|---|---|
| data 1 | data 2 | data 3 |
| data 4 | data 5 | data 6 |
| data 7 | data 8 | data 9 |
directional variants: .margin-top-*, .margin-right-*, .margin-bottom-*, .margin-left-* — same for .padding-*
rnbw's animation system provides simple, semantic animation classes. the base .animate class sets default timing, while modifiers let you customize duration, easing, and animation types like fade, slide, or spin.
use .infinite for looping animations. transitions and transforms are also available for hover effects.