GENER8V Design System

Interfaces you can rely on, audit and ship.

Open-source tokens, React components and page templates for products in regulated, governed and auditable environments.

Browse Components Get Started

npm i @gener8v/ui @gener8v/tokens @gener8v/icons

Model release 4.2 — review Awaiting sign-off

48 / 50

Evaluations passed

2

Open findings

3 of 4

Approvers

ControlOwnerStatus
Bias and fairness suiteModel riskPassed
Prompt-injection suiteSecurity2 findings
Data lineage evidenceData governanceEvidenced

Two findings have no owner

Assign them before release; they stay on the audit record either way.

Rendered live with the system's own classes — nothing on this panel is a picture.

  • 20components rendered from one set of class names — copy the HTML, or import the React.

  • 7templates to start a screen from: an application shell, a landing page, a deck and worked flows.

  • AAcontrast on every text pair, measured in light and in dark. CI fails the build if one slips.

  • 4packages, one version, public on npm under MIT. No token, no account.

Built to be relied on.

Every rule is checked rather than assumed — so a product built on it inherits the checks, not just the look.

Accessible by default

Every text pair is measured for contrast in light and dark, and the components run under axe — both gate CI, so a regression fails the build rather than reaching a user.

One token source

Colour, type, space and motion are defined once and emitted as CSS variables, TypeScript, a Tailwind preset and DTCG for design tools.

Built for AI-assisted delivery

A Claude Code plugin teaches the rules and the class names, and a which-component-for-which-job guide says what to reach for — and what not to.

Three steps to the first screen.

Install, import one stylesheet, and teach Claude Code the rules. Then start from a template rather than a blank file.

  1. Install

    Public on npm under MIT. No token, no account.

    npm i @gener8v/ui @gener8v/tokens @gener8v/icons

  2. Import

    One stylesheet first, then the components.

    import '@gener8v/ui/styles.css';
import { Button, Table, Dialog } from '@gener8v/ui';

  3. Add the Claude Code plugin

    It teaches Claude the rules, the class names, the templates and which component fits which job.

    /plugin marketplace add gener8v/gener8v.designer.design-system

The Full Guide

Packages

Source, issues and releases on GitHub. Open source under the MIT licence.

Everything, in plain markup.

Every page shows the real markup — view the source and copy it. The React components in @gener8v/ui render the same class names.

Foundations 6

Color Six roles, two working ramps, and status held to five steps — generated in OKLCH Typography Inter at 500 for headings over Inter for body, with IBM Plex Mono as the technical voice Spacing & elevation A 4px spacing scale, 6px radius, and three soft elevation steps tuned for a light ground Icons Every icon in @gener8v/icons by group, inline SVG on currentColor, sized in em so they track the type Imagery Figures sit on the ground with a hairline and a radius; atmosphere comes from dot grid and grain Product language The grammatical form each surface takes, and the check that holds it

Components 20

Advanced inputs Combobox, select menu, slider, file drop and calendar — native controls wherever one exists Agent work Tool chips and confirm cards — what an agent did, and the change it wants a person to answer Buttons Six variants, five sizes, icon and loading states — solid primary on a near-white ground Cards & tags Hairline surfaces with a mono kicker; tags carry status, never decoration Charts Bar, stacked, line and sparkline — palette validated for colour-blind separation, table view always available Command, tree & code Command palette, hierarchy tree and code block — all keyboard-first Coverage graph Layers read left to right — requirements by capability, milestones in sequence, where the sequence ends — with a line for everything covered Data display Stats, meters, description lists and avatars — tabular figures throughout Document library Browsing MD, PDF, XLSX and CSV — list, grid and preview panes Feedback Dialog, alerts, toast, tooltip and callout — one tone vocabulary shared with states Flow controls Stepper, progress, timeline, pagination and skeletons — the parts a flow is built from Forms Native controls on the shared control-height scale, so fields and buttons line up Integrations & keys Connections, masked credentials, API key scopes and event rules Knowledge graph Canvas-rendered, Barnes-Hut layout — 1,000 nodes at 0.8ms per tick; radius is sqrt(degree) Live activity Pulse, lanes, a row's progress and a section being written — work happening now, drawn where the work is Menu & disclosure Dropdown menu, accordion and segmented control — open state carried by aria-expanded Navigation Header, sidebar, tabs, breadcrumbs and the hamburger — active state keys off aria-current Reading and review Contents with review marks, citations and their source card, a drawer that steps through sources, and keys States The six states every flow passes through — most systems ship only the first Table Hairline rules, mono headers, tabular figures — sort state carried by aria-sort

Templates 7 · open full screen

Application shell Header, rail, breadcrumbs, stat row and a data panel — the layout every client app starts from Landing page Hero, the one saturated stat band, feature cards and a close — the marketing voice Presentation deck Eight 16:9 slides sized in container units, so one deck reads the same in a grid or projected Engagement intake The flow shell as a working four-step journey, with the vertical rail and a persistent footer Purchase a product Four-step buy flow — basket with quantity steppers, delivery radio cards, sticky order summary Create a work item Describe, label and attach — token input, segmented type, combobox owner, evidence drop Close a work item Acceptance checklist, resolution outcome, evidence, activity thread and an irreversible confirm

Guidance which component for which job

Screens Which component for a whole page, a shell, or the structure a page sits in Overlays Which component for something that floats above the page — a modal, a side panel, a hint, a preview Status and feedback Which component for telling someone what happened, what state a thing is in, or that it is loading Navigation Which component for moving between places, switching views, or narrowing what a list shows Data Which component for figures, tables, charts, lists of records, or history Input Which component for an action someone presses or a value someone enters or picks Reading Which component for a document, prose, code, sources or type someone reads Agents and live work Which component for a conversation with an agent, or work that is running right now

Built by GENER8V. Used on our own work.

The team behind this system builds and runs systems for international, heavily regulated businesses — the team you rely on to deliver when it counts.

Visit gener8v.com Source on GitHub