Buttons and pill
One shape for everything you press, and a cursor that says what will happen.
The decision
- The problem
Several button styles, and nothing telling you what a large photo does before you click it.
- What I chose
One shape, the box of the pill: 68px tall, an outline, blue on hover everywhere. Over large clickable surfaces the cursor becomes a glass pill that names the action.
- Ruled out
A blue primary button. Blue is the hover everywhere, so a primary at rest is filled with the text colour and inverts with the theme.
- What it cost
No third level. When two actions sit together they differ in fill, never in size.
Button
The same box as the view pill (68px tall, 96px wide at minimum, 1.6rem of side air, a mono label and the arrow) with a different material: an outline that fills with the brand blue on hover, and a slight pull toward the pointer. When two actions sit together and one weighs more, the primary is filled with the text colour on the page colour, so it inverts with the theme and is never blue at rest. The label is 12.8px on a desktop and 16px on a phone, where 12.8 read weak at arm's length. The restart variant swaps the straight arrow for a circular one, for actions that go back rather than forward.
View pill
Over any large clickable surface, the cursor becomes a glass pill that says what will happen: view case, read post, say hi, sound on, pause. The label comes from the element itself, so every clickable card carries one. It follows the pointer one to one, without inertia: over a card, the pill is the pointer. It only exists with a mouse or trackpad and with motion allowed; everywhere else, the cards speak for themselves.
Its material and why it is dark are on the Glass page.
Cursor
A soft dot follows the mouse. Over a link it becomes a background that wraps the word, and bridges to the next link when two sit side by side; over reading text it becomes a caret; over large clickable surfaces it hides and the pill takes over. In the chapter index of a case it takes the exact shape of the link. The whole effect sits behind a single switch.