Layout & spacing

Everything sits on a 4-pixel grid

Spacing is the difference between work that looks designed and work that looks assembled. Pick values from the scale below instead of nudging things until they look about right.

Spacing scale

Multiples of 4. In practice you will use 8, 12, 16, 24 and 32 for almost everything, and 64–128 for the gaps between sections.

4px
8px
12px
16px
24px
32px
48px
64px
96px
128px
Inside a card

20–24px padding, 8–12px between a heading and its paragraph.

Between cards

16–20px gap. Use a grid gap, not margins on each card.

Between sections

64–128px vertical. Marketing pages breathe; product screens sit at the lower end.

Padding — acceptable use vs. not acceptable

Padding is the rule most often broken, because it is invisible until it is wrong. Blue overlay marks the padding in each example.

Even padding on all four sides

Equal left and right, equal top and bottom. Optical centring beats mathematical guessing.

Homework system

Auto-graded, included.

24px all round
Homework system

Auto-graded, included.

Four different values

Room to breathe

When content presses against an edge it reads as an accident. Whitespace is not wasted space.

145+ titles

Across business, economics, and the social sciences.

Generous, calm
145+ titles

Across business, economics, and the social sciences.

Every one with supplements and a homework system, at no extra cost, ready to adopt this semester.

Crammed to the edges

Consistent gaps

One gap value across a row of cards. Set it once on the container, not per item.

One gap value
Gaps eyeballed one by one

Alignment

Everything hangs off a shared left edge. Centred text is for hero statements, not for body copy.

Supplements
Included, always

Instructor's manual, PowerPoint decks, test banks and syllabi.

One left edge
Supplements
Included, always

Instructor's manual, PowerPoint decks, test banks and syllabi.

Three different edges

Corner radii

Soft and friendly. Nothing sharp, nothing fully round except pills and avatars.

6px
Small chips, table cells, inline tags
10px
Buttons, inputs, selects
14px
Cards and panels — the workhorse
20px
Hero surfaces and large feature blocks
Full
Pills, badges, avatars only

Elevation

Shadows are navy-tinted and diffuse — paper lifting off paper. Never black, never hard.

Hairline
Resting, inline
Card
The default
Lifted
Hover, dropdowns
Brand
Primary buttons

Page grid

Twelve columns, 24px gutters, a content column capped at 1180–1400px and centred. Text blocks never span all twelve.

Text column — 7 of 12
Supporting image — 5 of 12
Card — 4
Card — 4
Card — 4