Visual design

This skill reviews nested radii, shadows, borders and spacing. It uses the values published for userinterface.wiki.

Every check is a pair. The broken line sits beside the line that replaces it.

Where two rounded boxes nest with an even gap, the outer radius equals the inner radius plus that padding. A single hard shadow is a finding when the surface is meant to lift. Motion timing of a hover belongs to timing-functions. A pseudo-element used for a non-shadow decoration belongs to pseudo-elements.

When to use

Use this when building or reviewing cards, buttons, menus and the space between them. Use interface-typography for type. Use laws-of-ux for target size and grouping laws.

1. Read the surfaces

Read the files in scope. List radii, box-shadow, borders and raw padding values. If the project already has tokens for these, use the tokens and only flag departures.

2. Check radius, shadow and border

For an even inset, outer radius = inner radius + padding. The published pair is an inner radius of 8px and padding of 8px, so the outer radius is 16px. The same radius on both boxes is visual-concentric-radius.