Esc
  • Design SystemsFrom Figma Variables to Tailwind, Without the Copy-PasteDesign tokens only help if design and code read from the same source. Here's how I set up a pipeline where Figma variables become Tailwind theme values and React props, and what I learned about naming along the way.
  • Next.jsBuilding a Like Button, From Database to DelightThe heart at the bottom of every article on this site is a tiny full-stack feature. Here's how it works, from the SQLite table and API route to optimistic updates and batched requests.
  • AnimationA Friendly Introduction to Spring PhysicsSprings make interfaces feel alive. Instead of picking a duration and an easing curve, you describe how something should move, and physics does the rest. Let's build an intuition for stiffness and damping with a live playground.
  • UI DesignDesigning Dashboards People Can Actually ScanData-heavy screens fail when every number shouts at once. A practical guide to hierarchy, tables, filters and progressive disclosure for dashboards that engineers and analysts use all day.
  • CSSUnderstanding Flexbox Alignment, Visuallyjustify-content or align-items? Main axis or cross axis? If you still guess which property to use, this interactive guide will fix that for good.
  • BrandA Brand System Is More Than a LogoA logo is the smallest part of a brand. What makes a brand recognizable is the system around it, from type and color to iconography, voice and the way the product itself behaves. Here's how I approach building one that survives contact with real products.

Work history

Projects

A selection of things I've designed and built, newest first. Click an image to see it larger.

Cover image for Multi-Brand Design System
Multi-Brand Design System1 / 3

Multi-Brand Design System

2025

Figma libraries, component standards and documentation for several enterprise brands at RG Pacific. Design tokens from Figma variables feed Tailwind CSS and the React component library, which cut the design-to-engineering cycle by 40%.

  • Design Systems
  • Figma
  • Design Tokens
  • Tailwind CSS
  • React
Cover image for Enterprise Brand & Web Redesigns
Enterprise Brand & Web Redesigns1 / 3

Enterprise Brand & Web Redesigns

2024

Brand identity and responsive website redesigns for 25+ enterprise clients, each starting with stakeholder workshops on strategy, success metrics and phasing. Improved flows and A/B testing raised conversion by 38% and engagement by 44%.

  • Brand Identity
  • Web Design
  • A/B Testing
  • Workshops
Cover image for Production UI in React & Next.js
Production UI in React & Next.js1 / 3

Production UI in React & Next.js

2023

Production interfaces built with React, TypeScript, Next.js, Tailwind CSS and Framer Motion, with sub-second responses on critical paths and WCAG 2.1 AA criteria for semantic HTML, keyboard access and cross-browser support.

  • React
  • TypeScript
  • Next.js
  • Accessibility
  • Core Web Vitals
Cover image for Figma-to-Git Token Pipeline
Figma-to-Git Token Pipeline1 / 3

Figma-to-Git Token Pipeline

2020

An automated design token workflow linking Figma variables to Git-based component packages, so one source of truth kept design and code consistent across platforms.

  • Design Tokens
  • Figma
  • Git
  • Automation
Cover image for Parametric Search & Data Dashboards
Parametric Search & Data Dashboards1 / 3

Parametric Search & Data Dashboards

2020

Redesigned data-visualization dashboards and parametric search at Supplyframe, used by 10M+ hardware engineers and buyers: data tables, interactive charts, advanced filters and inspection panels. Reusable React components cut time-to-task by 32%.

  • UI Design
  • Dashboards
  • Data Visualization
  • React
Cover image for Brand Systems for Digital Products
Brand Systems for Digital Products1 / 3

Brand Systems for Digital Products

2019

Complete brand systems at Tack Media (typography, color, iconography, visual language and voice) carried through product UI, responsive websites and campaigns, with reusable UI kits and a 98% first-round prototype approval rate.

  • Brand Systems
  • Typography
  • UI Kits
  • Landing Pages
Cover image for Interactive Campaigns for Microsoft, Xbox & WB
Interactive Campaigns for Microsoft, Xbox & WB1 / 3

Interactive Campaigns for Microsoft, Xbox & WB

2017

Interactive web campaigns at Ayzenberg Group for Microsoft, Xbox and Warner Bros. Interactive, from storyboards and user flows to WebGL, Canvas and CSS motion prototypes. Contributed to work recognized with three ADDY and Davey awards.

  • Interactive
  • WebGL
  • Motion
  • Storyboards