@assure-one/design-system

Assure One Design System

The single source of truth for visual design across all Assure products.

• Tokens — semantic CSS variables (color, type, spacing, motion) consumed by every product.
• Primitives — accessible React components built on Radix + Tailwind 4.
• Composites — common patterns (DataTable, PageHeader, Sidebar, Kanban).

Documentation

• CHANGELOG.md — release-by-release log of what shipped.
• CONTRIBUTING.md — dev loop, release flow, versioning, pitfalls.
• CLAUDE.md — invariants and conventions for AI assistants working in this repo.
• claude-skills/ — drop-in Claude Code skill for consuming projects.

Install

pnpm add @assure-one/design-system

Import tokens once in your root layout:

import "@assure-one/design-system/styles.css";

Then use components:

import { Button } from "@assure-one/design-system";

export default function Page() {
  return <Button variant="primary">Click me</Button>;
}

Develop

pnpm install
pnpm storybook    # http://localhost:6006
pnpm build        # bundle for publishing
pnpm typecheck
pnpm lint

See CONTRIBUTING.md for the full dev loop, including iterating against a real consuming app.

Architecture

3-tier token system (W3C Design Tokens spec compatible):

reference   →   system (semantic)   →   component
color.navy.700  →  color.action.primary.bg  →  button.primary.bg

Components consume system tokens, never reference values directly. Themes (light, dark, per-product accent) re-map system → reference without touching component code.

Releases

Tag-driven publish to public npm. See CONTRIBUTING.md for the full flow; past releases in CHANGELOG.md.