Design System

Artwork and logos are never transformed.

Containers may slide and fade; the art inside is never scaled, cropped, blurred or morphed. A row fades out before it collapses, so art is never seen being cut.

Typing never animates.

Rows come and go instantly as a search narrows, and a dialog keeps its height while a search is active — it's centred, so resizing would move the field being typed in.

Tab switches are instant.

Like a native tab bar: a tab you've already visited is simply there, and no route change slides or crossfades. The one thing a page body does is arrive — when a loading state was on screen, what replaces it fades in.

Reduce Motion means fades only.

Movement and resizing snap; opacity and colour still ease. The spinner keeps spinning — a static one reads as broken.

Celebrate three things.

A transfer finishing, a playlist sent, a new friend — when they happen, never for something already true on load, and never for anything destructive.

Never draw rows you can't count.

A skeleton row is a claim about how many there will be. A list of N things waits as one spinner, in the space the list will take.

The box stops the resize, not the spinner.

A wait that's a different height from what replaces it makes a dialog grow or shrink — and a dialog is centred, so its title moves too. Size the region first.

Nothing is drawn over rows.

They carry cover art. A dimmed list's wait shows in the search field or the button that started it, which stays busy until the new content is on screen.

A beat in a dialog, none on a page.

In a dialog or a card the spinner waits 150ms, then fades in: a quick load never shows it. A page's loading state is up for about 300ms regardless, so its spinner is there from the first frame.

A wait ends with a fade.

A page taking over from its loading state fades in where the skeletons and the spinner stood: 200ms, nothing travels, and the title holds still. Only when there was a wait — a tab back from the cache is simply there.

What holds a height lets go once.

The favorites picker opens at full height and is released when every service has answered — for good, so a later wait inside it can't stretch it again.