
GSK Oncology on Demand
Website
UX/UI, Design & Creative
Color
The system is anchored by a single warm orange-to-gold gradient used for hero fields and brand moments. Solid Brand Orange drives every call-to-action and headline. Product experiences layer one accent hue on top of the neutral base — never more than one at a time.
linear-gradient(105deg, #F04E23 0%, #F7871F 50%, #FDBA2D 100%) — angle 100–115° left-to-right.Each product owns exactly one accent, paired with the shared neutral base and orange CTA. Use the accent for that product's hero bands, tile treatments and highlights — never mix two product accents on one screen.
Typography
A three-voice system: a bold condensed grotesque for headlines (uppercase, tight leading), a transitional serif reserved for the "On Demand" brand lockup, and a humanist sans for all body copy and UI.
Buttons & CTAs
CTAs are unmistakable: solid Brand Orange, uppercase Oswald label, subtle rounding, and a leading icon. On dark or photographic fields the same button holds; a lighter chip appears over gradient hero bands.
Forms & Inputs
Registration forms are single-column, generously spaced, with a full-width orange submit. Fields are outlined rectangles with in-field labels; required state uses an asterisk, italics set the "all fields required" note.
- Height: 46px · padding 13/14
- Border: 1px #C9C6C0 · radius 6
- Focus: 2px #F15A29 ring
- Label: in-field placeholder, asterisk for required
- Checkbox: 20px, 1.5px orange stroke
- Submit: full-width Brand Orange, Oswald 600
- Column: single, 12–16px vertical gap
Cards & Video Tiles
The library is built from a repeating 16:9 video tile: thumbnail image, a black caption bar with the Watch video pill, and square corners in a tight grid. Content bands and promo cards reuse the same square-cornered rhythm.
- 16:10 thumbnail, square corners
- Black caption bar, ~36px
- Play glyph + uppercase label
- Grid: 4–5 up desktop, 1 up mobile
Imagery & Photography
Warm, optimistic, real. Photography favors natural light, authentic patient and HCP moments, and shallow depth of field. Subjects are often knocked out and floated over the accent gradient. The looping-line "doodle" motif adds texture to flat brand fields.
- Use warm, natural-light patient & HCP moments
- Knock subjects out and float on the accent gradient
- Keep one product accent per screen
- Reserve the serif for the "On Demand" lockup
- Mix two product accents in one layout
- Set headlines in the body sans or lowercase
- Use cold, clinical or heavily filtered stock
- Round the video-tile corners heavily
Design Screens
The system in production — the Oncology On Demand HCP experience across desktop and mobile, with the gradient hero, video-tile library and single-column registration.