Kinsu Design System

Production-grade React + TypeScript design system. Color identity is locked in DESIGN_TOKENS.md. Typography uses Atkinson Hyperlegible Next at an MUI-style scale. Accessibility target: WCAG 2.2 AA.

Install

npm install

Dev build & playground:

npm run dev            # Vite dev server
npm run storybook      # component gallery
npm run build          # library bundle
npm run test           # vitest
npx tsc --noEmit       # strict typecheck

Usage

import '@kinsu/design-system/styles';
import { Button, Input, FormField, Card } from '@kinsu/design-system';

export function LoginForm() {
  return (
    <Card>
      <Card.Body className="flex flex-col gap-4">
        <FormField label="Email" required>
          <Input type="email" />
        </FormField>
        <FormField label="Password" required>
          <Input type="password" clearable />
        </FormField>
        <Button variant="primary">Sign in</Button>
      </Card.Body>
    </Card>
  );
}

All color, spacing, radius, and shadow tokens are exposed as Tailwind utilities (bg-primary-default, text-text-secondary, border-border-default, shadow-md, rounded-lg, …) and as CSS custom properties for runtime access.

Component index

| Phase | Components | | --- | --- | | 1 — Foundations | Button, IconButton, Input, Textarea, Label, HelperText, FormField | | 2 — Selection | Checkbox, Radio, Switch, Select, Slider | | 3 — Surfaces | Card, Divider, Badge, Chip, Avatar | | 4 — Disclosure & nav | Accordion, Tabs, Tooltip, Popover, Breadcrumb | | 5 — Overlays | Dialog, BottomSheet, Alert, Toast | | 6 — Feedback | Spinner, ProgressBar, Skeleton, EmptyState |

Every interactive component ships rest / hover / active / focus-visible / disabled states, plus the domain-specific states documented in COMPONENTS.md. Radix primitives (Accordion, Dialog, Popover, Tooltip, Select, Slider, Switch, Checkbox, RadioGroup, Tabs, Progress) are wrapped, not rebuilt — the asChild pattern is preserved where Radix uses it.

Token access

// Tailwind utility (preferred)
<div className="bg-primary-default text-text-inverse rounded-lg p-4">…</div>

// CSS custom property (for style attribute or bespoke CSS)
<div style={{ background: 'var(--color-primary-default)' }}>…</div>

Tests & QA

• vitest + React Testing Library for keyboard / ARIA behavior across 30+ suites (170+ tests).
• tsc --noEmit in CI with strict, noUncheckedIndexedAccess, and noUnusedLocals all on.
• Storybook 8 gallery with every state of every component.