Design system — colourstokens.css + brand.css
lemonPrimary accent — buttons, headings on dark
olivePrimary shade — chips, overlays
forestPrimary dark — backgrounds
slateSecondary dark — backgrounds
cobaltAccent — tooltips, selected states
cornflowerAccent tint — pop-up text, link hovers
greyNeutral — light backgrounds
soft-greyNeutral — off-white wash
whiteNeutral — background
soft-blackNeutral — dark background

Backgrounds may only be forest, slate, grey, black or white. Lemon and olive are for titles, buttons and pattern overlays. Cobalt and cornflower are attention accents only — tooltips, pop-up text and selected states — never decoration.

Design system — typographyis-style-* classes in style.css

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Caption / eyebrow text

Text regular — body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Text small — secondary information

Design system — buttonsbutton variants in style.css
Design system — tooltips & pop-ups.tooltip in patterns.css (accent blues, brand guide p13)
Turn off the power first If the wiring doesn't match, pause here

The blues are reserved for tooltips and pop-up guidance — cobalt pill for inline hints and step markers, white card with cornflower text for safety call-outs. One short sentence max (the brand guide pairs these with the Graphite alert face; the prototype substitutes Stack Sans). Never use the blues for backgrounds or decoration.

Design system — brand-device section stylesassets/web/*.svg + style.css (brand guide pp13–14)
forest-tileDefault patterned background — brand-mark grid
forest-linesCalm curve linework — heroes
forest-flowOrganic movement — statement panels
forest-lines-lemonLoud statement — use sparingly
forest-wordmarkBrand moments — banners, panels
gradient-forestGradient statement — use sparingly

Brand-device backgrounds from the guide's Brand Devices, Colour Usage and Gradients pages. All are dark styles: h1/h2 render lemon (white on the lemon-linework and gradient variants), other text white. In WordPress each registers as a group block style; the SVGs live in the theme's assets folder.

home-heropatterns/home-hero.html → patterns/home-hero.php

DIY Friday

Your Kiwi DIY partner

Trusted guidance, compliant solutions and quality products — so you can get stuck in with confidence.

page-heropatterns/page-hero.html → patterns/page-hero.php

Eyebrow label

Page title goes here

One or two sentences of intro copy that set up the page. Placeholder text sized for a realistic intro paragraph.

feature-gridpatterns/feature-grid.html → patterns/feature-grid.php

Why us

Three reasons to believe

Feature one

Short supporting sentence describing the first benefit.

Feature two

Short supporting sentence describing the second benefit.

Feature three

Short supporting sentence describing the third benefit.

product-grid + product-cardpatterns/product-grid.html + patterns/product-card.html — Woo block DOM

Products

Featured products

contact-formpatterns/contact-form.html → form plugin in WP
section-ctapatterns/section-cta.html → patterns/section-cta.php

Call to action

Ready to get started?

Closing copy that nudges the visitor toward the primary action. Placeholder sentence for now.