# Te Kāhui Rongoā — Website Design File Single source of design + build truth for the TKR site, written to be **built as code by Claude Code** (static HTML + CSS, no bundler), not in Webflow or AI Studio. If you are a coding agent: build straight from this file. Copy for each page section lives in the content deck `../brainstorms/2026-07-20-tkr-website-PROMPTS.md` (Parts B to F). This file owns the look, the components and the build conventions; that file owns the words. **The look is agreed visually in `style-guide.html` first.** That is a living page (noindex) that renders the real tokens and every named component from `assets/styles.css`. Lock the design language there before skinning pages, and keep it in sync when the system changes. Open it in a browser to review; iterate by editing the `:root` tokens and component CSS in `assets/styles.css`, which the whole site (and the guide) inherit. Date started: 2026-08-03 · Phase 1 target live: **31 Oct 2026**. --- ## 0. Non-negotiables (read first) - **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, spaced hyphens only. Fix the deck's dashes when copying lines across. - **Clean light / white look.** A deliberate departure from the dark brand deck, at TKR's request. White and Bone-cream base, green as the accent, dark-green bands used sparingly for impact only. - **Cultural copy is a DRAFT** until a named kaitiaki / mana whenua signs it off. All rongoā and mātauranga wording leans on TKR's own approved brand-deck language to stay safe. - **Mobile-first.** It must look great on a phone before it looks good on a desktop. --- ## 1. Stack and conventions Mirror the sibling `connecthub-site/` in this repo: - **Pure static. No bundler, no framework, no build step for hand-built pages.** Plain `.html` files plus one central stylesheet. - **All design tokens are CSS custom properties** at the top of `assets/styles.css` (`:root { ... }`), exactly like `connecthub-site/assets/styles.css`. Change a colour or a font in one place, the whole site follows. - **Deploys to Cloudflare Pages** (same as connecthub-site). - **Repeated / phased content uses a data file plus a small build script**, the way connecthub-site generates `industries/.html` from `_data.mjs`. Use this for **Pānui** posts now, and for **Ngā Rohe / Trustees / Jobs / Resources** in later phases. Generated pages are never hand-edited; edit the data file and rerun the script. Proposed folder layout (create as you build): ``` tkr-site/ DESIGN.md this file index.html Kāinga (Home) mo-matou.html About uru-mai.html Join panui/ News (listing + generated posts) index.html _data.mjs post data whakapa.html Contact assets/ styles.css :root tokens + all component CSS js/ tiny progressive-enhancement scripts only img/ tohu, pattern, plant icons, photography scripts/ build-panui.mjs generates panui/.html from _data.mjs ``` **Tradeoff to keep James honest about:** a code build is the fastest path for us and needs zero manual Designer steps, but TKR cannot self-edit it without Hono (or without us adding a lightweight CMS later). That is acceptable because Hono maintains the site inside the retainer and Pānui runs off a data file. If TKR self-editing becomes a hard requirement, revisit. --- ## 2. Brand tokens **Core greens + cream are now the REAL brand hex, pulled from the logo suite SVGs (`assets/tkr-logo-suite/`). Tākawa orange has no brand hex yet, still provisional.** Live values are in `assets/styles.css` `:root` (authoritative); this table is the reference. | Token | Role | Hex | |---|---|---| | `--ngahere` | Deep forest green. Headings, dark feature bands, footer. | `#1C3213` (real) | | `--koromiko` | Accent green. Primary buttons, links, tohu accents. | `#598D3F` (real) | | `--koromiko-dark` | Hover / active state for Koromiko. | `#47732F` | | `--takawa` | Orange. Sparingly, odd highlight or secondary action. | `#E08A3C` (provisional) | | `--bone` | Brand cream. Soft section backgrounds. | `#FDFAE0` (real) | | `--white` | Default page background. | `#FFFFFF` | | `--ink` | Body text on light (warm near-black green). | `#1F2A16` | | `--line` / `--line-strong` | Hairline borders, card edges, form fields. | `#E8E4D3` / `#D8D2BE` | | `--bone-tint` | Very light green wash. | `#F1F5EC` | ```css :root { --ngahere: #173D30; --koromiko: #3C8A57; --koromiko-dark: #2E6E44; --takawa: #E08A3C; --bone: #F4EFE4; --white: #FFFFFF; --ink: #1D2B24; --line: #E4DECF; --bone-tint: #EFF3ED; /* type */ --font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* body + labels */ --display: "Space Grotesk", "Montserrat", system-ui, sans-serif; /* headings */ /* rhythm */ --maxw: 1120px; /* content container */ --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(3.5rem, 8vw, 6.5rem); --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(23,61,48,.06), 0 8px 24px rgba(23,61,48,.06); } ``` **Contrast rule:** never body text on a mid green. Text is `--ngahere`/`--ink` on light, or `--bone`/`--white` on the `--ngahere` feature bands. Check any Tākawa button keeps AA contrast (use `--ink` text on Tākawa, not white). --- ## 3. Typography Two typefaces: **Space Grotesk** for headings (`--display`; characterful geometric sans, chosen July 2026, macron support confirmed) and **Montserrat** for body, labels and kickers (`--font`). Hotlinked from Google Fonts for now; self-host the woff2 before production. Weights: Montserrat 400/600/700, Space Grotesk 500/600/700. This deviates from the deck's "Montserrat throughout"; James chose a characterful heading face during the style-guide pass. > The live token values are in `assets/styles.css` `:root` (rendered in `style-guide.html`), > which is authoritative. The snippet in section 2 is the seed and may have moved (e.g. corners > are now fully square, `--radius: 0`, after the "sharper minimal" pass). - **Bilingual headings (te reo at rest, English on hover).** Section headings rest in te reo Māori and reveal the English on hover, with a solid highlight block (Ngāhere on light, Koromiko on dark bands). This replaced the old English-kicker pattern (Aug 2026). Both languages are in the DOM (te reo first), so screen readers and touch devices still get both (English shows as a subline on touch). Highlight padding is the `.bi:hover` box-shadow spread. Use the `.bi` component, **te reo span first**: ```html

