REN Data · Design system

The REN Data design system

Tokens, components and patterns for rendata.nl, the data-visualisation style guide and the colour picker. Factual and to the point, but personal: data work is people work.

Tokens
Colour, type, spacing, shape and motion as CSS custom properties, read straight from the token files.
Components
19 React components with live examples, JSX you can copy and the full props for each.
Patterns
Components combined the way the sites use them: section heads with project grids, filtered lists, key figures, style-guide rules.
Dashboards
Canvas, grid, status colours and the parts of a dashboard page, as a stylesheet for the web and a theme for Power BI.
Pages
Click-through recreations of rendata.nl, the style guide with colour picker, and an example dashboard.

Use it

Load the stylesheet, React and the compiled bundle, then take components from the namespace.

<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="_ds_bundle.js"></script>

const { Button, ProjectCard, SectionHead } = window.RENDataDesignSystem_372f57;

function Work() {
  return (
    <section>
      <SectionHead title="Work" moreLabel="All work projects" moreHref="/work/" />
      <ProjectCard title="IATI quality checker" year="2025" summary="Runs the quality checks IATI's own validator doesn't make." />
      <Button href="/about/">Get in touch</Button>
    </section>
  );
}

Dark mode: set data-theme="dark" on <html>. Every semantic token switches with it.

Foundations

Colour

Primary Teal is the brand. Coral is the single accent and means "look here". Everything else is neutral.

Type

Newsreader for the voice, IBM Plex Sans for reading and UI, IBM Plex Mono for metadata.

Corners

3px is the maximum anywhere. Buttons, filter tabs and tag keys are square. Only the avatar is round.

Borders

1px hairlines, no drop shadows. Cards only for discrete objects; lists are ruled lines.

Motion

0.15s colour and border transitions. The 404 tide is the only animation.

Voice

First person singular, sentence case, British spelling. Titles carry the message.