Grid and Layout Map · WCN Brand Portal

WCNLAYOUT MAP

Layout & grid · F

How WCN arranges space.

Six topics — one 12-column grid, one 4-based spacing scale, and Apple's lesson learned: generous whitespace and a single focal point per screen. Every measure derives from the atoms already built.

12-COLUMN GRID

MARGIN · GUTTER

SPACING SCALE · ×4

BREAKPOINTS

ONE FOCAL POINT

5/6

SYSTEM-DEFINED

Grid · spacing · breakpoints defined in atoms

Proven across every map page

Composition — principle set

03F01 Column grid DONE

Every WCN layout sits on a 12-column grid. Twelve divides cleanly into halves, thirds and quarters — enough flexibility for any composition, few enough rules to stay disciplined.

COLUMNS12 GUTTER24 px MARGINResponsive DIVIDES½ · ⅓ · ¼

F01.1 · WHY TWELVE

Divisible by design.

Twelve splits into 2, 3, 4 and 6 equal parts, so a single grid handles two-up, three-up and four-up layouts without a new system. It is the standard for a reason.

HALVES6 + 6

THIRDS4 + 4 + 4

QUARTERS3 × 4

ASYM8 + 4

F01.2 · GUTTERS

Even channels.

Gutters are a fixed 24 px between columns, from the spacing scale. Consistent gutters are what make a grid feel calm; they never vary within a layout.

GUTTER24 px

SOURCESpacing scale

VARYNever within layout

MOBILE16 px

F01.3 · SPANS

Content spans columns.

Elements span whole columns — a card might take 4, a feature 8. Snapping to the grid keeps edges aligned down the page so the eye finds a vertical rhythm.

CARD4 cols

FEATURE8 cols

FULL12 cols

SNAPWhole columns

F01.4 · MARGINS

Air at the edges.

Outer margins scale with the viewport — generous on desktop, tighter on mobile — while the 12 columns stay proportional. The grid breathes; it doesn't cram.

DESKTOP60–96 px

TABLET40 px

MOBILE20 px

COLUMNSStay proportional

DON'T

Don't float off-grid — Snap to whole columns.

Don't vary gutters — 24 px throughout a layout.

Don't crush margins — Edges need air.

Don't invent a 5-col grid — Twelve covers it.

“Twelve columns is enough freedom and exactly enough discipline.”

03F02 Spacing scale DONE

Spacing at WCN is never a guess. Every gap comes from one scale built on a 4-pixel base, so margins and padding feel related across the entire system.

BASE4 px STEPS4 → 64 px TOKENSxs → 3xl RULENo off-scale values

F02.1 · THE BASE

Everything from four.

A 4 px base unit underlies all spacing. Multiples — 4, 8, 12, 16, 24, 32, 48, 64 — give a familiar rhythm that aligns with the 8 px type baseline.

UNIT4 px

STEPS4·8·12·16·24·32·48·64

BASELINEAligns to 8 px

NAMEDxs · sm · md · lg

F02.2 · TOKENS

Named, not numbered.

Spacing is applied by token — space-sm, space-lg — not raw pixels. Designers choose intent; the token resolves the value, and changing the scale updates everywhere at once.

NAMEspace-xs … 3xl

APPLYToken, not px

CHANGEOne place

CODESame tokens

F02.3 · RELATIONSHIPS

Close means related.

Space encodes relationship: tight gaps bind a label to its value, larger gaps separate groups. Proximity is a layout tool, not an accident of where things landed.

TIGHTBound items

MEDIUMWithin group

LARGEBetween groups

MEANINGProximity = relation

F02.4 · DENSITY

One scale, two densities.

Comfortable and compact densities scale the same tokens by a fixed factor, so a data-dense table and an airy marketing page still feel like one system.

COMFORTDefault

COMPACTTables · dense UI

METHODScale factor

SYSTEMStays unified

DON'T

Don't use off-scale values — Pick a step, never 13 or 19.

Don't hardcode pixels — Apply spacing tokens.

Don't space at random — Proximity carries meaning.

Don't mix densities — One density per surface.

“Every gap on the scale; none off it.”

03F03 Breakpoints DONE

WCN is designed mobile-first and scales up through a small set of named breakpoints. The content leads; the breakpoints simply give it more room as the screen grows.

SM640 px MD768 px LG1024 px XL1280 px

F03.1 · MOBILE-FIRST

Start small.

The base layout is the smallest screen — single column, full-width. Larger breakpoints add columns and spacing. Designing up is easier than cramming down.

BASEMobile · 1 col

ADDColumns as it grows

ORDERmin-width up

DEFAULTSmallest

F03.2 · THE STOPS

Four, named.

Breakpoints are sm/md/lg/xl at 640/768/1024/1280. Named, not arbitrary, so designers and engineers describe layouts in the same words.

SM640 · phone land

MD768 · tablet

LG1024 · laptop

XL1280 · desktop

F03.3 · REFLOW

Columns, not shrink.

At each stop, layouts reflow — a 3-up becomes 1-up on mobile — rather than scaling everything down. Tap targets and type stay full size; only the arrangement changes.

DESKTOP3-up

TABLET2-up

MOBILE1-up

SIZEStays legible

F03.4 · CONTENT BREAKPOINTS

Break where it breaks.

Beyond the standard stops, components break where their own content demands — a card grid wraps when cards get too narrow. The breakpoint serves the content, not a device.

STANDARDsm–xl

CONTENTComponent-driven

CARDSWrap on min-width

RULEContent > device

DON'T

Don't design desktop-first — Start at the smallest screen.

Don't scale everything down — Reflow columns instead.

Don't shrink tap targets — 44 px holds at every size.

