THE WEBSITE WORKBENCH

Spacing and content width generator

Give your content room to work.

Set a comfortable rhythm

Advanced settings Fluid scale, reading width and tokens

Spacing in context

From preview to your website.

  1. Choose a compact, balanced or spacious preset. Adjust page gutters, section padding and content width.
  2. Use the viewport preview to see your spacing on a realistic section. Advanced adds scale steps, fluid endpoints, reading width and named tokens.
  3. Download the CSS and standalone specimen. Apply the container, section and flow classes to your HTML or Astro project.

Know what you’re exporting.

The specimen illustrates the generated classes; it does not modify a template automatically. Fluid values assume a 16 px root for rem conversion. Keep the browser root at 100% and test your real content, zoom settings and narrow layouts.

No registration or subscription is needed. Uploaded images, initials and generated content stay in this browser tab.

GOOD DESIGN, OCCASIONALLY.

Your next idea
could start here.

New templates, useful guides, and updates from us.
A little inspiration for whatever you’re building.