Get started

One package, one stylesheet, and every token is yours to override

The design system ships as @robr0/design-system — the same package this site is built with. There is no configuration API or theme provider: theming is plain CSS custom properties. Import the token stylesheet, use the components, and re-theme by redefining tokens. Try it live in the playground — it generates the exact CSS you would paste into your app.

Install

React 19+ is a peer dependency. Everything else — component CSS, both themes, the Material Symbols icon font — is bundled.

bash
npm install @robr0/design-system
app.tsxtsx
// Load the tokens once — primitives, semantic tokens, and both themes.
import '@robr0/design-system/tokens/tokens.css';

// Then import components — from the barrel…
import { Button, Card, Badge } from '@robr0/design-system';

// …or by deep path (what this site does):
import { Button } from '@robr0/design-system/components/Button/Button';
tsx
// Charts live behind their own entry so the recharts peer
// dependency stays optional — install recharts only if you use them.
import { BarChart, LineChart } from '@robr0/design-system/charts';

Dark mode

Every semantic token has a light and a dark value. Set data-theme="dark" on the root element to switch — there are no prefers-color-scheme queries in components, so your app decides when.

html
<!-- Light is the default; flip the whole system with one attribute -->
<html data-theme="dark">

Bring your own font

The system is designed for Nunito Sans but deliberately does not bundle it — load it (or any font) however your stack prefers and point one token at it. This site loads Nunito Sans with next/font and does exactly this override in its global CSS.

css
/* The entire 14-step type scale chains to one token.
   Load any font (Google Fonts, next/font, self-hosted), then: */
:root {
  --font-family-primary: 'Inter', sans-serif;
}

Re-theme with primitives

Tokens are three tiers: primitives hold the raw values, semantic tokens reference primitives, components use semantic tokens. That chain is build-enforced, which is what makes a primitive override cascade through the entire system — both themes included.

css
/* Every semantic token references a primitive, so overriding a
   primitive re-themes everything built on it — in both themes. */
:root {
  /* Your brand colour becomes the action colour (buttons, focus rings) */
  --primitive-teal-07: #7C3AED;
  /* Its pressed/hover ramp neighbours */
  --primitive-teal-08: #6D31D3;
  --primitive-teal-09: #4C2293;

  /* Pill buttons become rounded rectangles */
  --primitive-radius-full: 12px;
}

Semantic tokens are fair game too when you want to change one meaning without touching the ramp it comes from:

css
/* Prefer surgical changes? Override a semantic token directly —
   scope the dark value under the theme attribute. */
:root {
  --color-status-info-border: #345AC4;
}
[data-theme="dark"] {
  --color-status-info-border: #7F99E3;
}

See it live

The playground applies these overrides to this site in real time — pick a brand colour, tint the neutrals, reshape the radii, swap the font, then copy the generated CSS.