Hei WhakaūWhat we offer

``` The `.eyebrow` kicker still exists for band/hero labels, just not for section headings. - **Scale** (fluid, mobile-first): - Hero display: `clamp(2.25rem, 6vw, 4rem)`, 700, line-height 1.05 - H2 section head: `clamp(1.6rem, 3.5vw, 2.4rem)`, 700 - H3 card head: `1.25rem`, 700 - Body: `1.0625rem`, 400, line-height 1.6, `max-width: 62ch` for reading columns - Eyebrow: `.8rem`, 600, uppercase, letter-spacing `.12em`, colour `--koromiko` - Small / meta: `.9rem`, colour `--ink` at 70% opacity --- ## 4. Named components Build these once as CSS classes and reuse by name. Section prompts in the content deck refer to them by these names. - **`.btn-primary`** — solid `--koromiko` fill, white text, `--radius` corners, generous padding (`.85rem 1.5rem`), 600 weight. Hover `--koromiko-dark`. This is "Join your rohe". - **`.btn-secondary`** — transparent fill, `--koromiko` 1.5px border and text. Hover fills `--bone-tint`. - **`.feature-band`** — full-bleed `--ngahere` section, `--bone` text, the tohu reversed to Bone, optional faint kōwhaiwhai pattern. Used for the Purpose band and the global CTA band. Use sparingly, this is the only place the site goes dark. - **`.icon-card`** — white card, `--line` border, `--radius`, `--shadow` on hover. A green plant or line icon, `--ngahere` heading, `--ink` body. - **`.quote-block`** — large `--ngahere` quote on a `--bone` background, generous padding, a small green rule or koru mark. Used for the ohāki. - **`.form-block`** — clean bordered form area on white; fields with `--line` borders, `--radius-sm`; labels above inputs; a single `.btn-primary` submit. Holds the ConnectHub embed (see section 8). - **`.chip`** — small pill (rohe names, filter tags): `--bone` fill, `--ngahere` text. - **`.plant-strip`** — a centred row of five plant line-icons with labels, wraps on mobile. Layout helpers: `.container` (`max-width: var(--maxw)`, side `--gutter`, centred), `.section` (vertical `--section-y`), `.grid-2` / `.grid-3` / `.grid-5` (responsive `auto-fit minmax` grids that collapse to one column under ~640px). --- ## 5. Global header and footer **Header (`.site-header`, fixed + transparent, minimal):** - Just the **logo (left) + a hamburger (right)**. Everything else lives in a full-screen menu. - **Transparent over the hero, solid white on scroll** (JS toggles `.is-scrolled` past 40px). Logo is the green lockup by default; over a dark hero (`.over-dark` on Home) or with the menu open it flips to the white lockup, and the hamburger bars go Bone. Set `data-header` for the JS. - **Full-screen overlay menu** (`.nav-menu`, `data-nav-menu`): Ngāhere green with the kōwhaiwhai pattern, big te reo nav links that stagger in, a Bone "Join your rohe" button and Member login. The hamburger (`data-nav-toggle`) animates to an X; Esc / link-click / toggle closes it; body scroll locks while open. Nav labels in te reo: **Kāinga · Mō Mātou · Uru Mai · Pānui · Whakapā**. - **Home hero is `100vh`** video; the transparent header overlays it. Inner-page heroes carry extra top padding to clear the fixed header. **Footer (`.site-footer`, on `--ngahere`):** - Tohu reversed to Bone; one-line purpose "To make rongoā Māori available to everyone who needs it."; contact is **email only** (`tekahui@rongoamaori.org.nz`) — TKR is a virtual org, **no phone, no address**; socials (Facebook "Te Kāhui Rongoā", Instagram "tekahuirongoa"); charity **CC47624**; a Member login link; `© Te Kāhui Rongoā`; optional `Website by Hono` credit `[confirm]`. **Global CTA band (`.cta-band`, reused at the end of most pages):** a `.feature-band` with te reo heading "Uru mai ki tō rohe", line "If you are a rongoā practitioner, join your rohe and become part of the national network.", and a `.btn-primary` "Join your rohe". Omit on Uru Mai itself (or point it at Whakapā there). --- ## 6. Locked brand copy (design-critical strings) Use these verbatim. Fuller per-section English body is in the content deck. Cultural copy stays a draft until kaitiaki sign-off. - **Hero line (Home):** "We do not speak for rongoā, we serve it." / sub: "Our role is to create pathways, not control them. Te Kāhui Rongoā is a national network of rohe protecting and growing rongoā Māori across Aotearoa." - **Purpose (Aronga):** "To make rongoā Māori available to everyone who needs it." - **Mission (Whāinga Matua):** "Secure funding to break barriers, helping rohe to preserve rongoā Māori, grow its practitioners, and expand access to its healing, without ever diluting its mana." - **Vision (Te Anamata):** "A future where every New Zealander values rongoā Māori, trusts its kaitiaki, and benefits from its healing, for this generation and the next." - **The ohāki (quote block):** "To move as allies, not owners. To open doors, but never gates. To heal Aotearoa in a way that strengthens Māori first." - **Values (Mātāpono):** Kaitiakitanga, Manaakitanga, Kotahitanga, Tino Rangatiratanga (each has an internal and external line on the About page, see deck C4). - **What we offer (five):** Training, Resources, Mentoring, Networking, Reporting. - **Five plants:** Kawakawa, Harakeke, Mānuka, Koromiko, Kūmarahou. --- ## 7. Phase 1 pages (IA skeleton) Full section copy in the content deck Parts B to F. Section order per page: - **Kāinga / Home (`index.html`)** — Hero → Ko wai mātou → Aronga band (`.feature-band`) → Hei Whakaū 5 icon cards → plant strip → Ngā Rohe snapshot (chips, "directory coming soon") → Mātāpono row → Join band → Pānui teaser (latest 3) → global CTA band → footer. - **Mō Mātou / About (`mo-matou.html`)** — Hero → Our story → Purpose/Mission/Vision → Mātāpono 2x2 (internal + external) → What we stand by (4 truths) → ohāki quote block → Structure diagram → Trustees teaser (Phase 3 placeholder) → CTA → footer. - **Uru Mai / Join (`uru-mai.html`)** — Hero (+ "Join your rohe" scrolls to form) → Who can join → What you get → How it works (3 steps) → registration form block (ConnectHub embed) → Questions pointer → footer (skip Join CTA here). - **Pānui / News (`panui/index.html`)** — Hero → post-card grid (from `_data.mjs`) → optional filter chips → single-post template (generated) → optional subscribe band (decide first) → CTA → footer. - **Whakapā / Contact (`whakapa.html`)** — Hero → enquiry form (ConnectHub embed) → details (email only + CC47624, no phone/address, virtual org) → "looking for your rohe" pointer → socials → CTA → footer. Later phases (data-file + build-script): P2 Ngā Rohe + Events + Pātai, P3 Trustees + AGM reports + Jobs, P4 Shop + Resources, P5 find-a-practitioner directory. --- ## 8. ConnectHub integration points - **Join form (Uru Mai):** embed the ConnectHub practitioner registration form in the `.form-block`. Confirm fields (full name, email, phone in **+64** format, rohe, practitioner details, consents) and the rohe/trustee approval workflow. - **Contact form (Whakapā):** embed the ConnectHub contact form in a `.form-block`. - **Member login:** header link out to the ConnectHub members portal URL `[confirm]`. - **Pānui:** posts run off `panui/_data.mjs` and the build script. If TKR wants posts authored in the ConnectHub blog instead, we pull them at build time later. Start with the data file. - **Timeline dependency (highest risk):** the ConnectHub CRM + portal migration sits at **Jan 2027**, after the Oct 2026 launch. If the registration workflow and portal are not live at launch, **soft-launch Uru Mai as a plain lead-capture form** processed manually, and **soft-state Member login** until the portal is ready. --- ## 9. Imagery, logo and pattern (real brand assets) Master files live in `assets/tkr-logo-suite/` (Logo, Icons, Pattern, social-media). The web-optimised copies actually used by the site are in `assets/img/`: - **Logo:** `img/logo/tkr-landscape-green.svg` (header, on light; the **Invert** lockup = Ngāhere green wordmark, readable on white), `tkr-landscape-wht.svg` (footer, on dark), `tkr-tohu-green.svg` (tohu mark). NB the **Colour** lockup is mostly cream (`#fdfae0`) for dark/coloured backgrounds, so it is NOT used on the white nav. Favicon `assets/favicon.svg` is the real green tohu (Thumbnail Dark Grn). Suite also has Portrait/Primary lockups + Blk variants. - **Plant icons:** `img/icons/{harakeke,kawakawa,koromiko,kumarahou,manuka}.svg` (green, `Icon-Grn-*`). Cream colourway (`TKR Icon-*`, `#fdfae0`) is in the suite for dark backgrounds. Note: Harakeke reads as a triangular flax fan (the "maunga"-looking one). - **Pattern (Kawakawa Pātiki kōwhaiwhai):** `img/pattern-overlay.svg` = cream-on-transparent overlay for **dark bands / images / video, bottom-right, no-repeat** via the `.pattern-br` class (see `styles.css`). The supplied `pattern-overlay.png` exported blank (flat grey), so use the SVG. `assets/tkr-logo-suite/Pattern/Pattern.png` is the green full-field tile for other uses. Note (Aug 2026): the SVG's `viewBox` was tightened to the artwork (`1951.859 0 1889 2160`) — it had been exported on a 16:9 canvas with the motif in the right half and transparent padding on the left, which made `cover` crop it or render it too small. Placements now render it as a **full-height vertical strip down the right edge**: a box stretched top-to-bottom (`top:0; bottom:0`), one column wide (`width: min(...)`), `background-size: 100% auto` with `repeat-y` so the motif tiles up/down (never sideways) and covers the whole block (`.pattern-br::after`, `.nav-menu::after`). - **Photography:** authentic Aotearoa native-plant imagery (kawakawa especially), bright and fresh for light backgrounds. Prefer **Truestock**; NZ Story toolkit as a credited fallback. Rohe/practitioner/whenua photography only when approved (mind tapu). - **Home hero image:** `assets/img/hero-kawakawa.jpg` (the brand's Kawakawa Pātiki 1920x1080, ~140KB), a full-bleed `object-fit: cover` background via `.hero--image` (image → dark Ngāhere scrim for legibility → content). **No separate pattern overlay on the hero:** the pātiki motif is already in the image, so a second layer doubled it up. Text/buttons flip to Bone. Replaced the earlier autoplay video (`assets/video/hero-kawakawa.mp4`, now unused) on 3 Sep 2026. --- ## 10. Build order 1. Scaffold `assets/styles.css` with the `:root` tokens and the named components (section 4). Self-host Montserrat. 2. Build the header, footer and CTA band as shared markup (hand-copied partials, or a tiny include step, keep it simple). 3. Build **Kāinga** section by section from deck Part B. This proves every component. 4. Build Mō Mātou, Uru Mai (form placeholder), Whakapā. 5. Stand up `panui/_data.mjs` + `scripts/build-panui.mjs`, generate the listing + a sample post. 6. Wire ConnectHub embeds, Member login link, favicon. 7. Polish pass: proofread against section 0 (no dashes, macrons, "your rohe"), check contrast, test on a phone, run Lighthouse. 8. Domain: keep `rongoamaori.org.nz`, 301-redirect old WordPress URLs, deploy to Cloudflare Pages. Kaitiaki / mana whenua sign-off on cultural copy **before** publish. --- ## 11. Open swap-ins and dependencies - [ ] Confirm exact brand hex (Ngāhere, Koromiko, Tākawa, Bone) from the brand files, swap in `:root`. - [ ] Tohu files (primary green-on-light, reversed, tohu-only favicon), kōwhaiwhai pattern, five plant icons, five substantiator icons, Montserrat woff2. - [ ] **The 12 confirmed rohe names** (James: there are **12**) + a map. Feeds the Home snapshot, the Uru Mai rohe dropdown, and the Phase 2 Ngā Rohe page. - [x] Contact: **email only** (`tekahui@rongoamaori.org.nz`). TKR is a virtual org, no phone/address. - [ ] ConnectHub: registration form + fields + approval workflow, contact form, members portal URL, Pānui source decision. - [ ] **Kaitiaki / mana whenua sign-off on all rongoā and mātauranga copy before publish.** - [ ] Decide: public "subscribe to pānui" list, yes or no. - [ ] Confirm founding history / milestones for the About story. - [ ] Optional footer credit "Website by Hono", yes or no. Related memory: `project-tkr-website-rebuild`, `project-tkr-billing-model`, `feedback-no-em-dashes`, `feedback-deliverables-dark-mode` (does not apply here, this is TKR's own light brand site).