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
ResourcesAbout
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

    How do I build one thing really well?

    • 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
ResourcesAbout

Components

The other sections each look at one kind of decision on its own. This one puts them all together. Each essay takes a single component and builds it properly, from the first rough version to one I'd be happy to ship, with every choice along the way explained.

These are the components that look simple until you build them. A toast has to appear, stack, wait and get out of the way. A dropdown has to position itself, handle submenus and work from the keyboard. Each essay links back to the ideas it borrows from Foundations, Interaction and Motion, so you can see where every detail comes from.

Toast (coming soon)

A small message that has to appear, stack, wait and leave without ever getting in the way.

Dropdown Menu (coming soon)

Positioning, submenus, keyboard and motion: the menu that ties half of Interaction together.

Tabs (coming soon)

A sliding indicator is the easy part. Here's everything else.

Drawer (coming soon)

A bottom sheet that follows your finger, snaps where it should, and lets go when you do.