Parag Jha
ui.heigin.com

HeiGin UI

The design system behind the HeiGin CRM: production-derived components, copyable source, and a docs site.

26 primitives, 13 CRM patterns and 128 design tokens, published on npm and copyable one component at a time.

Live · in use
Role
Designer and maintainer
Dates
2026, ongoing
Team
Used by the engineers building the HeiGin CRM
Scope
Design tokens, primitives, CRM patterns, the docs site, the Builder and the copyable source
Tools
React, TypeScript, Base UI, Vite, Next.js, Playwright, axe
Status
Live. v0.1.1 on npm.
Live at
ui.heigin.com
01 · The problem

CRM interfaces that look consistent, are accessible, and are quicker to build.

HeiGin needed one place for the components, patterns and tokens the CRM is built from, so the product reads as one thing and engineers do not rebuild the same screens twice.

The library is derived from the production stylesheet rather than written from a mood board, so what engineers install is what the product already looks like.

02 · Constraints and decisions

Five decisions that shape the library.

  1. Tokens come from production, not a mood board.

    Colours, radii, shadows, motion and control sizes come from the production stylesheet. Every token is labelled observed, derived or proposed.

  2. Primitives first.

    CRM patterns are built from Button, Badge, Card and the other primitives, so their styles are never duplicated.

  3. Install the package, or copy the source.

    Teams can install the npm package, or copy one component with exactly the files it needs. Generated manifests list every dependency.

  4. Complex widgets use Base UI.

    Overlays and other complex widgets are built on Base UI instead of hand-rolled behaviour.

  5. Accessibility is tested, not claimed.

    Built to WCAG 2.2 AA, with keyboard and axe tests on every component. Where production contrast needed fixing, the change is documented.

03 · Outcome

Shipped as a package, a docs site and copyable source.

47copyable component manifests, each listing its own files and dependencies
  • Published on npm as @heigin/ui, now at 0.1.1.
  • A docs site covering every component, pattern and token, with a visual Builder for composing layouts and exporting clean code.
  • Used by the engineers building the HeiGin CRM.
  • Keyboard and axe tests run on every component.