Bespoke CSS
Live Demo
Key Outcome
A component library and design system deployed on Vercel: eight accessible components, two themes built from one token layer, and WCAG 2.2 AA verified by an automated contrast check and by axe running on every Storybook story.
The Challenge
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.
What I Built
A React and TypeScript library built with Vite and styled entirely in hand-written SCSS:
- Eight accessible components: Button, TextField, Modal, Checkbox, RadioGroup, Select (a custom ARIA listbox with type-ahead), Tabs (roving tabindex with a sliding indicator), and Tooltip. Each is keyboard-operable with correct ARIA and managed focus.
- Two themes from one set of token roles. A light "paper" theme and a dark "dev-mode" theme switch by repointing semantic tokens with no component changes, and the system follows the OS color-scheme preference.
- WCAG 2.2 AA verified, not assumed. A script checks every color pairing in both themes, and Storybook runs axe on every story.
- A "Spec Sheet" visual identity: warm paper and ink with one construction-orange accent, drawn like a technical document, with grotesque and monospace type and near-square corners.
- Interaction tests drive the keyboard flows, visual regression snapshots cover both themes, and GitHub Actions runs the full suite on every push and pull request.
It deploys on Vercel from one GitHub-connected project, with the demo at the root and the component docs published as a Storybook site.