One source of truth for how the studio looks, moves and sounds. Everything on the site is wired to these tokens and classes. Change them here, change them everywhere.
01
Design ethos
The principles underneath every decision. They guide what we make and how it behaves, not just how it looks.
Transdisciplinary
Design, engineering, strategy and AI as one craft, held whole, never passed down a line.
Biophilic
We borrow the grammar of living systems: growth, networks, rhythm, adaptation. Things that grow and last.
Ethical & positive AI
AI to amplify human craft, with consent and transparency, never to deceive or extract.
Nourishing, not extractive
We choose work that gives more than it takes, for people, teams and the planet.
Restraint
Quiet surfaces, few colours, generous space. Let the work breathe and the content lead.
Motion with intent
Reveal on entry, gentle living backgrounds. Never decorative jitter, always honouring reduced-motion.
02
Tone of voice
How we write, across headlines, body copy, micro-labels and email. Warm, precise, unhurried.
Do
Plain-spoken and warm. Write like a thoughtful person, not a brand.
Precise over clever. Short sentences, concrete nouns.
Confident, not loud. No hype, no exclamation marks.
Curious and generous about the work and the people.
Shouting: ALL CAPS sentences, !!!, growth-hack urgency.
03
Colour
A warm, low-chroma palette in two themes. Every value is a token that flips between light and dark, so never hardcode a colour, reach for the token. Swatches below show the current theme.
--bg-0
Base background
#0b0a08 · #f3efe6
--bg-1
Raised / band
#100e0b · #ebe6da
--bg-2
Hover / inset
#16130f · #e3ddce
--fg
Primary text
#f1ede5 · #171410
--fg-dim
Secondary text
#a39d92 · #5b554b
--fg-faint
Tertiary / micro
#8a8479 · #67625a
--accent
Accent / links
#d9c9b0 · #7a5f33
--line
Borders / rules
13% fg · 16% fg
04
Typography
Schibsted Grotesk for everything visible (var(--font-display) / --font-body), a monospace stack (var(--font-mono)) for micro-labels, nav and controls. No serif. Sizes are fluid clamp() steps, exposed as CSS tokens (--text-display … --text-body) — the single source of truth; components reference these, never hardcoded sizes.
Lead — Intro / lead paragraphsvar(--text-lead) · 19 → 24px
The interesting problems don’t fit inside one discipline.
Body — Body copyvar(--text-body) · 16 → 17px
We work across design, engineering, strategy and AI as a single craft.
Caption — Small print / metavar(--text-caption) · 13 → 14px
Small print, fine details and meta.
Mono label · 11px · 0.16em
Generative · live in browser
05
Buttons & controls
One global .ui-btn system powers the hero and the closing banner alike: round .ui-btn-icon buttons and labelled .ui-btn-pill buttons, themed entirely via tokens. They live on dark, immersive surfaces, shown here on a dark panel.
.ui-btn · -icon · -pill · .on/.voted
06
Pills, links & tags
Page-level actions and metadata. .pill (with .pill-solid / .pill-ghost / .pill-lg), the animated .linku underline and its .link-cta variant, and the .tag chip.
Pills
Let’s collaborateView allSend message
Links
An underlined linkView case study →
Tags
TransdisciplinaryBiophilicWeb AudioGenerative
07
Motion
GSAP-driven entry reveals plus living generative backgrounds. Motion is purposeful and calm; everything degrades gracefully and pauses off-screen, and all of it honours prefers-reduced-motion.