Vertical Rhythm

The problem

Templates are cloned, edited, cloned again, and every clone picks up a little ad-hoc padding. Six months later the spacing between sections varies from 8 to 42 pixels, and the design reads as subtly sloppy without anyone being able to say why.

Fixing it by hand means clicking into every row, every column, and every block, checking four padding values on each, across the whole template. Almost nobody does that more than once.

How it works

In a Bee design, top and bottom padding lives at three levels: the row’s content area, each column, and each block inside a column. Vertical Rhythm lets you define a target for each level once, as a ruleset, then rewrites the whole template to match:

• Preview changes rewrites the padding on a copy of the design and shows it on the canvas.
• Keep stages the result in Blueshift; Revert restores the original. Nothing persists until you click Blueshift’s own Save, so backing out is always one click away.
• Your ruleset is remembered (synced with your Chrome profile), so cleanup on the next template is one click.

The ruleset

Using it

• Enable Vertical Rhythm in the Nitro popup.
• Open a template in Email Template Studio and click the Vertical Rhythm launcher; a floating, draggable panel opens.
• Set your per-level targets and any block-type overrides.
• Click Preview changes and eyeball the canvas; the panel summarizes the changes made.
• Click Keep, then press Blueshift’s Save to persist. Or click Revert to restore the original design.

What it never touches

Rhythm cleanup is deliberately conservative. The current version:

• Rewrites desktop padding only. Mobile-specific overrides are deliberate work, so they are detected and reported, never modified.
• Never changes left or right padding; horizontal layout is out of scope.
• Never reaches inside a block’s inner styles, like the padding within a button. Only the block’s outer spacing is normalized.
• Never saves on your behalf. The final Save is always yours.