Internal · v1
Kayuda design system
The tokens, typography and primitives we use across the site. Edit tokens in src/styles.css and they cascade everywhere.
Colour palette
OKLCH tokens. Reference by semantic name (primary, accent, muted) — never hex.
Typography
Fraunces for display & headings, Inter for UI & body. Mobile-first sizes scale up at sm/md.
Display · font-serif
Plantation teak.
H1 · font-serif
Traceable from forest to floorboard
H2
Built for the British outdoors
H3
Why Colombian teak performs
Body — large
Tectona grandis grown on responsibly managed Colombian plantations delivers consistent grain, predictable colour and a clean chain of custody — without touching natural forest.
Body — base
Kiln-dried to 8–12% moisture, milled to spec, packaged for export. Prices in GBP, ex. VAT unless stated otherwise.
Eyebrow / overline
Knowledge center · Grades
SectionHeading
Reusable eyebrow + heading + lede block. Use at the top of every major section.
Why teak
A timber that ages, but doesn't quit.
Class 1 durability, natural oils, dimensional stability — the reasons teak has been the marine and architectural standard for centuries.
Centred variant
One species. Many forms.
Logs, sawn timber, decking, FAS boards and finished pieces — all from the same traceable supply.
Buttons
Primary action uses teak honey. Secondary uses forest or outline. Sizes: sm / default / lg / xl.
Badges
Short status pills. Use sparingly — one badge per card, max.
Container
Wraps page sections with consistent gutters and max-width. Sizes: sm / md / lg / xl. Padded: none / sm / md / lg.
Cards
Three patterns: product card, info card, KPI card. All use rounded-2xl + soft shadow.
Decking
Radius & shadow
Two shadow tokens, four radius steps.