Tourism Australia · Design System
Eleven documented spacing exceptions share one cause. This is the fix: what changed in the design system today, and the front-end change that removes the exceptions.
THE CAUSE
The standard is bottom padding only — 80 desktop, 80 tablet, 56 mobile. The Spacing use cases page then documents eleven exceptions using 80, 72, 57, 56, 48, 32, 24, 20, 96 and 0, plus two free-text margin fields on Corporate Text.
But look at why they exist. Banner, Carousel, Mosaics, Image Cards and all nine Corporate components need “turn top padding on” for the same reason: a coloured background above them eats the white space.
Spacing is stored on the component, but it belongs to the boundary between two components. A component can’t know what precedes it — so the author is asked to work it out manually, every time.
Works. The gap is white, so it is visible.
Breaks. The 80 sits inside the tint, so nothing separates them.
Fixed for every combination, with no author decision.
STEP 1 · SHIPPED
Every size is flat across devices except XL, because that is how the live site behaves. The five blocks below are drawn at their true height.
The old ramp shrank on smaller screens — a design-led curve the live site does not share. At tablet and mobile the standard gap was too small by 32 and 24.
Desktop
Tablet
Mobile
Cost of the change: almost nothing
All fifteen Spacer variants take their height from these five tokens, so they resized themselves. Only three Spacers existed in the whole file, all on the Spacer’s own documentation page. The size labels printed inside each block were typed by hand and did not follow — those were rewritten, and every label now matches its own height.
What this also revealed
Components sit at zero outer vertical padding, and almost no Spacers had ever been placed. So the design system was showing no vertical rhythm at all, while live shows 80 / 80 / 56. The gap was not a wrong value — it was a missing one. That is why the ramp being wrong went unnoticed.
BOUNDARIES
| Value | Where it appears | Why it is not a size |
|---|---|---|
| 20 | Listicle ATDW card | Folded into XS at 24. A 4px difference on one component, recorded as a deviation. |
| 72 | Carousel, top | Not a gap at all — it is padding inside the tint. It belongs to the coloured variant, not between sections. |
| 96 | Itinerary, desktop | Stays owned by the itinerary segment wrapper, exactly as the use-cases page already states. |
STEP 2 · PROPOSED
Step 1 makes the design system match live. Step 2 is what actually removes the exceptions, and it needs engineering.
The container owns the gap
The parsys applies the gap between its children, defaulted per template. Because the gap sits outside both components, the coloured-background case stops existing — which removes about nine of the eleven exceptions on its own.
One field replaces five
A single control on every component —
Section spacing: Inherit · None · S · M · L · XL — replacing
Turn on top padding, Remove top padding, Add top padding, and both
External margin fields. Authors choose a name, never a number.
Inherit is the default, so templates carry the rhythm and authors only step in at real
exceptions like listicles and itineraries.
Retire the free-text margin fields
Corporate Text currently accepts typed pixel values for top and bottom margin, noted as having variations beyond the documented news-article case. While authors can type any number, no design system can guarantee rhythm.
The other route is giving all thirty-four components a bottom-padding token at 80 / 80 / 56 plus the toggles — copying the live mechanism exactly. It means editing every component, it puts “does this component know what precedes it?” back into the design files, and the eleven exceptions are themselves the evidence of where that mechanism ends up.
TO DECIDE
XS was 16, and nothing in live’s section gaps uses 16, so it moved to 24. If 16 is a deliberate micro-gap, add a sixth size and put XS back rather than remapping it.
A 4px change on one component, in exchange for one fewer size in the scale.
The use-cases page already says the segment wrapper handles it. Worth confirming so it never becomes a size.
The current AEM build, or the move to XM Cloud? It changes who does it and when.
ONE FOR ENGINEERING
The tables documentation describes a stacked mobile layout below 479px using data-th
and ::before. It is not in production: no shipped stylesheet references
data-th, and at 390px every cell reports data-th = null. Mobile scrolls
sideways instead.
Worth testing whether other documented spacing behaviour has drifted from the built site in the same way, before either step is treated as settled.