Skip to content
Sanding Space
Sanding Space
Introduction
Principles
Sand the Back
Details Compound
Taste Is Trainable
Prototype in the Material
Every State Is Designed
Speed Is a Feeling
Honor the Platform
Know When to Stop
Foundations
Spacing Is a Scale
Concentric Corners
Optical Alignment
A Type Scale
Line Length and Leading
Perceptual Color
Contrast Is Not a Checkbox
Depth in Light and Dark
Icons Match the Text
Interaction
Button Press
Hover Is a Hint
The Safe Triangle
Hit Targets Are Bigger Than They Look
Focus Is a State Too
The Keyboard Is an Input
Inputs That Don't Fight You
Disabled Buttons Explain Nothing
Undo Beats Confirm
Motion
Motion Has a Job
Timing: Duration and Easing
Enter and Exit Aren't Mirrors
Grow From the Source
Springs Can Be Interrupted
Things Don't Teleport
Edges Should Give
Reduced Motion Isn't No Motion
Animate the Cheap Properties
Components
Toast
Dropdown Menu
Tabs
Drawer
Systems
Tokens Have Layers
Theming Without Rewriting
Components Are APIs
Composition Over Configuration
Variants, Not Overrides
Density Is a Mode
Behavior and Style Are Separate
Catch It Before It Ships
Product
Defaults Are Decisions
Empty States Are Onboarding
Progressive Disclosure
Write the Interface
Make the Common Path Fast
Never Lose Work
The URL Is State
Ship Behind a Flag
Resources
About
Resources
What I read, watch and save while learning to sand web interfaces.
Inspiration
Craft
·
Gustavo Fior's notes on the details that make interfaces feel right.
(opens in a new tab)
Interface Craft
·
A working library for designing with uncommon care.
(opens in a new tab)
Sanding Space
Introduction
Principles
Sand the Back
Details Compound
Taste Is Trainable
Prototype in the Material
Every State Is Designed
Speed Is a Feeling
Honor the Platform
Know When to Stop
Foundations
Spacing Is a Scale
Concentric Corners
Optical Alignment
A Type Scale
Line Length and Leading
Perceptual Color
Contrast Is Not a Checkbox
Depth in Light and Dark
Icons Match the Text
Interaction
Button Press
Hover Is a Hint
The Safe Triangle
Hit Targets Are Bigger Than They Look
Focus Is a State Too
The Keyboard Is an Input
Inputs That Don't Fight You
Disabled Buttons Explain Nothing
Undo Beats Confirm
Motion
Motion Has a Job
Timing: Duration and Easing
Enter and Exit Aren't Mirrors
Grow From the Source
Springs Can Be Interrupted
Things Don't Teleport
Edges Should Give
Reduced Motion Isn't No Motion
Animate the Cheap Properties
Components
Toast
Dropdown Menu
Tabs
Drawer
Systems
Tokens Have Layers
Theming Without Rewriting
Components Are APIs
Composition Over Configuration
Variants, Not Overrides
Density Is a Mode
Behavior and Style Are Separate
Catch It Before It Ships
Product
Defaults Are Decisions
Empty States Are Onboarding
Progressive Disclosure
Write the Interface
Make the Common Path Fast
Never Lose Work
The URL Is State
Ship Behind a Flag
Resources
About