Arrieta Kohl
ENES
Book a call

Style guide

The Delta system.

Colour, type, motion and components. Every colour is a CSS custom property and every size a token on the --fs-* scale: change one and the whole site follows.

Colour

  • Paper#F3F2EEBackground
  • Paper 2#E8E7E0Alternate sections
  • Ink#121415Text, dark sections
  • Muted#575C60AA 6.2:1
  • Lime#C9F24DThe river, primary action
  • Lime ink#3F5500Lime on paper (AA)
  • Clay#E0784ATax, warnings
  • Stone#9CA29ACosts in charts

Type · IBM Plex Sans + IBM Plex Mono, no italics

  • Display · 500 · 184/120/54 px · −5.5%

    Know where.

  • Page title · 500 · 152/96 px

    Six services.

  • H2 · 500 · 96/40 px · −4.5%

    Numbers you can check.

  • H3 · 500 · 30/22 px

    Monthly bookkeeping

  • Lead · 400 · 22/18 px

    Take one or all of them.

  • Body · 400 · 17 px / 1.6

    Every transaction coded, reconciled and closed by the 5th working day.

  • Mono label · 500 · 13 px · +8%

    Where a year goes

Motion · one curve, one direction, three durations

Appearopacity 0→1, y 24px, blur 6→0 · 0.7 s · stagger 60 ms
Line-by-line headingseach line rises from its mask · 0.9 s · 80 ms
Image revealbottom-up mask + scale 1.08→1 · 0.9 s
Counters0→value in 1.6 s on enter
Sticky sectionprocess title stays; the step in view turns dark
Scroll wordsthe manifesto lights up word by word
Hover0.4 s · arrows +4px, images 1→1.05, rows +12px
Page transitionink veil with a lime edge wiping up · 0.5 s
Reduced motioneverything visible, nothing moves, the river draws without dots
Curvecubic-bezier(.2,.7,.1,1) · spring 220 / 30

Components

PrimaryInkLineSmallArrow link
GlassTag
TagEyebrowCategory8 September 2026
Accordion open

Answer with a limited reading width.

Accordion closed

—