Kaupapa Auaha

Design system

The single source of truth for the Te Kāhui Rongoā website. Colour, type, components, and the rules the writing follows. This is a reference export, built 2026-09-17 from the live source. If you're building on it, start with DESIGN.md.

Start here

The files

Everything is plain text or plain HTML, fetchable directly. No build step, no framework.

DESIGN.md

The full design and build spec. The look, every named component, build conventions, and what's still open. Read this first.

styles.css

The complete stylesheet, every component the site uses. The real source of truth, not a description of it.

tokens.css

Just the :root custom properties, if all you need is colour, type and rhythm.

style-guide.html

The system rendered: swatches, the type scale, and every component shown working.

homepage.html

The Kāinga page built from this system. A worked example of the real layout: hero, bands, cards, footer. Copy is a draft.

llms.txt

Plain-text entry point for a coding agent. What's here and what not to break.

Colour

Palette

Real hex sampled from the TKR logo suite. Tākawa orange is still provisional and needs the brand file. Clean light base, green as the accent, dark-green bands used sparingly for impact.

--ngahere
#1C3213

deep forest green: headings, dark bands, footer

--koromiko
#598D3F

accent green: buttons, links, accents

--koromiko-dark
#47732F

hover / active

--takawa
#E08A3C

orange, sparingly (provisional, no brand hex yet)

--bone
#FDFAE0

brand cream

--white
#FFFFFF

--ink
#1F2A16

body text on light (warm near-black green)

--ink-soft
#5E6A52

muted meta text

--line
#E8E4D3

hairline borders

--line-strong
#D8D2BE

--bone-tint
#F1F5EC

faint green wash

Type and rhythm

The rest of the tokens

Montserrat for body, Space Grotesk for headings, both from Google Fonts. Square corners throughout, hairline borders rather than soft shadows.

Token	Value	Role
`--font`	`"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`
`--display`	`"Space Grotesk", "Montserrat", system-ui, sans-serif`	headings
`--measure`	`60ch`
`--maxw`	`1140px`
`--gutter`	`clamp(1.25rem, 5vw, 3rem)`
`--section-y`	`clamp(4rem, 9vw, 7.5rem)`
`--radius`	`0`	square corners throughout
`--radius-sm`	`0`
`--shadow-hover`	`0 10px 30px rgba(23,61,48,.09)`

Non-negotiables

Rules you must not break

Te reo Māori headings, English body. No language toggle. Macrons correct everywhere: Kāhui, Rongoā, Pānui, Whakapā, Mō Mātou, Uru Mai, mātauranga, kaitiaki.
"Your rohe", never "a rohe". A rohe is something a practitioner belongs to.
No em or en dashes anywhere. Full stops, commas and spaced hyphens only.
Clean light look. A deliberate departure from the dark brand deck, at TKR's request. White and bone-cream base, green accent, dark-green bands for impact only.
Cultural copy is a draft until a named kaitiaki or mana whenua signs it off. All rongoā and mātauranga wording leans on TKR's own approved brand-deck language.
Mobile-first. It must look great on a phone before it looks good on a desktop.
Use the tokens. Don't invent colours, fonts, radii or spacing. Change a token and the whole site follows.