Vanilla · Accessible · Atomic

The design system the browser already knows.

RenDS is a vanilla, accessible, atomic design system. No React, no build step, no framework lock-in — just HTML, CSS custom properties, and a sprinkle of Web Components where native elements aren't enough.

Get started Browse components

54 components 200+ design tokens WCAG 2.1 AA baseline 0 framework dependencies

Why RenDS

Three pillars, no exceptions.

Every decision in the system ladders up to one of these three. If a feature can't live inside them, it doesn't ship.

Vanilla first

Pure HTML, CSS, and JS. Use <dialog>, <details>, and the Popover API before reaching for JavaScript. Web Components are for encapsulation, not for rendering.

Accessible by default

WCAG 2.1 AA minimum, AAA where it doesn't fight users. Every component ships with keyboard support, focus management, ARIA, and respects prefers-reduced-motion. Not an afterthought.

Atomic architecture

Tokens → Primitives → Composites → Patterns. Build upward, never skip a layer. A Button uses tokens. A Dialog uses buttons. A Form uses dialogs and fields.

What's inside

Four layers. No exceptions.

The system isn't a bag of components — it's a strict atomic stack. Each layer builds on the one below it.

Layer 0

Tokens

Color, spacing, type, radius, motion, shadow. Three tiers: primitive, semantic, component.

200+ values

Layer 1

Primitives

Single-purpose components with optional JavaScript enhancements. Button, Card, Field, Badge, Tag, Banner, and 13 more.

19 components

Layer 2

Composites

JS-enhanced behavior on top of primitives. Dialog, Tabs, Popover, Combobox, Calendar, and more.

26 components

Layer 3

Patterns

Multi-component recipes. Nav, Sidebar, Data Table, Form Validation, Empty State.

8 patterns

Try it

Drop in markup. Get a real component.

No imports. No registration. Add the stylesheet and the class — the browser does the rest. Web Components light up automatically when present.

Live Beta design-system accessibility

Project name

<!-- Just HTML. No React. -->
<button class="ren-btn ren-btn-primary">
  Save changes
</button>

<span class="ren-badge ren-badge-success">
  Live
</span>

<label class="ren-field">
  <span class="ren-field-label">Project name</span>
  <input class="ren-input">
</label>

Templates

Real screens, ready to copy.

Five full-page templates assembled from RenDS components. View source, copy markup, swap copy, ship.

Marketing

Make it yours in three sliders.

Pick a base color, a font, a radius, a density. Export as CSS, JSON, or a ZIP. Share by URL. No account, no upload — the configuration lives entirely in the link.

Open the builder Read about theming