Solo practice
No team, no content calendar. Everything on the page has to keep working unattended.
The site is built and live; its copy, palette and type scale are quoted from the source. The research instruments are real; participant quotes and any figures here are reconstructed exemplars that show method and the shape of a finding, not measured outcomes.
The brief
One page, and it has to do the work of a waiting room.
The practice is one therapist. There is no funnel to optimise and nobody to answer a chat at midnight: the page is the whole first encounter.
Role
Sole designer, from the first interview to the built page
No team, no content calendar, no one to hand a stage to. Everything below is mine, and the only other person on the project was the therapist herself.
Team around me1 designerThe therapistNobody else
- 01ResearchDesk research, review coding, interviews
- 02Content designEvery line, written against the clichés
- 03Design systemColour, type, space and motion as tokens
- 04InterfaceTwelve sections, one page, one action
- 05BuildOne page, no framework, no third-party runtime
12sections, one page
2typefaces, no third
1action on the whole site
No ad budget
People arrive from a search or a recommendation, already halfway convinced or halfway gone.
A private decision
It is taken alone, usually late, and usually without telling anybody. The page is the only thing in the room.
Research
Five instruments, six people.
Enough to learn why every practitioner site reads the same, and what a person is actually checking for before they write.
practitioner sites read
Desk research
reviews coded
Review mining
people who had looked for a therapist
Interviews
versions of the promise line
Message test
screens read aloud
Reading pass
In their words
Five lines that set the tone.
“I read four sites and closed all four. They said the same three words.”
“I did not want a plan. I wanted to know she would not be shocked.”
“The price was never the problem. Writing the first sentence was.”
“Every single one had a photo of a chair and a notebook.”
“I needed to know what happens if I fall apart at two in the morning.”
Interface
Four screens of the site.
390
Home
The promise stands in the first line (say the thing you have never said out loud), and the only action is fifteen free minutes.
390
What people come with
The topics named plainly, including the ones usually left off such a page: sex, self-worth, boundaries.
390
Approach
Written against the clichés rather than around them. No gratitude journals, no have-you-tried-meditating.
390
How a session runs
The mechanics before the commitment: where the hours come from, how supervision works, what happens in a crisis.
390
The close
The page closes not with a pitch but with one sentence about what the person has already carried alone, and with the same single action as the hero.
Design system
Bone, ink, and one red.
Colour, type, space and motion as tokens, with the contrast decisions written down beside them, because that is where the palette was actually settled.
Bone 200ground
Bone 300raised
Ink 900text
Ink 450muted
Red 800primary
Red 500accent
Display
clamp(38px, 5.4vw, 152px)Playfair Display 400/500H2
clamp(29px, 3.9vw, 72px)Playfair Display 400Lede
clamp(19px, 1.5vw, 28px)Inter 400Body
clamp(17px, 1.05vw, 20px)Inter 400 / 1.75Label
13px / 0.14emInter 600, uppercaseContrast decided the palette, not taste
Ink 400 measured 4.14:1 on the page ground, under AA. Ink 450 replaced it everywhere muted text appears, and Ink 400 was kept for hairlines only. Red 500 gives 2.88:1 on ink, so it lives on inverted surfaces only.
Cyrillic display type wants neutral tracking
The alphabet is stem-heavy, ш щ и п н м, and a Latin-tuned −0.025em jams the verticals into each other at headline sizes. Tracking stays at −0.008em, and goes negative only on the h1.
One ease for every hover
A single shared 200 ms ease covers every hover and focus state on the site; reveals run at 900 ms and the one cinematic move at 1600 ms.
UI kit
The system the site stands on.
Colour, type, space, control states. Not a mock-up: everything below is set in the same faces and sizes the live site uses, and the table shows how those sizes change from 375 to 1920.
Typefaces2 faces
Аа Бб Вв Гг Ґґ ДдAa Bb Cc Dd Ee Ff
Playfair Display
- Role
- Display, headings, counters
- Weights
- 400 and 500, and not a gram heavier
- Character set
- Cyrillic + Latin + tabular nums
- Tracking
- −0.012em, negative on h1 only
A transitional with real contrast between thick and thin: it gives the page an age a grotesque cannot fake, and at 152px it still has hairlines.
Аа Бб Вв Гг Ґґ ДдAa Bb Cc Dd Ee Ff
Inter
- Role
- Body, ledes, labels, controls
- Weights
- 400 · 500 · 600
- Character set
- Cyrillic + Latin
- Tracking
- 0, and +0.14em on the uppercase labels
Deliberately neutral: it must not compete with the serif. Its job is to be read at 17–20px over 1.75 line-height and disappear.
Typographylive specimens
Say the thing you never said
Five lines that set the tone
Therapy about sex, depression and anxiety
I work in an evidence-based modality, under supervision
TOPICS · FIRST STEP
Space and padding4px grid
8pt grid. Nothing lands between values: the four small steps do component spacing, the three large ones do rhythm.
s1
s2
s3
s4
s5
s6
s7
s8
s9
Responsive375 → 1920
| formula | 375 | 768 | 1440 | 1920 | now | |
|---|---|---|---|---|---|---|
| Display | 5.4vw | |||||
| H2 | 3.9vw | |||||
| Lede | 1.5vw | |||||
| Body | 1.05vw | |||||
| Page margin | 4vw | |||||
| Section | 8vw |
Window width right now: …
Colourmeasured
Ink 900
#16110F13.1:1Ink 450
#6E685C4.98:1Bone 500
#C6C3B5linesBone 200
#F5F4EEbaseRed 800
#3B0D0E16.1:1Red 500
#B4242AaccentControlsreal states
Buttons
Book a calldefault
Book a callhover
See how it runsghost
See how it runsfocus
Book a calldisabled
Fields
Name
Name
EmailLeave an address so I can reply
Depth and focus
rest
−2px + shadow
2px, offset 3
Every value here is taken from the site's own code. The contrast ratios were measured rather than eyeballed: every text node was checked against the background it actually sits on.
Decisions
Six calls, and what each one cost.
Name the taboo topics
Sex, self-worth and boundaries are written on the page instead of being folded into “relationships and stress”. Naming them is the point: a person recognises their own case and stops wondering whether it counts.
One action, and it is cheap
Fifteen free minutes, and you may hang up. No booking flow, no price list at the top, no form asking what is wrong before anyone has said hello.
No chair, no notebook
The stock imagery of therapy was cut entirely. Typography and space carry the tone instead, because the pictures were the thing people said made every site look the same.
Supervision as a fact
That a senior colleague reviews the work every month is stated plainly, in its own section, without a badge or a certificate wall.
A block that sends people away
If it is dangerous right now, the page says so and points elsewhere. A practice site that keeps a person in a crisis on the page is doing harm.
The questions people are ashamed to ask
The FAQ is written from what people actually wonder and do not type: how much, how long, what if I cry, what if I have nothing to say.
Principles
Six findings, six rules.
Sameness reads as risk
Say the specific thing firstThe barrier is the first sentence, not the fee
Make contact cost as little as possiblePeople check for a reaction, not a method
Show the tone before the credentialsUnnamed problems feel disqualified
Name them plainlyMechanics calm people more than promises
Answer the practical question earlySafety has to be handled off the page
Route a crisis outward, immediately