Skip to contact

Brand & design system

The Loop.

Build → ship → learn → repeat. One idea, one mark, two signal colours. Everything on this page is live code from the site.

01 /Logo

The mark is the process.

An infinity loop in two halves: cobalt for build, lime for ship. On screen, a white signal travels the loop. Keep clear space equal to the height of one loop on every side; never rotate, outline or recolour it outside the tones below.

wohnmohr
wohnmohr
wohnmohr
wohnmohr app icon

02 /Colour

Mostly ink and paper. Signals, sparingly.

Roughly 90% ink and paper, 10% signal. Lime marks the one thing to do next; cobalt marks things you can click. Tokens live in src/styles/brand.css.

  • Ink

    --ink · #0B0D10

    Primary dark surface. Text on paper.

  • Paper

    --paper · #F3F4EE

    Primary light surface.

  • Lime

    --lime · #C6F432

    The ship signal. Main action on ink, highlights. Never as text on paper.

  • Cobalt

    --cobalt · #2B5BFF

    The build signal. Links and actions on paper.

  • Fog

    --fog · #A0A7B2

    Secondary text on ink.

  • Graphite

    --graphite · #4A515C

    Secondary text on paper.

03 /Type

Grotesk to shout, mono to label.

  • Display XL

    Space Grotesk 700 · clamp 44–88px · −4.5%

    Keep shipping.

  • Display L

    Space Grotesk 700 · clamp 36–68px · −4%

    Build. Ship. Learn.

  • Display M

    Space Grotesk 700 · clamp 28–44px · −3%

    One job, done properly.

  • Body

    Inter 400 · 16–18px · 1.6

    Small, sharp software for real everyday jobs.

  • Label

    JetBrains Mono 500 · 12px · +14% · uppercase

    01 / Products

04 /Components

Pills, labels, markers.

On paper

01 /Section label

Put a marker on one word.

On ink

01 /Section label

LiveEarly access

05 /Motion

Everything moves like a loop.

  • Signal: one bright point travelling a path—the loop comet, the logo dot, the scroll bar.
  • Rise: headlines slide up out of a mask, line by line.
  • Ease:cubic-bezier(0.22, 1, 0.36, 1) — fast out, soft landing. 180 / 420 / 800ms.
  • Respect: all motion stops for people who set reduced motion.
01 Buildthe smallest useful thing02 Shipto real people, early03 Learnthen go round again

06 /Voice

Say the job, not the jargon.

Short sentences. Concrete verbs. Name the thing people get. No “leverage”, no “revolutionise”, no “AI-powered” as a selling point on its own.

  • SayMake ads from a link.

    NotLeverage AI-powered creative synergies.

  • SayWho owes whom in seconds.

    NotRevolutionise your group finance experience.

  • SayWe’ll tell you what’s not worth saving.

    NotWe deliver best-in-class holistic solutions.