All work

Arivin Therapeutics

Biotech websiteRedesign2026

The whole science,
rebuilt to be read

Arivin develops antibacterial therapeutics that disarm bacteria instead of killing them. It is a mechanism that needs a paragraph to explain, and the paragraph is the product. I kept every word of the company's existing content and gave it a sequence — the question, the mechanism, the evidence, the pipeline, the people — then built the thirteen pages, the design system behind them and the motion that carries the argument.

Visit the live site

Built as a working site, not a prototype: real content, real forms, real pages.

Role
Product designer, end to end
Focus
Information architecture and narrative
Delivered
IA, 13 pages, design system, motion, build
Method
Content audit, identity manual, scenario mapping
Stack
Design tokens, GSAP, Lenis, static build
Arivin home page: a researcher photograph opening through a cluster of hexagons, with the headline over it.

A biotech company is judged on credibility long before it is judged on design. Nobody funds a mechanism they could not finish reading.

Keep every word,
change the order

A full audit of the existing site, the company's identity manual and its scientific publications — then a decision about what each page is for.

The brief was a redesign with a brand new visual language, and the hard constraint was content parity: nothing the company had written could be dropped. That is the right constraint for biotech. Investors, partners and hiring scientists all read the detail, and a site that summarises the science away stops being useful to the people it has to convince.

So the work was not about the amount of text. It was about what the reader is asked to do with it. Arivin's mechanism is counter-intuitive — the therapy disarms bacterial virulence rather than killing the cell, which is what keeps resistance from developing. Until that idea lands, every number further down the page is unreadable.

I built the site around that single sequence: pose the question, show the mechanism, back it with peer-reviewed evidence, then the pipeline, the alliance, the team. Each block exists to make the next one make sense, and the detail sits exactly where a reader would go looking for it.

What the audit decided

  • A page needs a reason to existEighteen candidate pages came out of the content. Thirteen shipped. A topic gets its own page only when it outgrows a homepage block, or when it is a list that keeps growing — news, publications, openings.
  • Lists must survive successFive news items today, fifty next year. News, publications and openings became filtered index pages with their own article pages, so nothing has to be pruned to keep a layout working.
  • Contact is navigationFor a company this size, contact is one of the two things most visitors came for. It went back into the menu and got a working form with a confirmation page.
  • Every state is a designNo open positions, an empty filter, a wrong URL, a submitted form. Each one got a written screen instead of a dead end.

Same content,
new sequence

The shortest way to show the work is the same page twice. On a computer keep scrolling, on a phone drag the handle, and the earlier one gives way — both carry the company's own text and photography; what changed is the order, the hierarchy and the depth of the detail behind each step.

The redesigned Arivin home page.
The earlier Arivin home page.

Before Arivin Therapeutics, home page. Same content, same photography, same company. After

BeforeThe page opened on the wordmark and the tagline, with the science set out in the sections below. The mechanism was reachable, and it arrived after the reader had already decided whether to keep going.

AfterThe page opens with the question the therapy answers, then the mechanism, then the evidence. The statement is still there — it now lands on a reader who knows what Arivin does.

Science page

The earlier science page: a single column of explanatory text.

Science, beforeA heading, a strip of decorative hexagons and one column of blue text. Everything is present, but nothing says which sentence matters most.

The redesigned Our science page: a photograph hero with the company's statement, then the dual-target section in two columns.

Science, afterThe same page opens on the company’s own sentence, “We do not target bacterial survival”, over a photograph, and the dual-target explanation follows as a heading and a reading column instead of one block of blue text.

Pipeline page

The earlier pipeline page: programme stages as a text list.

Pipeline, beforeProgrammes and their stages written out as text, with the stage named in each line.

The redesigned pipeline: each programme as a labelled progress indicator.

Pipeline, afterEach programme is an indicator positioned at its real stage, so a visitor can see how far the portfolio has come without reading a single row. The numbers animate from the values in the content, not from decoration.

13pages, from eighteen candidates — every one with a job the homepage could not do
100%content parity: nothing the company had written was dropped
4written states — thanks, empty list, no openings, 404 — instead of dead ends
AAcontrast on every text-and-surface pair in the system

