Display face · the apps
Inter
- 400
- 500
- 600
- 700
Work: Healthcare · Clinical research
A design system for award-winning health AI and data.
The work
Designed in Figma. Shipped in code. One system behind a platform used across 300 million patient records.
TriNetX gives researchers, life-science teams and health systems access to real-world data from a global federated network. Its interface runs on a design system kept in step between Figma and React — so product and AI features ship faster.
An animated tour of the TriNetX UI kit: a query card and combobox, a range slider, toggles, tabs with a chart, a tooltip and toast, and the AI assistant suggesting a term that lands in the query, ending in dark mode.
40+
React components in the kit.
90%+
Average Figma‑to‑code parity.
1.5
Years of component design behind the kit.
5
Absolute rockstars who did such heavy lifting to get this done: Maeve, Phil, Andrew (opens in a new tab), Tiana (opens in a new tab) and Michelle (opens in a new tab).
Platinum · 2026 Pinnacle Technology Awards
AI built on trustworthy data.
TriNetX won Platinum in AI Solutions for Clinical Research & Data Insights. The argument behind it: the data comes first — high-quality, transparent and continuously refreshed — and the AI is only as good as what it stands on.
Read the award announcement (opens in a new tab)
AI built on weak foundations crumbles.
The network
- 300MPatients across the federated network
- 240+Healthcare organizations
- 13,000+Clinical sites
- 20+Countries
What it made possible
- 189%Larger recruitable patient pool for a COPD trial.
- 33→85%High-risk Crohn’s disease identified: from 33% to over 85%.
- 18Months before diagnosis: how early pancreatic cancer risk can be forecast.
- 0.93AUC for the LIRIC liver cancer model, across 46,679 cases.
Figures from TriNetX’s award announcement, July 2026.
Re-architecting the platform for AI
Modernizing a mature platform around AI: one rail across every workspace, and an assistant built into the layout, working beside the query.
Workspace
App brand guidelines
Built for data, ready for AI.
Overview
A preview of the design system: a selection of its parts, not every asset.
Typography
Typefaces
Inter, in two roles. Everything else is a size or weight of it.
Text face · the apps
Inter
- 400
- 500
- 600
- 700
Typography
Type scale
The headings the apps use, then Tailwind’s text sizes. Small on purpose: the data is the content.
-
COPD Global Network
Inter 700 20px · line 28px #111827 text/h1 · table headers -
Edit cohort criteria
Inter 600 18px · line 28px #111827 text/h2 · modal, popover and drawer headers -
What’s New in the Live platform
Inter 600 16px · line 24px #111827 text/h3 · What’s New titles -
Cohort summary
Inter 600 14px · line 20px #111827 text/h4 · card titles -
The quick brown fox jumps over the lazy dog.
Inter 400 24px · line 2rem #374151 text-2xl · 1.5rem / 2rem -
The quick brown fox jumps over the lazy dog.
Inter 400 20px · line 1.75rem #374151 text-xl · 1.25rem / 1.75rem -
The quick brown fox jumps over the lazy dog.
Inter 400 18px · line 1.75rem #374151 text-lg · 1.125rem / 1.75rem -
The quick brown fox jumps over the lazy dog.
Inter 400 16px · line 1.5rem #374151 text-base · 1rem / 1.5rem -
The quick brown fox jumps over the lazy dog.
Inter 400 14px · line 1.25rem #374151 text-sm · .875rem / 1.25rem · the default -
The quick brown fox jumps over the lazy dog.
Inter 400 12px · line 1rem #6B7280 text-xs · .75rem / 1rem · labels
Foundations
Color
Interface grays from Tailwind’s gray and slate; one blue for action; navy and red for query logic; a set of its own for the AI. Contrast against white and against the heading ink, #111827.
Interface
- Text primary Body text (gray 700) On white 10.31:1 AAA With ink 1.72:1 Fail #374151
- Text secondary Labels, metadata (gray 500) On white 4.83:1 AA With ink 3.67:1 Large only #6B7280
- Text tertiary Placeholders, hints (gray 400) On white 2.54:1 Fail With ink 6.99:1 AA #9CA3AF
- Heading Titles and values (gray 900) On white 17.74:1 AAA #111827
- Border Dividers, cards, menus (slate 200) On white 1.23:1 Fail With ink 14.39:1 AAA #E2E8F0
- Control border Inputs, secondary buttons, toggle off (slate 300) On white 1.48:1 Fail With ink 11.95:1 AAA #CBD5E1
- Hover Hover and active rows (slate 100) On white 1.1:1 Fail With ink 16.19:1 AAA #F1F5F9
- Surface Card heads, panels (slate 50) On white 1.05:1 Fail With ink 16.96:1 AAA #F8FAFC
Action and meaning
- Primary Primary buttons, selection, toggle on On white 4.97:1 AA With ink 3.57:1 Large only #0E76AF
- Primary hover Hover On white 7.21:1 AAA With ink 2.46:1 Fail #035C8C
- Primary pressed Pressed; also Midnight 100 On white 15.86:1 AAA With ink 1.12:1 Fail #001F54
- Primary disabled Disabled fill On white 1.97:1 Fail With ink 9:1 AAA #80C1E3
- Focus Focus ring, count pill (sky 100) On white 1.15:1 Fail With ink 15.46:1 AAA #E0F2FE
- Focus edge Focused input edge (sky 600) On white 4.1:1 Large only With ink 4.33:1 Large only #0284C7
- AND chip Query logic: AND (Midnight 80) On white 9.9:1 AAA With ink 1.79:1 Fail #2A436D
- OR chip Query logic: OR (Azure 100) On white 1.14:1 Fail With ink 15.62:1 AAA #DAF5FF
- Group amber Query groups On white 1.63:1 Fail With ink 10.89:1 AAA #F2C46D
- Exclude red Cannot have, destructive (red 700) On white 6.47:1 AA With ink 2.74:1 Fail #B91C1C
AI
- AI pink Gradient start On white 2.19:1 Fail With ink 8.11:1 AAA #FF85D8
- AI violet Gradient middle On white 4.16:1 Large only With ink 4.27:1 Large only #8D60EF
- AI cyan Gradient end (Arctic 100) On white 1.65:1 Fail With ink 10.77:1 AAA #06DFEA
- Send The send button, a 135° blend White text on the button 4.26:1 Large only #A47BFF and #8A62E2
- Answering Send while answering; tooltips (slate 700) On white 10.35:1 AAA With ink 1.71:1 Fail #334155
- Did you know Suggestion cards; edge #E9D5FF On white 1.07:1 Fail With ink 16.53:1 AAA #FAF5FF
Foundations
Color scales
The TriNetX brand scales, 20 to 100.
Midnight
- 20#a7adb8
- 40#7d899f
- 60#546785
- 80#2a436d
- 100#001f54
Arctic
- 20#cff3f7
- 40#9deef3
- 60#6beaf0
- 80#38e5ed
- 100#06dfea
Lime
- 20#ffffd9
- 40#efffa6
- 60#dfff73
- 80#cfff40
- 100#beff0d
Lavender
- 20#ece0ff
- 40#d6c2ff
- 60#c1a3ff
- 80#ab85ff
- 100#a47bff
Sunbeam
- 20#fff5d9
- 40#ffe7af
- 60#ffd886
- 80#ffca5c
- 100#ffbb33
Azure · Gray · Powder
- Azure 100#daf5ff
- Gray 100#f2f2f2
- Powder 100#fafdff
Foundations
Layout and spacing
Tailwind’s 4px grid, two control heights and four radii.
Base unit
4px
Every space is a step of Tailwind’s 4px scale, drawn below.
Controls
36 · 28
Big and Small buttons; inputs, selects and list items at 36; tabs at 44; toggles 36 × 20; checkboxes 16.
Query card head
48px
On #F8FAFC, with the count pill (#E0F2FE) on the right.
Spacing steps
- 4px
- 8px
- 12px
- 16px
- 20px
- 24px
- 32px
- 40px
- 48px
- 64px
Radius
Small · 4px
Small buttons, list items, chips, tooltips
Medium · 6px
Big buttons, text inputs
Large · 8px
Cards, menus, the chat field
XL · 12px
Chat bubbles, the Welcome panel
Full
Pills, toggles, the send button
Components
Buttons
Big (36) and Small (28). Hover darkens to #035C8C, pressed to #001F54; focus is a 3px #E0F2FE ring; disabled lightens to #80C1E3.
Primary · Big 36
default
hover
focus
pressed
disabled
36px tall · radius 6px · padding 0 14px · Inter 500 14px · #0E76AF → hover #035C8C → pressed #001F54 · disabled #80C1E3 · contrast 4.97:1 AA
Secondary · Big 36
default
hover
focus
pressed
disabled
36px tall · radius 6px · Inter 500 14px · white, 1px #CBD5E1 · hover #F1F5F9 · text #374151 · contrast 10.31:1 AAA
Ghost · Small 28
default
hover
focus
pressed
disabled
28px tall · radius 4px · padding 0 10px · Inter 500 13px · text #0E76AF · hover #F1F5F9 · contrast 4.97:1 AA
AI send
Send
Disabled
Answering
36px circle · #A47BFF → #8A62E2 at 135° · answering #334155 with a 12px square
Components
Navigation
The left navigation: a 56px rail on #F9FAFB with a hairline edge. The AI button sits first; the current section is a white tile with a #E2E8F0 edge.
SD Rail
56px wide · padding 12px 8px
#F9FAFB · right edge 1px #E2E8F0
logo 36 · groups 24px apart
Items
40 × 40 tile · icon 28 · radius 4
current: #FFFFFF, 1px #E2E8F0
news dot 8px, top right
AI button
36px circle · AI Gradient fill
1px edge, pink #FF85D8 to blue
sparkles 20 · opens the assistant
focus 3px #A47BFF, 2px out
Workspace menu
Opens from the workspace tile: a 3 × 4 grid of tools under a navy #2A436D header. Live in the prototype above.
Tabs
OverviewOutcomesCharacteristics
44px items · padding 0 16px · radius 6 · selected #E2E8F0, Inter 600 · others #6B7280 · pills 28px
Components
Controls
Select, ComboBox, TextInput, ToggleGroup, Toggle, Checkbox, RangeSlider, Badge and Tooltip, drawn with the kit’s parts. The live kit above works.
Select · ComboBox
hba
trigger 36px · radius 4–6 · menu radius 8 · items 36px
focus: 0 0 0 1px #0284C7, 0 0 0 4px #E0F2FE
ToggleGroup · Toggle · Checkbox
AllWomenMen
Exclude deceased patients
Propensity matching
Require two or more visits
toggle 36 × 20 · on #0E76AF · off #CBD5E1
checkbox 16 · radius 4
RangeSlider
Age at index50–76
1890
Count · logic · tooltip
52,189 patients ANDOR Learn more about this network.
Count pill #E0F2FE / #035C8C
AND #2A436D / #DAF5FF · tooltip #334155, 12/16
Components
AI
The assistant has its own small set: a gradient edge that marks anything AI, the ChatField with Send and its answering state, the Thinking summary, suggestion cards in lavender and Rating.
Assistants
Ask about Cohort 1Describe who you are looking for.
Add a treatmentWho is also on a GLP-1 agonist?
Who is also on a GLP-1 agonist?
Thought for 3s
Adding GLP-1 agonist with AND takes Cohort 1 from 11,482 to 1,607 patients.
Double-check results. Powered by AI.
| Part | Spec |
|---|---|
| ChatField | 137px · radius 8 · 1.5px gradient edge #FF85D8 → #8D60EF → #06DFEA · disclaimer 11px below |
| Send · answering | 36px circle · #A47BFF → #8A62E2 · #334155 while answering |
| User bubble | #F3F4F6 · radius 12 · 14/20 · right-aligned |
| Thinking summary | an accordion · 12/16 steps with micro icons · #D1D5DB connectors · the running step shines |
| Suggestion card | Did you know: #FAF5FF · 1px #E9D5FF · radius 8 |
| Welcome | compact · #001F54 · lime #BEFF0D accent |
| Header | “Assistants” 16/24 |
| Rating | thumbs up, thumbs down, copy · 28px ghost icon buttons |
Quality
Accessibility
- Focus: a 3px #E0F2FE ring on every control, never removed.
- Contrast: body text 10.3:1, labels 4.8:1, white on the primary 5:1; all AA.
- Targets: Small controls are 28px with 8px between them, so each clears 24 × 24.
- Keyboard: arrow keys move through tabs and lists; Esc closes menus and returns focus.
- Meaning: never color alone; AND, OR and “Cannot have” are spelled out.
Hand-off
Tokens
CSS custom properties for the values above.
:root {
/* type: Inter, everywhere in the apps */
--font-app: Inter, system-ui, sans-serif;
--text-xs: .75rem; --leading-xs: 1rem;
--text-sm: .875rem; --leading-sm: 1.25rem; /* the default */
--text-base: 1rem; --leading-base: 1.5rem;
--text-lg: 1.125rem; --leading-lg: 1.75rem;
--text-xl: 1.25rem; --leading-xl: 1.75rem;
--text-2xl: 1.5rem; --leading-2xl: 2rem;
--h1: 700 20px/28px var(--font-app); /* table headers */
--h2: 600 18px/28px var(--font-app); /* modal, popover, drawer */
--h3: 600 16px/24px var(--font-app); /* What's New titles */
--h4: 600 14px/20px var(--font-app); /* card titles */
/* interface */
--text-primary: #374151;
--text-secondary: #6B7280;
--text-tertiary: #9CA3AF;
--text-heading: #111827;
--border: #E2E8F0;
--border-control: #CBD5E1;
--bg-hover: #F1F5F9;
--bg-surface: #F8FAFC;
--primary: #0E76AF;
--primary-hover: #035C8C;
--primary-pressed: #001F54;
--primary-disabled: #80C1E3;
--focus-ring: 0 0 0 3px #E0F2FE;
--focus-edge: #0284C7;
--logic-and: #2A436D;
--logic-and-text: #DAF5FF;
--exclude: #B91C1C;
/* brand scales */
--midnight-20: #A7ADB8; --midnight-40: #7D899F; --midnight-60: #546785; --midnight-80: #2A436D; --midnight-100: #001F54;
--arctic-20: #CFF3F7; --arctic-40: #9DEEF3; --arctic-60: #6BEAF0; --arctic-80: #38E5ED; --arctic-100: #06DFEA;
--lime-20: #FFFFD9; --lime-40: #EFFFA6; --lime-60: #DFFF73; --lime-80: #CFFF40; --lime-100: #BEFF0D;
--lavender-20: #ECE0FF; --lavender-40: #D6C2FF; --lavender-60: #C1A3FF; --lavender-80: #AB85FF; --lavender-100: #A47BFF;
--sunbeam-20: #FFF5D9; --sunbeam-40: #FFE7AF; --sunbeam-60: #FFD886; --sunbeam-80: #FFCA5C; --sunbeam-100: #FFBB33;
--azure-100: #DAF5FF; --gray-100: #F2F2F2; --powder-100: #FAFDFF;
/* AI */
--ai-gradient: linear-gradient(90deg, #FF85D8, #8D60EF, #06DFEA);
--ai-send: linear-gradient(135deg, #A47BFF, #8A62E2);
--ai-stop: #334155;
--ai-tip-bg: #FAF5FF; --ai-tip-border: #E9D5FF;
/* size */
--control-big: 36px; --control-small: 28px; --tab: 44px; --list-item: 36px;
--radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px;
}Team scope
- Design system strategy and roadmap
- Component design in Figma
- Figma to code
- Tokens, theming and dark mode
- Product screens and layouts
- Documentation site and release storytelling
- Accessibility across the kit
- AI-accelerated design workflow
