Changelog → SG-Builder — spacing tokens + responsive presets

Released

SG-Builder now ships spacing tokens and responsive presets in the element Spacing panel. Select any element, open Spacing, and choose a named token — padding and margin apply in a single click and hold across breakpoints. Pick a responsive preset and spacing scales automatically across all six breakpoints (1920 / 1199 / 991 / 767 / 575 / 480) without a single manual override.

Available immediately for all SG-Builder pages. Existing pixel-based spacing is untouched — tokens are opt-in per element, per session.

What changed

Before

Spacing in SG-Builder was fully manual. Every element — hero section, card grid, CTA block — required individual padding and margin values per breakpoint. Six breakpoints meant at minimum six separate inputs for every element that needed to scale. On a page with 20+ elements, that math added up quickly, and it added up inconsistently: one designer's "comfortable" was 48 px; another's was 56 px; mobile got whatever was left.

There was no shared vocabulary. Nothing to enforce that the hero and the pricing section breathed the same way. Nothing to wire together after a brand refresh.

After

Two additions to the Spacing panel: Tokens and Responsive.

Tokens — four named values that map to the spacing scale in your brand kit:

TokenIntended use
smTight — inline labels, icon padding, dense UI
mdDefault — cards, buttons, standard content blocks
lgComfortable — section padding, content separators
xlOpen — hero sections, feature spotlights, white-space-led layouts
Select a token; SG-Builder writes the padding and margin values for you based on the brand kit spacing scale. Change the scale in brand kit — every token-linked element updates.

Responsive presets — three presets that describe how spacing should scale as viewport narrows:

PresetBehavior
CompactSpacing contracts aggressively at each breakpoint — prioritizes content density on mobile
NormalProportional scaling — default for most layouts
GenerousSpacing holds longer before contracting — for editorial + hero layouts where breathing room earns its keep
Tokens and presets work independently. Apply a token, then select a preset. Or use either alone.

Who this is for

Designers maintaining a live design system. Tokens tie SG-Builder spacing to the brand kit scale. Refresh the scale once; every page that uses tokens inherits the update. No page-by-page edits.

Brands with strict spacing standards. The four-token vocabulary (sm / md / lg / xl) replaces ad-hoc pixel decisions with intentional named values. Design reviews stop turning into spacing audits.

Teams building across many pages. Responsive presets collapse 30+ manual breakpoint inputs into one dropdown selection per element. Teams that maintain landing page libraries, campaign pages, or multi-section homepage builds see the most immediate return.

Where to find it

SG-Builder editor → select any element → right panel → Spacing tab → Tokens row / Responsive row.

Both controls are visible only when an element is selected. They are not available in global style settings — spacing tokens operate at the element level.

[Demo: SG-Builder Spacing panel — Tokens and Responsive preset controls]

Spacing panel with an element selected. Tokens row shows sm / md / lg / xl. Responsive row shows Compact / Normal / Generous.

Fixture walkthrough — SGEN Digital homepage

SGEN Digital carries a homepage with three sections: a full-bleed hero, a three-column product feature card grid, and a CTA strip. Prior to this release, spacing maintenance looked like this:

  • Hero: 96 px top/bottom at 1920, manually stepped down to 64 / 48 / 32 / 24 / 20 across breakpoints — six values, one element.
  • Card grid: 48 px padding per card, four breakpoints adjusted individually. Three cards = 12 manual entries for padding alone.
  • CTA strip: 72 px top/bottom, stepped down separately, no shared reference with the hero.
Total manual spacing inputs for three sections: approximately 40 values across 18 element × breakpoint combinations. A brand refresh requiring a tighter mobile feel meant opening each one.

With tokens + responsive presets:

Hero receives token xl + preset Generous. Card grid receives token md + preset Normal. CTA strip receives token lg + preset Normal.

[Demo: SGEN Digital — Hero section with token xl + preset Generous applied]

SGEN hero at 1920 and 767. Token xl + Generous preset — spacing steps proportionally without manual breakpoint entries.

The card grid inherits md + Normal. Cards hold comfortable internal padding at desktop and contract cleanly at 575 without individual overrides.

[Demo: SGEN Digital — product feature card grid with token md + preset Normal]

Card grid at 991 and 480. Token md + Normal — three columns collapse to one, spacing contracts through the preset without manual per-card input.

Manual spacing input count for the same three sections: three token selections + three preset selections. Six total, versus the previous 40.

Migration note

No action required for existing pages. All pixel-based spacing set before this release is preserved exactly as-is. Tokens and presets are opt-in — applying a token to an element overwrites only the padding/margin on that element going forward. Other elements on the same page are not affected until individually opted in.

Recommendation: apply tokens to new elements and new sections first. Retrofit existing sections during your next planned redesign pass or when a brand kit spacing refresh makes a full update worthwhile.

Documentation

On this page