Start a project
Details

A collection of the small things we refuse to skip. Every one is live, so try it: click, type, use the keyboard. The numbers underneath are the exact timings we use.

Try it
No. 01

The border draws itself.

Choosing a plan should feel deliberate. The outline draws in from the radio button instead of snapping on, and the dot lands with a small overshoot.

  • 460 ms
  • cubic-bezier(.65,0,.35,1)
  • arrow keys move
Try it
Invoice 2041Spring bookings · £480
Invoice archived
No. 02

Mistakes are easy to undo.

Five seconds to change your mind, shown as a ring that counts down in real time. Focus moves to Undo, and back again when you use it.

  • 5 s window
  • polite live region
  • focus returns
Try it
No. 03

Never leave people guessing.

The button says what it is doing, then confirms when it is done. Its width never changes, so nothing around it jumps.

  • 1.2 s saving
  • tick draws in 340 ms
  • aria-busy
Try it

Type any six digits

No. 04

Every step confirms itself.

Each digit draws its own border as it lands, so you know it registered. Paste a whole code, or go back with the arrow keys.

  • 300 ms per box
  • paste fills all
  • one-time-code

More details are on the way.