Document Spacing System | mysimulator.uk

Define a consistent spacing scale and application rules for layouts, considering accessibility.

Use a base 4/8px scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64. Map to tokens (xs–3xl). Keep even increments for predictable rhythm.

This provides a clear and scalable system that’s easy to understand and maintain across the project.

Apply generous section padding (48–64 desktop, 32 tablet, 24 mobile) to improve readability and visual hierarchy.

Buttons/inputs: 12–16px padding, 8–12px gaps. This creates breathing room around interactive elements, making them easier to tap or click.

Cards: 16–24px internal padding; 16–24px vertical rhythm between items. This ensures a consistent visual flow and helps group related content effectively.

live demo · related simulation● LIVE

Tables: 12–16px cell padding; 16–20px row spacing for dense vs. comfortable modes.

This approach caters to both users who prefer a tightly packed table and those who appreciate more visual separation between rows.

By offering adjustable spacing, we can optimize the table’s appearance based on screen size and user preference.

Frequently asked questions

What spacing should be used for fields within a form?

Forms: 12–16px between fields; 20–24px between groups; 28–32px before actions. This spacing provides sufficient space for users to comfortably input data and ensures clear visual separation between form elements.

How should responsive design be handled when it comes to spacing?

Responsive & Exceptions – This section will detail how to adjust spacing values based on screen size, ensuring a consistent user experience across devices. It also addresses potential exceptions to the standard spacing rules.

Should I reduce padding on mobile screens?

Scale down padding on mobile; avoid sub-8px gaps except in iconography. Provide print adjustments to reduce excess whitespace. This maintains a clean and uncluttered look on smaller devices while still providing sufficient space for interactive elements.

How should I manage spacing tokens across the project?

Centralize tokens; lint against hardcoded spacing; document do/don’t examples. Re-audit quarterly for drift. This ensures consistency and reduces redundancy, simplifying maintenance and future updates.

▶ Try it live

Everything above runs in your browser — open Hash Function Avalanche Visualizer and change the parameters while it is running. Nothing is installed, nothing is uploaded, the whole model lives in one tab.

▶ Open Hash Function Avalanche Visualizer simulation