The layout builder assembles pages from blocks. This page shows each one on its own, so the set can be approved before any schema is written. Existing blocks are marked built; the rest are proposals.
The design language has three moves, and every block is composed from them: bento tiling (unequal cells at 22px radius), soft pink #F4DEE2 for reassurance, and dark plum #2A2226 for anything that must not be missed.
Fourteen registered blocks need no code changes. They just need the real content pointed at them: supportHero, helpDoors, cardGrid, aboutSplit, accordion, iconTabs, trustBar, textImageChecklist, contactBlock, ctaBanner, noticeBanner, newsIndex, archive, membershipIntro / membershipCheckout.
Fourteen patterns the live content genuinely needs and nothing existing can express, plus one new variant of a CTA that already exists. Full field schemas are on the block spec.
journeyPhases
The four scheme phases with a “you are here” state. A four-cell bento row: completed phases on soft pink, the current phase as the plum tile that anchors the row, upcoming phases plain white with a hairline.
schemeSteps
The flagship. Numbered steps with a portal-status chip, body copy, and an inner two-cell bento — admin on the neutral band, reassurance on soft pink — so the paperwork and the human help are visibly separated.
Two of the required documents come from Revenue and catch people out — both take a few days to issue.
pageAnchorNav
“On this page” for the long evidence pages. A sticky rail on desktop, a scrolling pill row on mobile. Pills sit on soft pink at rest and flip to plum when their section is in view.
pagerNav
Previous / next through an ordered sequence. Two half-width cards in one bento row, with the standard −4px hover lift.
timeline
Year-grouped, newest first, for The Science and the EU pages. Sticky year in rose, event cards joined by a hairline with rose dots, and a soft-pink sub-panel for the critique or limitation.
comparisonList
Covered versus not covered. Uses the two poles of the palette deliberately — but the distinction is carried by the heading and the glyph too, never by colour alone.
calloutBox
A page-level aside. 16px radius — deliberately under card scale so it reads as a note, not a section. Four variants, all mapped to existing tokens.
Neutral note on the alternate band. Used for context and definitions.
Soft pink. Reassurance, limits honestly stated, help-before-caveats.
Plum with an inset rose bar. Deadlines, appeal windows, anything with a cost to missing it.
Positive status, using the success token as a dot rather than a fill.
crisisBanner
The helpline strip. Solid rose pills on plum — the one deliberate exception in the system, and the heaviest thing on any page it appears on. The audit’s loudest finding was that this pathway rendered at 2.9:1 with no focus ring.
Free, open now, and you do not need to be in crisis to call.
supportDirectory
Grouped service listings — the mental-health page needs eight of these groups, and the scheme hub needs one. Bento tiles with contact rows using the existing icon registry; alternating groups sit on the neutral band so a long page keeps its rhythm.
peopleGrid
An asymmetric bento: the TD as one large feature card beside a 2×2 of councillors. Queries the proposed People collection, or takes a hand-picked selection — the same pattern archive already uses. Shown in full on the Our people page.
Donegal County Council
Donegal County Council
pullQuote
Resident testimony and campaign lines. Three tones — plain white by default, warm pink when the moment calls for it, plum for campaigning — so the registers never blur. The mark behind the text is the Tabler quote glyph, not a typographic quote character.
I started with just one phone call a week.
A homeowner in Letterkenny
It felt good just to be heard by someone who knew exactly what we were going through.
A homeowner in Carndonagh
Homeowners did nothing wrong.
100% Redress Party
references
Citations and further reading. Reuses the article prose style’s leading-zero numerals, and sits on the neutral band so it reads as an appendix rather than body copy.
keyFigures
Generalises the hero’s plum stat tile into a row of two to four. One cell can invert to soft pink to break the rhythm — the same asymmetry the hero uses.
mediaBanner
A full-bleed photograph with a scrim and copy over it — for the moments the argument is carried by an image of a real Donegal home rather than by a card. Two treatments from one block: static holds still, parallax drifts the media against the scroll. Scroll this page to see the difference.
Treatment: static
Treatment: parallax
Transform-based, not background-attachment: fixed — that is ignored on iOS and cannot be turned off per element. The drift is disabled outright under prefers-reduced-motion.
ctaBanner — deep red variant
Not a new block: a third style option on the CTA that already exists, alongside plain and panel. Deep rose fill, buttons inverted to rose-on-white. For the one CTA per page that has to outrank everything else on it.
€10 a year. No corporate money, no special interests, every euro accounted for.
Compare with the plum panel style at the foot of the home page — plum is the default, deep red is the escalation.
Two blocks are finished and staged on /debug but not registered in the layout builder. They need promoting, not building.
A choropleth of Ireland showing affected counties, with a legend and figures table. Belongs on the About page and beside the eligibility content.
Grant estimate against the statutory rates, with the shortfall against real rebuild cost. Belongs on the scheme hub. Shown in place on Applying to the scheme.
Breadcrumbs belong in the page templates rather than the layout builder — they are derived from the page tree, not authored. Shown at the top of every deep page in these mockups.