Pinned story

Step 01

Start from one token

Every surface steps up from the page colour, so a card is a fact about the page, not a new choice.

• --background
• --card
• --popover
• --muted

Step 02

Round from the outside in

Inner radius equals outer radius minus the gap, so nested corners stay concentric at every size.

• 12px card
• 4px gap
• 8px tile

Step 03

Move only what explains

One entrance per section, transform and opacity only, and a still state that reads on its own.

• transform
• opacity