Skip to main content
NewNMC’s advertising guidelines for doctors are in force from 6 Oct 2026. See what to change, and get a free compliance auditNew NMC advertising rules for doctors: what to change
UI/UX design

Design systems for healthcare products.

Colour, type and components first; then the directory, the portal, the admin and the landing pages built from them. Two systems we designed and shipped, shown with their real tokens and live screens.

Tokens come from each product’s own source and live CSS; component specimens are re-rendered here from those tokens.

tmslist.com
TMSList website homepage

Design system

TMS List

Two systems that share one accent. The public directory is editorial and warm — navy ink, terracotta and paper tones with a display grotesque. The admin is a dark, dense interface for the team that verifies clinics, with semantic colours for every status a listing can be in.

The TMS List build →
  • Public directory
  • Clinic search
  • Cost calculator
  • Clinic owner pages
  • Clinic portal
  • Admin

Colour

Public brand

  • Primary#0A1628
    Ink, headers, primary buttons
  • Accent#C9654A
    Emphasis, links, the italic headline
  • Accent light#D4806A
    Hover and soft fills
  • Paper#FBFAF7
    Page background
  • Paper 2#F4F1EA
    Bands and cards
  • Surface#F1F5F9
    Inputs and quiet panels

Admin (dark)

  • Base#0B0D10
    App background
  • Surface#111418
    Cards
  • Elevated#161B22
    Inputs, table headers
  • Accent#2E7A8F
    Primary action, active nav
  • Success#3FB950
    Verified
  • Warning#D29922
    Needs review
  • Error#F85149
    Rejected, destructive
  • Info#58A6FF
    Notes and links

Type

DisplayBricolage Grotesque · 34px · 600Find TMS therapy near you.
HeadingPlus Jakarta Sans · 20px · 600Verified clinics in your area
BodyPlus Jakarta Sans · 14px · 400Compare devices, protocols, insurance and cost in one place.
Label capsPlus Jakarta Sans · 11px · 600VERIFICATION STATUS
MonoJetBrains Mono · 12px · 400listing_id · 2026-10-11

Radius

681216

Spacing

4812162024324048

Admin components · re-rendered from the tokens

Approve listingRequest changesSkipRemove
DraftClaimedVerifiedNeeds reviewRejectedNote
Search clinics, cities or devices…
ClinicCityStatus
Example TMS CentreAustin, TXVerified
Sample Brain HealthDenver, CONeeds review
tmslist.com
TMSList website homepage
Home
tmslist.com · Search
TMS List clinic search with filters and verified listings
Search
tmslist.com · Cost calculator
TMS List cost calculator
Cost calculator
tmslist.com · For clinics
TMS List page for clinic owners
For clinics

Design system

Ethical Healthcare Community

A calm, trustworthy system for a community that sells nothing pushy: deep plum ink, a warm gold for the one action that matters, and an italic serif accent that carries the voice. Built for long reading — frameworks, reports and membership pages.

The Ethical Healthcare Community build →
  • Brand and illustration
  • Website
  • Programs
  • Membership landing pages
  • Ethical Practices Badge
  • Free tools

Colour

Brand

  • Ink#1A0E2E
    Text and headlines
  • Ink 2#332450
    Secondary text, navigation
  • Plum#5B2A8C
    Accent, italic headline words
  • Plum 2#7340A8
    Hover, links
  • Gold#A47315
    Primary call to action
  • Gold soft#D4A12E
    Highlights, badge rim
  • Bone#F6F3FB
    Bands and cards
  • Line#E4DCEF
    Rules and borders

Type

DisplayInter · 34px · 600Grow your practice —
AccentInstrument Serif · 34px · 400without losing trust.
BodyInter · 16px · 400Ethics keeps the why. Systems keep the how.
ButtonInter · 13px · 500Join community →

Brand components · re-rendered from the tokens

Grow your practice — without losing trust.
Join community →Explore framework● For ethical doctors, clinics & hospitals
FREE · START HERE
Your first steps, free
One masterclass. One framework. One challenge at a time.
ethicalhealthcarecommunity.com
Ethical Healthcare Community website homepage
Home
ethicalhealthcarecommunity.com · Programs
Ethical Healthcare Community programs: one patient-first path in four stages
Programs
ethicalhealthcarecommunity.com · Badge
The Ethical Practices Badge page
Badge
ethicalhealthcarecommunity.com · 30-day challenge
The 30-Day Foundation Challenge landing page
30-day challenge

UI/UX and design systems

Need a design system for your product?

Tell us what you’re building — a portal, an admin, a directory or a landing-page system — and we’ll come back with a scoped plan.

  • A 30-minute call with a healthcare specialist
  • Your top three growth opportunities, in writing
  • Honest advice — even if that means not hiring us
  • No obligation and no hard sell
You’ll speak with a senior strategist
Consultations are hosted by Arush Thapar’s team.
Step 1 of 3Takes 30 seconds

What do you want to improve first?

Details stay privateNo obligationReply within 1 working day