Psychotherapy practice site | Anton Dvorianinov

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.

12sections, one page

2typefaces, no third

1action on the whole site

Solo practice

No team, no content calendar. Everything on the page has to keep working unattended.

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.

0024

practitioner sites read

Desk research

0160

reviews coded

Review mining

026

people who had looked for a therapist

Interviews

035

versions of the promise line

Message test

0412

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.”
P2

“I did not want a plan. I wanted to know she would not be shocked.”
P5

“The price was never the problem. Writing the first sentence was.”
P1

“Every single one had a photo of a chair and a notebook.”
P4

“I needed to know what happens if I fall apart at two in the morning.”
P6

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

Displayclamp(38px, 5.4vw, 152px)Playfair Display 400/500

H2clamp(29px, 3.9vw, 72px)Playfair Display 400

Ledeclamp(19px, 1.5vw, 28px)Inter 400

Bodyclamp(17px, 1.05vw, 20px)Inter 400 / 1.75

Label13px / 0.14emInter 600, uppercase

Contrast 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.

Гарнітури2 faces

Аа Бб Вв Гг Ґґ ДдAa Bb Cc Dd Ee Ff

Playfair Display

Роль: Дисплей, заголовки, лічильники
Ваги: 400 · 500, і ні грама вище
Набір: Кирилиця + латиниця + tabular nums
Трекінг: −0.012em, у мінус тільки на h1

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

Роль: Текст, ліди, мітки, контроли
Ваги: 400 · 500 · 600
Набір: Кирилиця + латиниця
Трекінг: 0, і +0.14em на капіталізованих мітках

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.

Типографікаlive specimens

Displayclamp(38px, 5.4vw, 152px)lh 1.02 · −0.012em · 400

Скажіть те, що не казали

H2clamp(29px, 3.9vw, 72px)lh 1.04 · −0.012em · 400

Пʼять реплік, які задали тон

Ledeclamp(19px, 1.5vw, 28px)lh 1.6 · Inter 400

Терапія про секс, депресію і тривогу

Bodyclamp(17px, 1.05vw, 20px)lh 1.75 · міра 65–75 знаків

Я працюю в доказовій модальності, під супервізією

Label13px+0.14em · uppercase · Inter 600

ТЕМИ · ПЕРШИЙ КРОК

Простір і падінги4px grid

8pt grid. Nothing lands between values: the four small steps do component spacing, the three large ones do rhythm.

Адаптація375 → 1920

The sizes are fluid, not stepped: one formula covers 375 to 1920, and the table shows what it gives at each width.
	формула	375	768	1440	1920	зараз
Display	5.4vw
H2	3.9vw
Lede	1.5vw
Body	1.05vw
Поле сторінки	4vw
Секція	8vw

Window width right now: …

Колірmeasured

Ink 900#16110F13.1:1

Ink 450#6E685C4.98:1

Bone 500#C6C3B5лінії

Bone 200#F5F4EEоснова

Red 800#3B0D0E16.1:1

Red 500#B4242Aакцент

Контролиreal states

Кнопки

Записатисьdefault

Записатисьhover

Подивитисьghost

Подивитисьfocus

Записатисьdisabled

Поля

Імʼя

ПоштаВкажіть адресу, щоб я змогла відповісти

Глибина і фокус

спокій

−2px + тінь

2px, офсет 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 first

The barrier is the first sentence, not the fee

Make contact cost as little as possible

People check for a reaction, not a method

Show the tone before the credentials

Unnamed problems feel disqualified

Name them plainly

Mechanics calm people more than promises

Answer the practical question early

Safety has to be handled off the page

Route a crisis outward, immediately

Research: Desk research, review coding, interviews, message testing, reading passes
Content design: Every line on the page, in Ukrainian, written against the clichés
Design system: Tokens for colour, type, space and motion, with the contrast decisions recorded
Build: One page, no framework, no third-party runtime