Many tools. One path.

The single source for every G8N•AI surface: tokens, React components and the written brand. One dark-first identity in two modes. Red is the path, Ember is the result, and everything else stays quiet.

Explore the gallery Read the guidelines See the tokens

components

src/components

role tokens

tokens.json, over 38 named colors

rules

readme.md

Themes are an attribute

data-theme="dark" or data-theme="light" on any element switches every role token inside it. Dark is the brand’s home; light is for long reading.

Ask for a role, never a hex

Components and pages use surface-0, text-1, accent, lit-text. The named colors exist for illustration and print.

Written G8N•AI, spoken “Generation AI”. One main button per view.

Use it

The package is @g8n-ai/design-system. Load the stylesheet once, set a theme, import components by name. The stylesheet carries every token as a --* custom property and sits in @layer g8n, so your own styles win.

import "@g8n-ai/design-system/styles.css";
import { Button, Card, Eyebrow } from "@g8n-ai/design-system";

export default function Page() {
  return (
    <html lang="en" data-theme="dark">
      <body className="g8n-body">
        <Card>
          <Eyebrow>Signal · Issue 04</Eyebrow>
          <Button>Start building</Button>
        </Card>
      </body>
    </html>
  );
}

Components that hold state are client components; the rest render on the server. Pages that do not use React still use the tokens and the g8n-* classes. Coming from 1.x? The token map lists every old name and its replacement.