Skyrizi(risankizumab)
Confidence
is everything
A gastroenterology brand for two conditions and one promise: that a strong start and a durable response can be shown section by section, without ever losing the reader. The chrome is fixed, the accent is single, and every screen is a variation on the same white panel over the same sky.
Read the eleven screensClient
SKYRIZI (risankizumab)
Discipline
Gastroenterology brand system
Scope
Site, data modules, study-design modals, patient stories
Presented
2026
01 — The brief
Two conditions, one spine.
A brand for a therapy used across Crohn's disease and ulcerative colitis had to carry head-to-head data, patient-reported outcomes and a device — without splitting into three different sites. The answer was structural: one set of chrome, one reading panel, and a fixed seven-part spine that every screen hangs from.
The data does the persuading, so the design's job is to keep the reading quick. Each page opens with a title that states the finding, follows with the endpoint in one line, and only then shows the chart. Nothing is set in a size that has to be hunted for, and no chart appears without its population beside it.
Colour works the same way throughout. Navy is the chrome, cyan is the action, the sky belongs to the photography, and white is where evidence is read. Only two other colours enter at all, and both of them are comparators in a bar chart.
- Conditions
- 02
- Sections
- 07
- Accent
- 01
Crohn's disease and ulcerative colitis, each with its own data set and its own badge.
Overview through to support, fixed along the bottom of every screen.
One cyan, used only where a reader is meant to act.
Three decisions
01
The chrome never moves
The top utility bar and the bottom section list are pinned to every page. Whatever the data does, the reader always knows where they are and how to leave.
02
One white panel
Evidence always sits on the same white sheet, floating over the sky photography. It reads as a document laid on a view, which is exactly what the site is.
03
Numbers before charts
Every chart is preceded by its conclusion in words and followed by the fraction it came from, so a claim can be understood before it is inspected.
02 — The campaign
The idea, outdoors, then in motion.
The headline is set in tall condensed capitals that pass behind the landscape, so the people in the photograph stand inside the word. The same idea is carried into motion below.
03 — The system
Navy holds, cyan acts, white explains.
Five colours, one grotesque, and a fixed pair of bars. The restraint is what lets a page hold three endpoints and a device shot without reading as three different templates.
Colour
Typography
Start strong
& stay strong
One grotesque again, worked in three sizes: uppercase headlines at 24 to 32 pixels for findings, 14 to 16 for the reading, and 10 for the footnotes that qualify both. Cyan underlines mark the section in view.
Components
- Fixed two-bar chrome
- White content panel over sky
- Icon-headed card grid
- Pill tab row
- Stat card with comparative bars
- Plus-to-expand endpoint
- Study-design modal
04 — Foundations
The rules behind every screen.
Type, colour, grid and icons, then the component library that assembles them.
A — Typography
One grotesque in four weights. Headings run from 56/64 down to 24/32, body from 18/28 to 16/24, and captions hold at 12/16.
- H1 56 / 64
- H2 40 / 48
- H3 32 / 40
- H4 24 / 32
- Body 18 / 28 and 16 / 24
- Caption 12 / 16
B — Colour
Four ramps of ten steps. Cyan blue for action, deep blue for chrome and headings, purple for comparators, grey for neutrals — each swatch shows its contrast scores.
- Bright blue: #00a3df at 500
- Deep blue: #004c97 at 500
- Purple: #910048 at 500
- Grey: #50535a at 500
C — Grid
An eight-column grid for the iPad app. Every module snaps to columns, and margin and gutter are fixed so cards align across screens.
- iPad app: 8 columns
- Column, gutter, margin
- Hero spans all columns
- Cards span four each
D — Iconography
A single-weight line set, drawn in pairs: black for active, grey for resting. Sized to sit inside the circular badges used in the data modules.
- Single line weight
- Active and resting pairs
- Clinical, patient and data subjects
E — Component library
Six boards cover the whole kit: menu items, headlines and footnotes, buttons and toggles, the tab system, icons and graphics, and chart elements. The cropped view first, then the full sheet.
05 — The screens
Eleven screens, one chrome.
From the cover to the patient stories: the overview, two start-strong pages, two stay-strong pages, the head-to-head, both study designs, the device and the stories. Pick one below — each frame scrolls inside itself, or open the screen at full size.
Opening
Start & stay strong
Evidence
Design & dosing
Cover
A full-viewport sky, the logotype centred, one sentence of promise, and the two choices the page exists to offer.
- The cloud photograph runs edge to edge behind the type, so the brand's optimism is scenery rather than a colour swatch.
- Two cyan buttons split the audience at the door — Crohn's data and ulcerative colitis data — before any evidence is shown.
- The navy chrome already carries the seven-section spine, so nothing below the fold can lose its place.
Scroll inside the frame — or open the screen at full size.