Arrieta Kohl · Template help

First steps (about 20 minutes)

Brand: change “Arrieta Kohl” in the Header and Footer components. The mark is a three-line SVG: replace it with yours.
Colours: edit the Color Styles (Paper, Ink, Lime, Clay). Lime is the only accent; if you change it, check the contrast of text on top.
Photos: all 32 share one grade. To make yours match, run them through tools/grade.py or apply the same look (−14% saturation, lifted blacks, fine grain).
Figures: every number in the demo is fictional. Find them by the “illustrative” notes and replace or remove them.

Home sections and what to edit

#	Section	What to edit
01	Hero	Photo (Hero BG), headline, lead, two buttons, faces and rating. The mini river card uses the first preset in data/river.json.
02	Trust	Three certifications and eight logos (SVG). They’re fictional: add yours or remove the row.
03	The river (signature)	Code component. Presets, tax rate and colours in data/river.json. Can be switched off.
04	Manifesto	One paragraph, one photo and a signature.
05	Services	Collection list of Services.
06	Results	Four counters and the case with its SVG chart.
07	Industries	Horizontal rail from the Industries collection.
08	Process	Four steps; the title is sticky.
09	Testimonials	Three quotes with photo, name and business.
10	Pricing	Plans collection; the yearly toggle charges 10 months out of 12.
11–12	Team, insights	Lists from Advisors (4) and Insights (3 latest).
13	FAQ	Six questions in an accordion.
14	Booking	A booking form; swap in your scheduling tool’s embed.
—	Footer and giant wordmark	The wordmark sizes itself to the column width for any name (cqi units). Address, phone and hours live in the Footer component.

CMS collections (6, connected)

Each file in data/ is one CMS collection. Text fields have an en and an es version. References link collections together. Every field is described in data/CMS.md.

Collection	Page	Fields	References
Services (6)	service.html	slug, number, name, summary, intro, image, alt, includes[], outcome, priceFrom, cadence	advisors → Advisors, industries → Industries
Industries (6)	industry.html	slug, name, summary, intro, image, alt, challenges[], stat {value, unit, label}	services → Services
Advisors (6)	advisor.html	slug, name, role, bio, quote, image, alt, focus[], languages[], since, email	services → Services
Insights (5)	article.html	slug, title, dek, date, minutes, category, image, alt, body[] (p, h2, list, quote, chart)	author → Advisors, service → Services
Resources (6)	resources.html	slug, title, summary, format, file, kind	service → Services
Plans (3)	pricing.html	slug, name, for, monthly, featured, tag, features[]	—

The river: options

js/river.js is an isolated module. It reads data/river.json and accepts per-element overrides with data-river-enabled, data-river-variant and data-river-options (JSON). Without JavaScript, or with enabled: false, the static table with the same figures shows instead.

Option	Value	Effect
enabled	true · false	Turns the piece off; the static table remains.
variant	live · static	static draws the first preset once, with no controls or moving dots.
taxRate	0.25	Single illustrative rate on positive profit.
currency · locale	EUR · en-IE / es-ES	Currency and number format.
colors	revenue, costOfSales, people, premises, other, tax, kept, shortfall	One colour per stream.
presets	label, revenue, costOfSales %, overheads %, split {people, premises}	The example businesses in the selector.

Maths: profit before tax = revenue − cost of sales − running costs; tax = profit × rate when positive; yours = profit − tax; with a loss, the shortfall enters bottom-left. Every width is proportional to money.

Example: static variant, other colours, “shop” preset

Languages

Every string has its translation next to it (data-es in HTML and es fields in the CMS). Add ?lang=es to any page to see it in Spanish.

Changelog

1.0 · 26-09-2026 — First release: 18 page templates, 6 collections, the river, EN and ES.