Design system

Every colour, text style and component in Lede on one page. Change them in Assets and the whole site follows, this page included.

Colour

12 colour styles. Light value, then dark

Paper

#FFFFFF #0F0F0E

Ink

#141414 #F2F2EE

Mute

#6B6B66 #A3A39D

Line

#E7E7E3 #2B2B28

Panel

#F4F4F1 #1A1A18

Card

#FFFFFF #21211F

Highlighter

#FFE14D #FFE14D

Ink on Highlighter

#141414 #141414

Open Green

#2F8A4E #57C783

Inverse

#FFFFFF #141414

Mute Inverse

#A3A39D #6B6B66

Line Inverse

#34342F #D9D9D4

The highlighter

HighlightText, in Assets under Code

Product designer for money apps people trust.

Typed as: ==Product designer for money apps== people trust.

Wrap the words a recruiter should see in two equals signs. The marker draws across them a beat after the line scrolls into view (Draw delay sets the beat), and is already there for visitors who ask for reduced motion.

One mark per heading: the result, the role or the availability. If everything is yellow, nothing is.

Type

Host Grotesk. Sizes for desktop / tablet / phone

Display

64px / 52px / 38px

Product designer for money apps

Section Title

56px / 46px / 36px

How I work with AI

Case Title

44px / 38px / 30px

Cut onboarding drop‑off from 41% to 23%

Card Title

26px / 24px / 22px

Booking a visit in 3 taps, not 9

Heading M

20px / 19px / 18px

Research

Statement

34px / 30px / 24px

We moved the ID check after the first deposit.

Body L

19px / 18px / 17px

Four in ten people left during sign‑up.

Body

16px / 16px / 15px

An assistant groups interview notes into themes.

Article Heading

26px / 24px / 22px

What I would do differently

Article Body

18px / 18px / 17px

I would have brought the risk team into the first workshop.

Label

14px / 14px / 14px

Lead product designer

Components

In Assets, under Buttons, UI and Evidence

Read the case study

See it live

All

Fintech

Open to senior roles from November

41%

→

23%

onboarding drop-off

Jonas, product manager

Finished sign-ups are up a third since Tuesday. Keep the ID step where it is.

Jonas, product manager

Finished sign-ups are up a third since Tuesday. Keep the ID step where it is.

Email me

CV (PDF)

Rules

The grid and the few rules every page follows

Side padding

48px on desktop, 32px on tablet, 20px on phone. Content stops at 1344px.

Section gaps

120 to 140px between sections on desktop, 96px on phone. 16 to 24px inside a group.

Radius

14px on images and cards, 999px on buttons, chips and the switch.

Highlighter

Only on results, role and availability. One mark per heading, never on body copy.

Green

Only the open to work dot.

Motion

Blocks rise 12 to 40px once. The marker draws in on headings. Nothing loops.