Interface: Surfaces

Surface treatment communicates depth, grouping, and pace. Use it sparingly and consistently.

Surface Ladder

• MUSTDefine a clear ladder such as canvas -> surface -> raised -> overlay.
• MUSTKeep neighboring steps visually close enough that hierarchy feels coherent.
• SHOULDUse borders, tinted fills, and whitespace before introducing stronger shadows.

Cards, Panels, And Dividers

• MUST NOTWrap every content block in a card.
• SHOULDUse open layouts with spacing and dividers for routine sectioning.
• SHOULDReserve card treatments for repeated items, settings clusters, or genuinely framed tools.
• MUSTDivider treatments stay quiet; they support grouping, not visual branding.
• MUSTNested cards need a strong product reason.

Breakpoint Reconfiguration

• SHOULDReduce visual framing as screen real estate tightens.
• MUSTRe-evaluate card density, padding, and borders at smaller breakpoints instead of merely stacking the same desktop treatment.
• SHOULDMerge adjacent surfaces on mobile when extra chrome slows scanning.

Visual Weight

• MUSTUse surface contrast to clarify priority, not decorate empty space.
• SHOULDLet whitespace do work before adding more borders or fills.
• MUST NOTCreate a checkerboard of alternating panels without information hierarchy to justify it.

Empty And Loading States

• MUSTEmpty and loading states inherit the same surface ladder as the populated state.
• SHOULDSkeletons and placeholders match the eventual container structure.

Review Questions

• Could whitespace or a divider replace this card?
• Does the current surface treatment make scanning faster?
• Is any surface visually louder than the content it contains?