Same page, three registers. Pick the feeling — the honest content stays exactly where it is.
01What the study was
oll.in is the flagship — the Swiss/DACH job-application agent for everyday job seekers (nurses, teachers, tradespeople, care, admin, hospitality), not software engineers. The landing (ollin-pro.html) already earns its keep on content: an agent-at-work hero, an enemy comparison, Scout/Match/Prepare/Track, founding pricing, and — most importantly — an honesty architecture that is the positioning moat (no fabricated testimonials, the agent prepares while the human sends, launch-target prices, the waitlist never charges, no hosting-location claim).
What it had not settled is the look. So we ran a focused UX/UI study: hold the content and the honesty completely still, and explore three genuinely different visual registers as self-contained preview files. The output is not a redesign — it is a decision aid: three finished, clickable restyles so the flagship's aesthetic can be chosen from real pages, side by side, rather than argued in the abstract.
02The method — content frozen, style only
The discipline is what makes the study safe and the result swappable. Each direction is a pure restyle of the same page:
- Byte-identical body. The DOM, the copy, the prices, the EN/DE i18n strings, the section order and every interaction are the same in all three files. Nothing in the honesty architecture can drift, because nothing in the content was touched.
- Only the
<style>block + fonts change. Each direction rewrites the design tokens (palette, type, radius, borders, shadows, section treatment, dark mode) and swaps the font links. That is the entire diff. - Every direction is therefore a drop-in swap. Once Sam picks one, its style block simply replaces the current one on the latest full-content
ollin-pro.html— no content migration, no risk to the words. - Dark mode is a first-class deliverable. Each direction ships its own considered dark palette, not an afterthought inversion — because the flagship carries a theme toggle.
✦ Why this is the right shape for THIS page
oll.in's edge is its honest copy. Restyling by holding the content frozen means the study cannot accidentally weaken a claim, invent a testimonial, or over-promise — the exact failure a "redesign" invites. Look becomes a free variable; trust stays fixed.
03The three directions
Each is a complete, self-contained preview file in landing/. Below: the type system, the real palette (swatches are live CSS boxes, hex from the actual files), the section treatment, the dark-mode character, and who it's for.
Clean — Swiss / Modern SaaS
register: Linear / Vercel — quietly premiumQuietly trustworthy, premium. A refined grotesk on a cool neutral canvas, hairline borders and soft shadows doing the structural work, generous whitespace as the section rhythm, and exactly one confident red accent. Nothing shouts; the restraint is the message — this is a tool that has its act together.
- Type
- Inter throughout — grotesk display + body, tight negative tracking on headings.
- Section
- White cards on a near-white canvas, hairline borders + soft drop shadows, whitespace as the divider. Radius 14px.
- Dark
- Premium near-black (
#0A0A0Bfield,#ECECEFink, accent lifts to#FF5C51) — deep, not grey. - For
- The skeptical, design-literate visitor. Wins when trust = restraint and the competition looks loud.
Warm — Human / Editorial
register: magazine — on the seeker's sideHuman, reassuring, on the anxious job-seeker's side. Cream paper, a characterful serif display paired with a humanist sans, and a warm muted palette — terracotta, sage, ochre. The rhythm is a magazine's, generous and unhurried. It reads less like software and more like a letter from someone who has your back.
- Type
- Fraunces serif display (optical, a little italic character) + Nunito Sans humanist body.
- Section
- Warm cards on cream, soft long-throw shadows, large 22px radius, magazine spacing — nothing hard-edged.
- Dark
- Candlelit: warm amber glow over dark walnut (
#1A130Cfield,#F4EAD9ink) — never cold. - For
- The nervous, discouraged seeker. Wins when the emotional job is reassurance, not a spec sheet.
Bold — High-contrast
register: stops the scroll · certainMemorable, certain, scroll-stopping. Oversized uppercase display (the hero pushes toward ~92px), Swiss-red colour-blocking with whole inverted colour-field sections, thick ink borders and hard "sticker" offset shadows, chunky uppercase buttons. It doesn't ask for attention; it takes it. The most opinionated of the three.
- Type
- Fraunces oversized (hero to ~92px, uppercase) + Inter chunky uppercase UI. Maximum display contrast.
- Section
- Thick ink borders (borders are ink, not hairlines), hard 6px offset "sticker" shadows, tight 6px radius, and full inverted colour-field sections that flip the palette.
- Dark
- Dramatic: a deep near-black field (
#080605), light ink borders, red lifted to#FF4133— high-theatre. - For
- Cold traffic that needs to remember you. Wins on a crowded feed where a quiet page scrolls past.
At a glance
| Direction | Type | Feeling | Wins when… |
|---|---|---|---|
| A · Clean | Inter grotesk | Quietly premium | trust = restraint; rivals look loud |
| B · Warm | Fraunces + Nunito Sans | Human, reassuring | the job is emotional reassurance |
| C · Bold | Fraunces XL + Inter caps | Certain, memorable | cold feed; must stop the scroll |
04How to view them
The three directions are local preview files, not deployed site/ pages — so they can be flipped through quickly without touching production. They live in the working tree at landing/ and are served locally on :8140:
Local previews · landing/ · :8140
▸ ollin-pro-clean.html — Direction A · Clean / Swiss
▸ ollin-pro-warm.html — Direction B · Warm / Editorial
▸ ollin-pro-bold.html — Direction C · Bold / High-contrast
▸ ollin-pro.html — the current full-content flagship the chosen style will apply to
Open each, toggle its dark mode, scroll the whole page — the copy is identical every time, so the only variable your eye is judging is the look.
05Recommendation — decision pending
The look is a genuine choice, not a default — so this stays open for Sam.
The study's job is done: three finished, honest, swappable directions exist as clickable pages. The three registers are real trade-offs, not gradients of the same thing — Clean reads most premium and lowest-risk; Warm best matches oll.in's actual audience (anxious everyday seekers who need reassurance, not a SaaS spec sheet); Bold travels furthest on a cold, crowded feed.
Leaning: for this audience the emotional job is reassurance, which points at Warm — with Clean the safe premium fallback. But this is a taste call on the flagship's face, so it's Sam's. Whichever he picks, applying it is mechanical: the chosen direction's <style> block + font links replace the current ones on the latest full-content ollin-pro.html. The content — and the honesty moat — never move.
ollin-pro.html, then the flagship follows the launch sequence in the launch kit and the order-of-record in the Backlog. The landing's conversion logic and honesty architecture are decoded in the landing case study.