Buttons
The Button System — Every Size, Every State
Padding, radius, height, weight. The full spec for buttons that work across web and mobile without guessing.
Typography
Type Scale That Actually Makes Sense
The sizes, weights, and line heights I use across every project — and the logic behind each step.
Spacing
The 8pt Grid — Why and How
Why everything snaps to 8. The spacing tokens I use, when I break the rule, and what happens when you skip this entirely.
Inputs
Form Inputs — The Full Anatomy
Height, label position, error states, focus rings, disabled states. Every spec you need to build a form that doesn't frustrate people.
Cards
Content Card Anatomy
Padding, shadow, radius, border. When to use elevation vs stroke. How to build a card that works in light and dark.
Navigation
Nav Bars — Web vs Mobile
Top nav height, bottom nav specs, safe area insets, active states. The full breakdown for navigation that stays out of the way.
Mobile
Touch Targets — The Rules Nobody Teaches You
44px, 48dp, why thumbs are unreliable, and the zones on a phone screen that are actually comfortable to reach.
Patterns
Modal & Overlay Design — The Spec
Width constraints, backdrop opacity, dismiss behaviour, animation curves. Everything that makes a modal feel intentional rather than bolted on.
Patterns
Empty States — Designing for Nothing
The most ignored screen in any product. How to write them, size the illustration, and turn dead ends into moments of trust.