Software engineer in Sydney, working on design systems, testing and the tools around them, in React and TypeScript with accessibility built in.
Get in touch about projects in design systems, design engineering or frontend.
hipuku.dev@gmail.com · hipuku.dev · Figma
A token-first React design system. W3C DTCG tokens in OKLCH, 20 accessible components and five packages on npm.
Storybook · Source · Case study
A design-system auditor for live websites. Crawls a site and reports every colour, type size, spacing step, radius and shadow it ships, deduplicated with CIEDE2000.
Demo · Source · BDD tests · Case study
A team decision log. ADRs with a permission-gated lifecycle, two audit trails, and GitHub citations that report when the cited code changes.
Demo · Source · Case study
An offline Mac app for colours, fonts, palettes and type scales. Electron, React and SQLite, with a typed IPC boundary.
Download · Source · Case study
The component library behind the tools below. 38 components and one token source, distributed as TypeScript source at a pinned git tag.
Storybook · Source · Case study
Converts design tokens between DTCG, Figma variables, Tokens Studio and Tailwind v4, and reports what each format changes or drops.
CSS specificity, token by token, on a from-scratch Selectors Level 4 parser. Compares two selectors or ranks a whole stylesheet.
Perceptual colour tools. Names any hex by CIEDE2000, maps a palette in OKLCH, and checks WCAG contrast for every pair.
Real-time reaction-diffusion. A Gray-Scott simulation run in a Web Worker, with presets and Pearson's map of pattern types.
- The Language We Never Agreed On: why four design token formats overlap and still disagree.
- The Default Is Not a Design Decision: why so many products built from the same defaults look alike.
- Motion Deserves Better Than a Prop: motion as the one design medium that exists in time.
Before this: front-end and test automation on a workflow-automation and messaging platform (React and TypeScript features, a Cucumber BDD regression suite, K6 canary and load tests, GitHub Actions), custom websites for clients, from brief to launch, and maple, an app where a design studio keeps its clients' brands. Design and development work has won Indigo Awards Gold for Website Design (2024, 2026) and Mobile App (2025).
On npm: haus-tokens · haus-components · haus-colour-utils · haus-colour-names · haus-style-probe