[Make · Vignette · Web-Dev]
THE SIGNAL SYSTEM

One piece of the Vanguard platform: a centralized breakout-width grid — every block gets a named width without bespoke CSS.

[Shipped]
[Case Study]
⌐vngd.net / fields / signal-grid
Operational Intelligence, Field-Ready
“Pick a width. Ship the block. The grid does the rest.”
Full
Wide
Text
Breakout
Width VocabularyFullWideInsetTextBreakout
[Open live]↗
[ 01 ]BriefBreakout-width, centralized
Width as a system
Width as a vocabulary,
not a hundred one-offs.

Every content block on Vanguard used to reinvent its own width — bespoke max-widths, ad-hoc margins, magic numbers no two blocks agreed on. The Signal System replaces all of it with one placement model: a small set of named width tokens that any block opts into through a single shared field. Authors pick a width by name; the grid resolves the math once, everywhere.

[ 02 ]Build LogWhat it took
  • ✓Centralized placement model — one source of truth
  • ✓Named width vocabulary → design tokens
  • ✓Per-block opt-in via a single shared field
  • ✓Migrated the bespoke blocks onto it
  • ✓Subgrid breakout for the edge cases
[ 03 ]ImpactOutcome
Bespoke width CSS·↓ sharply
Width vocab·5 named widths
Blocks on system·40+
Authoring·pick a width, done
Result·consistent rhythm site-wide
[ 04 ]Stack5 Layers
Next.jsPayload CMSCSS SubgridDesign TokensTypeScript

Loading...

The Signal System — Vignette | David Bickley