Darya Ponomarova · Brand system & site · Photography
A documentary photographer on a coast full of resort photographers. I built the brand system and the homepage around one rule: the photograph is the only thing allowed to be loud. Warm near-black ground, a garalde carrying the display, one accent, one duration for every state. The system is written down as an eleven-section document: measured contrasts, six hard-won rules for the scroll model, and a list of the claims that did not ship.
On evidence. Product facts come from the brand document WEB-SKILLS.md v2.0 and from the built page: tokens, scales, durations and rules are quoted as written there. The references were opened and analysed on 7 September 2026, with computed styles read straight off the live pages. Contrast is measured, not eyeballed: Playwright walks every text node, resolves its colour against the nearest painted ancestor background, and computes the luminance ratio.
Numbers.Only three figures are provable from the archive (164 sessions, 9 years, 5 cities), and only those appear. Four further claims were caught and removed (two counter figures, a “four languages” line and a start year). They are listed in Decisions below rather than hidden: on this project the deleting was the work.
One disclosure. This case page is bilingual, so the interface face here is the system's documented fallback, Inter Tight, rather than Switzer, so that both alphabets sit in one face. The display face is Cormorant Garamond, as on the site.
Brief
Darya works the Bulgarian Black Sea coast: based in Burgas, shooting out to Varna and Sozopol. Nine years, 164 sessions, from Mariupol to Burgas. The position is simple and awkward: she is a street and documentary photographer in a market shaped by resort sessions: the same poses, the same golden hour, the same grade.
Her own sentence became the brief: photograph people so they look like themselves, in the light this coast actually has, not the light the postcard promises. The tone follows from it: short sentences, concrete nouns, no adjective doing the work of evidence. Timeless, magical and capture your special moments are on a banned list, in all four locales.
The audience splits in two, and the halves barely overlap. The primary one is a Russian- or Ukrainian-speaking woman, 28–40, who lives on the coast: a relocant of one to four years, one to three sessions a year, who finds her in city Telegram groups and writes by DM, not through the form. The second is an English-speaking couple on a 7–14 day trip, googling in English one to three weeks before arrival, booking once and never returning.
The first group's top fear is “I'm not photogenic, I don't know how to pose”. The second's is “we'll look stiff, and we leave on Saturday”. The design consequences are direct: a dark ground, because it flatters photographs; DM links as prominent as the form; prices on the page, itemised; a persistent language switcher that never dumps you back to the homepage.
Research
She named three sites. I opened each and read the computed styles off the live pages (sizes, tracking, durations) instead of describing impressions. What was taken, and what deliberately was not.
The finding was not in any of the three, but between them: none of them has a brand colour at all. No accent, no signature hue: only ground, type and image.
The first version of the system followed that finding and was neutral. The second departs from it deliberately: gold is the exception the client asked for, and it is licensed narrowly. The photographs are still the colour; gold is the frame around the colour: rules, markers, one word of the wordmark, a button's border. It never becomes a field.
sessions, provable from the archive
years, and no figure beyond these
invented claims caught and removed
Screens
The name is the h1, one unit with no space between the two words: two spans, so each half carries its own style and colour. The surname is the gold italic: the one heading gold is allowed on.
Two numerals, and both are provable. A third counter is absent precisely because no evidence was found for it. Size is the hierarchy here; weight plays no part.
The native crop is preserved: squaring a portrait to tidy a row is forbidden, and the mixed ratios are the design. The column order is hand-sequenced, 7 + 7 + 7.
The site's only colour event. Gold is forbidden here (on this paper it measures 2.17:1), so the accent and the focus ring switch to warm ink, and the cursor glow is extinguished.
One primary action per screen, never two. The second, write by DM, is deliberately a text link: the primary audience writes by DM rather than through a form.
System
The whole ramp went warm: every neutral carries a yellow-red bias, so a gold accent sits inside the family rather than on top of it. No #000 and no #FFF: pure black lets dark photographs bleed into the page and lose their edge.
clamp(3.4rem, 10.4vw, 12rem)Cormorant Garamond 500 · −0.02emclamp(2.4rem, 6.4vw, 5.4rem)Cormorant Garamond 500 · 1.02clamp(4.5rem, 15vw, 17rem)Cormorant Garamond 500 · −0.05em1.5rem italicCormorant italic · always italic18px / 1.75Switzer 400 · measure 65–75ch11px / +0.32emSwitzer 500 · uppercaseCormorant at 600–700 loses its hairlines and reads as a heavy Times. So hierarchy is made by size alone: 24 → 56 → 140px and on up to 17rem. The value 700 does not exist in the system: that is the main thing it inherited from the primary reference.
Display runs at −0.02em, because a garalde at 200px is loose by default. Captions run at +0.32em, very wide. There are no 0.08em half-measures: the contrast between those two values is the typographic system.
#C8A65C gives 8.59:1 on the near-black and 2.17:1 on warm paper, where it is invisible. So on every light section the accent switches to warm ink, the focus ring switches with it, and the cursor glow is extinguished: a screen-blended gold over paper only bleaches the ground.
The polish pass collapsed a spread of 150/200/250/300ms into one variable: --tr-state: 200ms ease. An interface feels expensive when every element agrees on how fast it responds. Block reveals run 800ms, the modal and the inversion 400ms, and nothing exceeds 800ms except the loader.
The site runs a lerped scroll at 0.085 per frame: content moves by transform on a fixed wrapper. position:sticky does not work in that model at allthe wrapper is fixed and never scrolls, and sticky cannot see a transform. Every pin had to be computed in the same loop, with z-index deciding who covers whom.
Tab moves focus instantly, but a 0.085 lerp takes ~700ms to arrive, so the element was off-screen at the moment it received focus. The fix: on a Tab keydown, set snapUntil = now + 500, and inside that window the position snaps instead of lerping; a focusin handler then brings the element into view with 110px of pad, top and bottom. Result: 0 misses across 11 tab stops. Smooth scrolling is a decoration; keyboard access is not.
UI kit
The system the site is built on: colour, type, the spacing step, control states, motion. This is not a mock-up of a system: everything below is built from the same stylesheet the live site runs, so the sizes here are the sizes there.
Аа Бб Вв Гг Ґґ ДдAa Bb Cc Dd Ee Ff
A garalde with fine hairlines and a real italic character. 600 and 700 lose the hairlines and read as a heavy Times, so they do not exist in the system.
Аа Бб Вв Гг Ґґ ДдAa Bb Cc Dd Ee Ff
The site itself runs Switzer here. This bilingual case page uses the system's documented fallback instead, so one face carries both alphabets: the one disclosed substitution on the page.
DariaPonomarova
Інтерфейс, який замовкає
164
Світло падає на кожного по-різному
Знімаю на узбережжі Болгарії: Бургас, Несебр, Созополь
ФОТОГРАФ · БУРГАС
4px base unit, named space-N after the multiple. Section rhythm never drops below space-16; hero and ground inversions use space-32.
| формула | 375 | 768 | 1440 | 1920 | зараз | |
|---|---|---|---|---|---|---|
| Wordmark | 10.4vw | |||||
| Display | 6.4vw | |||||
| Counter | 15vw | |||||
| Body | фіксовано | |||||
| Поле сторінки | 4vw | |||||
| Секція | 8vw |
Window width right now: …
#0A0908основа#13110Fповерхня#EFEAE016.59:1#8F877B5.61:1#C8A65C8.59:1#FAF7F1інверсіяEvery value here is taken from the brand document and checked against the built page. The contrast ratios were measured rather than eyeballed: #7A7268 was proposed for muted text, measured 4.20:1 and was replaced by #8F877B at 5.61:1.
Decisions
A rounded frame reads as a social-media post, and this brand sells the opposite. So the 4px belongs to the frame, and the frame carries the only shadow in the system; the image itself stays square. That shadow appears on a portfolio card frame and nowhere else: depth everywhere else is made by ground value.
No duotone, no colour wash, no gradient scrim over a frame. Site-wide black-and-white was tried and rejected in one line: “Stop. Photos are black-and-white in the loader only.”Grayscale now exists in exactly one selector, .ldr__frame img, and nowhere else.
The session process was asked for as a diagram. Two animated-SVG attempts came back “cumbersome”, then “all bad”, which was the right reaction: the diagram was explaining three sentences. The section became three typographic steps and took a third of the space.
The overlay the dark version grew out of proposes a · · · divider between chapters. At this scale, three gold dots on a near-black ground read as a rendering artefact rather than a chapter break. Removed on the client's instruction: sections are separated by space and by the ground inversion, and nothing else.
Every image on the site is hers, or there is a typographic block in its place. No stock and nothing generated: “No printed photographs. This is a photographer's page.” The process section still has no imagery for this reason: the archive has no genuine behind-the-scenes stills, only a video.
Was in the content plan. On 8 September the client confirmed it is not true and nobody knows where it came from. It is a claim about named third-party magazines, so it damages exactly the trust the About page exists to build. Deleted, and never restored from the plan.
She works in three: UA, RU, EN. The site is published in four, Bulgarian included. Those are two different facts and must never be merged: a Bulgarian visitor reads the page in Bulgarian and writes to her in English.
Not supported by the archive. Three figures survived as provable: 164 sessions, 9 years, 5 cities, and the homepage carries two counters, not three.
The gear line is out of date: she shoots a Sony, model unspecified. So nothing about current gear ships until she names it. An absent line beats a wrong one.