Design system · v0.1.0
One system, four sites, one accent each
Neutrals, type and components are identical everywhere. Only the accent changes. Every colour here has been measured, not estimated.
Colour
Contrast ratios are computed against the page background (#FBFAF8).
#2B2A27--ink#6B675F--ink-muted#D9D6CE--rule#FBFAF8--paper#FFFFFF--cardAccent per site
#4B6A8A#3F6F6B#B5502F#6E4560ReSPCT section colours
Fill = badges and bands; Text = the darkened variant that passes 4.5:1 as text on paper.
fill #5E9591text #4E7B78fill #8A7B4Ftext #807249fill #6B7F9Etext #627491fill #8F6A62text #8F6A62Typography
Eyebrow · 13 px Inter 600
Display — clamp(32, 4vw, 46) px Source Serif 4
Heading 2 — 30 px
Heading 3 — 24 px
Heading 4 — 19 px
Lead paragraph, 24 px, used once under a page title to set the scene.
Body text is 19 px Source Serif 4 with a 1.65 line height and a 70-character measure, which is what makes long clinical documents readable on screen. Links look like this; outbound links get an arrow Nature Medicine and PDFs a download mark Explanatory document. Text is always left-aligned, never justified.
“Ketamine is broadly conceptualized as a brief intervention that can produce windows of opportunity for enhanced psychiatric care.”
Interface text is 15 px Inter — navigation, buttons, tables, captions.
Components
Research
A card with a link
Cards use the white surface, a 1 px rule and a 10 px radius. The whole card is clickable when it has a link.Guideline
A plain card
Static content card. Spacing between children is 12 px.Chips & details
Open access 2025
Expandable section
Disclosure uses the native element — no JavaScript, keyboard accessible.
Motion and imagery
Quiet motion, strong images
Reveals, a slow parallax drift and large line-drawn watermarks give the pages depth without noise. All of it respects prefers-reduced-motion.
Reporting standardThe ReSPCT Guidelines30 items every psychedelic trial should report.FrameworkStaMPS Data Framework409 items, four Delphi rounds.Ketamine therapyThe Montreal ModelKetamine paired with psychotherapy.
Ketamine can produce windows of opportunity for enhanced psychiatric care.Garel et al., Frontiers in Psychiatry, 2023
Tables
Sticky header on scroll; header repeated on every printed page; rows never split across pages.
| # | Item | Section | Agreement |
|---|---|---|---|
| 1 | Physical setting of the dosing room | Physical Environment | 96 % |
| 2 | Music and sound | Dosing Session Procedure | 93 % |
| 3 | Therapeutic framework | Therapeutic Framework | 91 % |