Don't invent random stops — Use the named breakpoints.

“The content decides the layout; the breakpoint just gives it room.”

03F04 Containers DONE

Content can have all the screen it wants — text cannot. WCN caps containers and line length so reading stays comfortable no matter how wide the monitor.

CONTENT1280 px max TEXT680 px / 68ch CENTREAuto margins FULL-BLEEDBackgrounds only

~ 68ch measure

F04.1 · CONTAINER

A ceiling on width.

The main content container caps around 1280 px and centres. Past that, ultra-wide screens get margin, not stretched layouts — nobody reads a line that spans 30 inches.

MAX1280 px

ALIGNCentred

WIDEMargin grows

STRETCHNever

F04.2 · MEASURE

Sixty-eight characters.

Body text caps near 680 px — about 68 characters — even inside a wide container. Long-form copy sits in its own measure while images and data can run wider.

TEXT≈ 680 px

CHARS60–75

MEDIAMay run wider

MIXText narrow, media wide

F04.3 · NESTING

Containers within.

Sections can nest narrower containers for emphasis — a centred quote, a callout — inside the main width. Nesting narrows; it never widens past the parent cap.

QUOTENarrow centre

CALLOUTInset

RULENarrow only

PARENTHard cap

F04.4 · FULL-BLEED

Edge to edge, for colour.

Backgrounds, images and section colour may run full-bleed for impact — but the text inside them returns to the measure. Bleed the canvas, never the paragraph.

BLEEDBackgrounds · media

TEXTReturns to measure

USEImpact sections

NEVERFull-bleed paragraphs

DON'T

Don't stretch text wide — Cap the measure at ~68ch.

Don't fill ultra-wide — Give it margin instead.

Don't widen on nest — Nesting only narrows.

Don't full-bleed paragraphs — Bleed the canvas, not the copy.

“Give the page the screen; give the sentence a limit.”

03F05 Section rhythm DONE

A long page is a sequence of sections, and the space between them is the rhythm. WCN sets that vertical spacing on the scale so a page reads in measured, even breaths.

SECTION GAP96 px desktop WITHINSmaller steps SOURCESpacing scale CONSISTENTPage-wide

F05.1 · SECTION GAP

A large, even gap.

Major sections are separated by a generous, consistent gap — around 96 px on desktop, scaling down responsively. The repetition is what makes a page feel composed rather than stacked.

DESKTOP96 px

TABLET72 px

MOBILE56 px

CONSISTENTEvery section

F05.2 · INTERNAL SPACING

Tighter within.

Inside a section, spacing steps down — heading to body, body to component. The contrast between large section gaps and tighter internal gaps is what signals structure.

HEADING24 px to body

BODY16 px to next

STEP DOWNFrom section gap

SIGNALContrast = structure

F05.3 · ANCHORS

Colour marks the beat.

Alternating section backgrounds — paper, warm tint, ink — reinforce the rhythm and give the eye resting points. Colour changes land on section boundaries, never mid-section.

ALTPaper · tint · ink

LANDOn boundaries

RESTEye anchors

MIDNever mid-section

F05.4 · SCROLL FEEL

Reveal, in time.

Sections may reveal gently on scroll, but the rhythm holds with motion off. The spacing carries the pacing; animation is seasoning, never the structure.

REVEALGentle

RMHolds without it

PACINGFrom spacing

MOTIONSeasoning only

DON'T

Don't vary section gaps — One consistent beat.

Don't equalise all spacing — Contrast signals structure.

Don't change colour mid-section — Land it on boundaries.

Don't depend on scroll motion — Rhythm holds with it off.

“The space between sections is the page keeping time.”

03F06 Composition WIP

Grid, spacing and measure are the rules; composition is the craft of using them. This is how WCN arranges a page so the eye lands where it should and moves the way it should.

FOCALOne per view PATHTop-left lead-in WHITESPACEActive BALANCEAsymmetric

F06.1 · FOCAL POINT

One thing first.

Every view has a single clear focal point — the thing the eye should hit first. Size, colour and space create it; if everything is emphasised, nothing is.

COUNTOne per view

MAKESize · colour · space

VERMILIONSparingly, to lead

TESTSquint — what wins?

F06.2 · READING PATH

A path for the eye.

Composition guides a path — usually top-left lead-in, down through the hierarchy to the action. Alignment and spacing make the path; the reader should never feel lost.

LEAD-INTop-left

FLOWDown hierarchy

ENDThe action

GUIDEAlignment · space

F06.3 · WHITESPACE

Emptiness with intent.

Whitespace is an active material, not leftover room. It frames the focal point, separates groups and gives the editorial calm that defines the brand. Resist filling it.

ROLEActive material

FRAMESThe focal point

CALMBrand signature

RESISTFilling it

F06.4 · BALANCE

Asymmetric, not centred.

WCN favours asymmetric balance — a heavy element offset by space — over dead-centre symmetry. It feels considered and editorial; symmetry is reserved for moments that earn it.

DEFAULTAsymmetric

WEIGHMass vs space

SYMMETRYEarned moments

FEELEditorial

DON'T

Don't emphasise everything — One focal point per view.

Don't scatter the path — Guide the eye deliberately.

Don't fear whitespace — It is doing real work.

Don't default to centre — Asymmetry reads as considered.

“The rules make a layout possible; composition makes it good.”

Space is the message

Arrange less. Mean more.

Layout inherits everything from the atoms: a 4-based spacing scale, a 12-column grid, breakpoints proven across every page of this system. Apple's lesson — give one idea room to breathe and a single focal point — turns structure into calm. Next: a layout-component page, the way B1–B6 break down colour.

WCN Layout Map · 6 topics · H1–H6

03 · VISUAL · F · v1.0