The home page,
top to bottom

The argument in the order a sceptic needs it: the question, the problem, the turn, why it lasts and the pipeline. Scroll to walk it.

  1. 01The questionFuture-Proof antimicrobial therapies to halt resistant infections: the claim and one action before the fold.
  2. 02The problemResistance develops faster than we can develop treatments: three numbers, the size of the problem and the two forces behind it.
  3. 03The turn and the mechanismWhat if we stopped trying to kill bacteria? A pathogen attacks with one hand and shields itself with the other; the therapy binds the weapon and breaks the shield at the same time.
  4. 04Why it lastsBuilt to withstand the test of time: potency against resistant pathogens, and minimised resistance development.
  5. 05The pipelineThree programs against the WHO top-priority pathogens, each shown at its real stage.
arivin.netlify.app
The question: Future-Proof antimicrobial therapies to halt resistant infections: the claim and one action before the fold.
arivin.netlify.app/#problem
The problem: Resistance develops faster than we can develop treatments: three numbers, the size of the problem and the two forces behind it.
arivin.netlify.app/#turn
The turn and the mechanism: What if we stopped trying to kill bacteria? A pathogen attacks with one hand and shields itself with the other; the therapy binds the weapon and breaks the shield at the same time.
arivin.netlify.app/#future-proof
Why it lasts: Built to withstand the test of time: potency against resistant pathogens, and minimised resistance development.
arivin.netlify.app/#pipeline
The pipeline: Three programs against the WHO top-priority pathogens, each shown at its real stage.

Three calls
and their cost

Every one of these bought something and gave something up. Writing down the second half is what makes the first half a decision.

01

Hexagons, not a 3D molecule

A rotating molecular render was the obvious move for a biotech site, and it was prototyped. The hexagon cluster from the company's own mark does the same job — geometry that reads as science — and it is the brand rather than a stock idea of it.

Cost. No literal molecule anywhere on the site. In exchange the first screen runs at full frame rate on a phone and weighs kilobytes instead of megabytes.

02

Thirteen pages, not eighteen

Topics that fit inside a homepage block stayed there — the mechanism, the pipeline, the alliance, the team. Only growing lists and genuinely deep subjects got a page of their own, which keeps the menu to five entries plus contact.

Cost. The homepage is long, and it leans on a menu that stays reachable the whole way down. The alternative was a navigation no visitor could hold in their head.

03

One piece of theatre, then restraint

The intro is the only animation allowed to take time. Everything after it is short and functional: text setting in lines, counters running to their real values, indicators filling to the stage a programme has actually reached.

Cost. Visitors who land on an inner page never see the signature moment. The scientific content is what they came for, and it loads immediately.

A system
from the manual

Arivin had an identity manual and no design system. I built one out of it — 122 tokens that every page is assembled from, so nothing on the site is a one-off value.

122design tokens — colour, type, space, radius, easing. No raw value appears anywhere else.
5tints of Arivin Blue, taken from the five hexagons of the logo at 100 to 20 per cent
14spacing steps on a 4px base, plus named tokens for section padding and the gap under every heading
2typefaces — Archivo for display, Lato for text — on one fluid scale of fourteen sizes

Colour

Five tints, and they are the logo

The ramp is not picked to look good next to the photographs. It is the five hexagons of the mark, taken from the identity manual at 100, 80, 60, 40 and 20 per cent, so the brand and the interface are the same five values.

#1a4ec4Primary action, links, the one colour allowed to lead
#4871d080 % — hover, and the second cell of the mark
#7695dc60 % — indicators and the active stage of a programme
#a3b8e740 % — bullets, rules, quiet marks on dark
#d1dcf320 % — tinted surfaces behind text, never text itself

Surfaces

Four surfaces, and one of them is for a single number

Sections alternate between dark and light the whole way down the page. Every text colour in the system is approved against each of these four, including the scrim ramp that sits over photographs.

