Template — Style guide
The system behind the site.
Colour tokens
Background
#F2F4F5 — Page
Surface
#E6EBEE — Bands, chips
Surface Raised
#FAFBFB — Cards
Line
#D2DADF — Borders
Text
#3B4650 — Headings, body
Text Muted
#76828C — Secondary copy
Accent
#6A8BA0 — Details
Accent Deep
#46667B — Italic accents
Accent Soft
#CBD8E1 — Numerals
Glow
#A9C6D8 — Accents on Ink
Ink
#182127 — Dark blocks
Ink Raised
#212C34 — Cards on Ink
Ink Line
#33424D — Borders on Ink
On Ink
#E3E9ED — Text on Ink
On Ink Muted
#93A3AE — Muted on Ink
Type scale
Switzer for display and headings, Geist for reading and labels. All styles scale automatically on tablet and phone.
Display
Switzer Medium · 80 / 64 / 46
Heading 1
Switzer Medium · 52 / 46 / 36
Heading 2
Switzer Medium · 40 / 34 / 29
Heading 3
Switzer Medium · 30 / 26 / 23
Heading 4
Geist Medium · 22 / 20 / 19
Heading 5
Geist Medium · 18 / 16 / 16
Lead
Geist · 16 / 14 / 14
Body
Geist · 13 / 12 · 150%
Body Small
Geist · 11 / 10
Label
Geist Semibold · 11 · Uppercase
Clinical development
Quote
Switzer · 30 / 26 / 22
Stat
Switzer Medium · 76 / 64 / 52
Card Title
Switzer Medium · 26
Twelve months back on an oncology timeline
Card Lead
Switzer Medium · 22
Still deciding? A 20-minute call usually settles it.
Metric
Switzer Medium · 36
−12 mo
Metric Small
Switzer Medium · 28
16 weeks
Price
Switzer Medium Italic · 26
from CHF 45k
Ticker
Switzer Light · 24
Hypotheses become protocols
Logo Text
Switzer Medium · 24
Swissmedic
Numeral XL
Switzer Medium · 200 / 150 / 110
404
Accent (inline style)
Mark words as inline code → italic Accent Deep, Glow on Ink. Heading 1 Inverse and Heading 1 Centered serve dark and centered headers.
Six disciplines. One standard of evidence.
Buttons & components
Code component
Fade Slideshow
Crossfading photo loop with a slow drift zoom. Leave Images empty to cycle the built-in photo series.
Code component
Liquid Menu
Burger button with a full-screen WebGL menu: a stepped square-cell reveal and grid-dissolve image previews that follow the cursor.
Code component
Curved Gallery
Infinite WebGL slider on a curved stage with inertia dragging, digital row slicing and hover depth. Works the same with mouse, touch and keys.
Code component
Distort Image
Image with a technical cell-shift hover: grid tiles step away from the cursor and pixelate. Scroll reveal and parallax included. Bind it to any CMS image field.
Code component
Count Up
Animated statistic that counts when scrolled into view.
Code component
Smooth Scroll
Inertia scrolling for the whole site. Pauses automatically while the menu is open.
Components
Every repeated block is a component. Reuse instances instead of rebuilding blocks from frames. Variants named Stacked, Tablet or Phone belong on the narrower breakpoints.
Section Header
Opens every content section. Mark the accent phrase as inline code — the Accent style renders it in italic Accent Deep (Glow on Ink). Light CTA uses the dark Primary button. Use the Stacked variants on Tablet and Phone.
Why not simply hire a larger firm?
Page Intro
First section of every inner page: Display title with an accent, a lead paragraph and a Distort Image photo. Pick the Desktop, Tablet or Phone variant per breakpoint.
Quote Banner
Full-screen photo with a large quote between sections. Quotes start with an en dash. Pick the Desktop, Tablet or Phone variant per breakpoint.
Plan Card
Pricing card for dark sections. Highlight marks the recommended plan. Feature Count shows 1–6 feature lines.
2–4 weeks
Diagnostic Sprint
from CHF 45k
A sharp, partner-led assessment of one critical decision.
Evidence & gap review
Expert panel (up to 4)
Decision memo & read-out
Quarterly
Programme Advisory
from CHF 38k / month
An embedded senior team that stays with your programme.
Named partner & specialists
Monthly steering read-outs
Agency meeting preparation
Unlimited ad-hoc questions
On demand
Board & Investor
Bespoke
Independent scientific counsel for boards and investors.
Red-flag review in 10 days
Full technical diligence
Stat
Count-up figure with a caption. Place 2–4 in a grid with a 1px gap and Line fill — the gap draws the dividers on every breakpoint.
Agency interactions prepared
Programmes delivered on time
Specialists in our expert network
Feature Card
Icon, title and text on Ink. Place in a grid with a 1px gap, Ink Line fill and a 20px radius.
Scientific depth
Partners who read the data themselves.
Regulatory fluency
Former agency reviewers and assessors.
Technology & AI
Validation of algorithms and digital endpoints.
Step Card
Numbered process step with a photo. Use four in a row on Desktop, two on Tablet, one on Phone.
01
Diagnose
Find the one decision that changes the outcome.
02
Design
Model options against evidence, cost and time.
CTA Card
Dark call-to-action card for asides. Toggle Show Person and Show Button.
Discuss this practice with a partner — usually within 48 hours.
Post Card
Article card for Insights collection lists. Bind Image, Title and Link (/insights/:slug) to the CMS.
Case Card
Case study card for Cases collection lists; Metric sits in the glass badge. Default on Home, Large on the Cases page.
FAQ Item
Accordion row, usually bound to the FAQ collection. Open and Closed variants.
How does an engagement usually start?
With a free 45-minute briefing. A partner listens, asks the uncomfortable questions and tells you whether we are the right fit.
How are your fees structured?
Submit Button
Submit button for Framer forms with Default, Pending and Success states — set them in the form’s submit settings.