The structural starting point for a new case study. Every region snaps to the same 12-column field — the grid lines are kept visible so the underlying structure reads at a glance. Strip the strokes and drop in content.
12 columns · gutter follows the type scale · breaks to 1 column under 700px.
Each block declares its own grid-column: span N. Rows fill left-to-right; total per row sums to 12.
Replace each .sg-cell with real content (hero, metric grid, hero-fig, tradeoff ledger, evidence rows from the pattern library). Remove the .sg-cell borders when the layout is locked, or keep them for a blueprint look.
Block out spans on the grid before any visual design. The page should read as architecture.
Pull hero, metric, evidence, and tradeoff components from the pattern library.
Drop the visible strokes once content lands, or keep them as an editorial device.
Two grain treatments — an SVG fractal noise filter for type, a stippled CSS gradient for surfaces.
The system uses just enough texture to keep the page from feeling vector-flat. The SVG #grainy-text filter rides on gradient text. The .texture-grain utility sprinkles a 4–6px stipple over panels with mix-blend-mode: soft-light. Both are mode-aware.
Grain on type
Brand-grain text gradient. Dispatch-grain accent.
Stippled surface · .texture-grain
Soft-light grain over a panel.
A thin stipple breaks the flatness of solid surfaces. It stays under 7% opacity so it never competes with type and stays AA-compliant.
Text style for body
Body copy is set in Söhne Buch and holds the voice. Within it you can lean on bold emphasis, an accent-coloured phrase, an inline underlined link, a quieter low-emphasis link, or a directional read the case.