Design System

A React + Tailwind CSS v4 component library, distributed as an installable package and kept in sync with Claude Design via /design-sync. Supports various themes.

Using it in an app

pnpm add @kornorg/design-system   # workspace / git / published dependency

import { Button, Card, CardHeader, CardTitle } from "@kornorg/design-system";
import "@kornorg/design-system/themes/modern-neutral.css"; // pick a feel

export function Example() {
	return (
		<Card>
			<CardHeader>
				<CardTitle>Hello</CardTitle>
			</CardHeader>
		</Card>
	);
}

Each theme stylesheet is self-contained (component styles, the full semantic-token utility vocabulary, and the Geist @font-face faces) — no Tailwind setup required in the consuming app. Dark mode: add class="dark" to a root element. Token values are also importable from @kornorg/design-system/tokens.

Feels (themes)

The same components ship in multiple "feels" — pick one by importing its stylesheet:

| Feel | Import | Look | |------|--------|------| | Modern Neutral | @kornorg/design-system/themes/modern-neutral.css | Zinc neutrals, indigo accent, 8px radius | | Cobalt | @kornorg/design-system/themes/cobalt.css | Dark-first studio look, electric cobalt-blue accent, 6px radius | | Spartan | @kornorg/design-system/themes/spartan.css | Zinc neutrals with a green accent (#18453B), 8px radius | | GestPlate | @kornorg/design-system/themes/gestplate.css | Warm-stone neutrals, teal accent, amber warmth, 8px radius — for health/wellness |

@kornorg/design-system/styles.css re-exports Modern Neutral as the default. Each feel also has its own Claude Design project (see .design-sync/).

Developing

pnpm dev            # run the component showcase at /design-system
pnpm build          # build the package → dist/ (JS + .d.ts + styles.css + fonts)
pnpm check:fix      # Biome lint + format
pnpm test           # Vitest unit tests
pnpm e2e            # Playwright (local)

• Components live in src/components/ui/ (one file each), re-exported from src/components/ui/index.ts. Styling tokens are in src/app/globals.css (mirrored as typed values in src/tokens.ts).
• The package build (tsup + Tailwind CLI) emits dist/ — see ADR-0011.
• Adding/changing components: edit source, run pnpm build, then re-sync to Claude Design with /design-sync (it reads the built dist/). The sync inputs live in .design-sync/.

Stack

| Tool | Purpose | |------|---------| | React 19 + Radix UI | Components | | Tailwind CSS v4 | Token-driven styling | | tsup | Library build (ESM + .d.ts) | | Biome | Linter + formatter | | Vitest / Playwright | Tests | | Next.js | Component showcase / docs surface |

Documentation

Decisions live in Architecture Decision Records; operational runbooks (e.g. lockfile recovery) in docs/maintenance/.

Uses pnpm pinned via packageManager. Run corepack enable once so your local pnpm matches the project (ADR-0002).