Surfaces
Start with whitespace to separate content. Use a card when content stands alone or has its own interaction.
Hierarchy
From lightest to heaviest separation.
Whitespace only
Use space for closely related content. A heading can separate it from supporting text.
Divider
Use a divider between items that share context, such as rows in a list.
Well
Use surface-well for recessed or secondary content.
Card
Use surface-card for separate or interactive content. Its lighter tone and stronger ring show depth.
Divided grid
-
Repos
24
-
Stars
1,284
-
Issues
7
Rules
Use the lightest separation that makes the content clear. Add a surface only when space or a divider isn't enough.
Keep dividers subtle with opacity, as in border-rambutan-100/10.
Use surface-card to keep the card tone and ring consistent.
Keep wells recessed with a darker or muted tone.