Neumo Design System

Documentation

Everything for building with the Neumo design system — start with onboarding, get your access set up, then explore the component explorers, AI tooling, and live demos. Follow the steps top to bottom, or jump to whatever you need.

Start here

New to the system? Begin from zero.

Onboarding

A from-zero walkthrough (Mac) for designers and engineers: install the tools, get Claude Code running in the terminal, and connect the design system to your AI assistant. No prior experience assumed.

Open onboarding guide →

Set up access

One-time setup before you build.

Get an npm token

The @kofile/* packages are private. Everyone — designers, product, engineers — needs a one-time npm access token to install them.

Get set up →

Connect Figma to code

Set up the live Figma↔code link used in the demos — the Neumo Toolkit + figma-console-mcp bridge (official Figma MCP as a read-only alternative).

Open setup guide →

Explore components

The living component explorers.

React Storybook

Components, props, and usage examples for the @kofile/gds-react bundle — the primary explorer for React apps.

Open React docs →

Web Components

Framework-agnostic custom elements from @kofile/gds-wc — use them in Vue, Angular, Svelte, or plain HTML.

Open Web Component docs →

AI tooling

Feed the system to your AI assistant.

MCP Server

Give AI assistants the real component API, tokens, and audit tools — setup guide and tool reference for @kofile/neumo-mcp-server.

Open MCP docs →

Figma Toolkit

The design-side bridge — install @kofile/neumo-toolkit to give Claude a live connection into Figma.

Open Toolkit docs →

See it in action

The whole workflow, end to end.

Demos

The same interface rebuilt in React, .NET, and Vue — each with a step-by-step AI build write-up showing the MCP server, Figma toolkit, and design tokens in use. See a live React build.

Open Demos →