ink#060a14 — dark sections
ink-soft#0c1322 — raised on dark
sheet#f6f6f6 — light sections
alarm#80094d — the resistance figure, nowhere else

Type

Archivo to say it, Lato to explain it

Fourteen sizes on one fluid scale. Components are not allowed to set a size of their own, so a heading is the same heading on all thirteen pages. Shown here at the desktop end of each clamp.

display-xlArchivo 700 · clamp(38 – 62)

Future-Proof therapies

display-lArchivo 700 · clamp(32 – 54)

Section headline

display-mArchivo 600 · clamp(26 – 36)

Sub-section

titleArchivo 600 · 21 px

Card title

body-lLato 400 · 19 px

Lead paragraph. Arivin targets bacterial virulence, not bacterial survival.

bodyLato 400 · 17 px

Running text. Binding toxins and breaking down biofilm without driving new resistance.

body-sLato 400 · 15 px

Caption and meta, used under figures and in list rows.

creditLato 400 · 13 px

Photography Mikko Raskinen, Aalto University

Space

Fourteen steps on a 4 px base

Two named tokens sit on top of the scale and carry the rhythm of the whole site: the padding of a section and the gap under every heading. That is why the air is the same in all thirteen pages, and why the inside of a block is always tighter than the gap between blocks.

2
4
8
12
16
20
24
32
40
48
64
80
120
160

Components

One button, four surfaces

No uppercase anywhere in the system, and no monospace — including on buttons and chips. The pill is the only shape, and which variant appears is decided by the surface underneath it, not by importance.

Explore our science On light On dark Ghost

The brand module

One shape draws the logo, the aperture and the bullets

The five hexagons of the logo are the only vector graphic on the site. The same coordinates draw the mark, the opening aperture of the first screen and the bullets in lists — so nothing on the page is a decoration someone added.

w 1.1547 w
Cell
Pointy-top hexagon, width w
Height
w × 1.1547
Row offset
w / 2
Vertical step
0.866 w
Cells
Five, one per tint of the ramp

What it forbids

Enforced, not documented

A design system that lives in a document drifts within a month. This one is checked by a linter that fails the build, which is why the site still matches it.

  • No raw valuesA hex, a pixel padding or an easing written anywhere outside the token file fails the build. If a value is needed, it becomes a token first.
  • No font sizes in componentsSize comes only from a scale class, so a card cannot invent a heading one step smaller than every other card.
  • No unregistered motionEvery appearing element names a motion preset that must exist in the registry. Animation added because it was possible does not pass.
  • No uppercase, no monospace, no spacersNot in buttons, not in chips, not as empty elements used to push things apart. Distance comes from the gap of a container.
The Arivin design system sheet, rendered from the project's own stylesheet.
The specification page, as rendered

The whole specification is one page

Ten sections — principles, colour, type, layout, components, motion, accessibility, the rules above, and a section written for the tooling that builds from it. It renders straight from the stylesheet the site is built from, so it cannot drift: change a token and the page changes with it.

Open the design system

Nothing is cut
on a phone

Two thirds of the traffic to a company site like this arrives on a phone, so mobile was designed next to the desktop, not after it. Every section keeps all of its content and its motion. What changes is the rhythm and the controls — three decisions below.

Arivin home page on a phone.

Intro, at phone speedThe aperture runs the same seven beats at nearly double rate, so the menu is reachable in under two seconds.

The mechanism block on a phone, stacked into one column.

Mechanism, stackedThe two-column comparison becomes two surfaces one above the other, each still visibly its own side of the argument.

The team rail on a phone with arrow controls beneath the photographs.

Team, scrollableThe pinned rail becomes a native swipe with arrows sitting right under the photographs, so it is obvious what they move.

See the whole thing
running

Visit the live site

Thirteen pages, working forms and every state written. Opens in a new tab.

Previous project

PDA Architecture — concept redesign

A Paris practice made readable to investors in one minute

Next project

Studio Leaf — plant e-commerce

A plant shop rebuilt around the conditions customers actually have

Reach out

Email LinkedIn CV

Helsinki, Finland

Authorized to work in Finland

Open to product roles