Caliper UI

I wanted to show design-system craft without a utility framework. The aim was a small component library styled in hand-written SCSS with BEM, where one token layer is the single source of truth for color, type, spacing, radii, motion, and breakpoints.

Accessibility had to be real rather than claimed, both themes had to come from the tokens alone, and the whole library had to be tested and gated in CI so the quality bar held on every change.

A React and TypeScript library, built with Vite and styled entirely in hand-written SCSS:

• Published as an installable npm package (@ryancalacsan/caliper-ui), shipped as ESM with type declarations, RSC-ready (server-renderable where possible, with "use client" only where needed), and with self-contained CSS that inlines its fonts.
• Eight accessible components: Button, TextField, Modal, Checkbox, RadioGroup, Select (a custom ARIA listbox), Tabs, and Tooltip. Each is keyboard-operable with correct ARIA and managed focus, and a layout and primitives layer is being added.
• A "Spec Sheet" visual identity: warm paper and ink with one construction-orange accent, drawn like a technical document. Light and dark themes come from one token set, with no component changes between them.
• WCAG 2.2 AA verified, not assumed. A script checks every color pairing in both themes, and Storybook runs axe on every story.
• Engineered like a real product: Vitest interaction tests, Playwright visual regression in both themes, GitHub Actions CI, Changesets-driven releases, and npm Trusted Publishing (OIDC with provenance, no stored secrets).

It deploys on Vercel from one GitHub-connected project, with the demo at the root and the component docs in Storybook. Install it with npm i @ryancalacsan/caliper-ui.