Spacing / Grid Design system

Keep the layout rhythm consistent as content and screens change.

7 checks · 2 content groups

Checklist contents

Review progress

Structure and meaning

Compare information and presentation in context of use.

Use a common distance setChoose regular distance levels instead of adjusting each point arbitrarily.Distinguish spacing within an element from spacing between page sections.Example Labels and input boxes are close; The two groups of settings have a larger gap.Named according to purposeUse variables for element padding, list spacing, and page margins.Separate the padding within the component from the layout spacing between regions; the same numeric value does not mean the same role.Column and gutter latchesIndicate how to divide columns, the space between columns and the outer margin at each width level.Specify the number of columns, the space between columns and the outer margin in each size; The actual content should fit the grid instead of just the color block pattern.Change layout according to contentSet a transition point when content starts to get crowded and keep sharing rules.Set layout change points when the content needs it, not just by device name; check for widths between two specified points.

Interaction and usability

Try the operation, change the status and continue working.

Have context-appropriate densityIf appropriateIf compact mode is supported, text, touch areas and focus points will still be readable.Compact mode must still preserve the interactive area and readability; Reduce the amount of decoration before scaling buttons or text.Compare the alignment axisCheck that titles, input boxes, and actions have the same guides as the intention.Try long content and zoomCheck for long labels, multiple rows, and enlarge the text before finalizing the grid.Try long labels, multiple columns, long translations, and large zoom levels; Mesh errors often appear in these cases before sample data.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Use a common distance set

Distinguish spacing within an element from spacing between page sections.

EXAMPLES

Usage examples

Use a common distance set

Labels and input boxes are close; The two groups of settings have a larger gap.

Spacing / Grid Design system

Structure and meaning

Interaction and usability

How to review

Use a common distance set

Usage examples

Use a common distance set

Find a checklist

No checklists found