Styleguide
Internal reference for the “Clinical Trust” design system.
Colour tokens
Brand
brand-50
brand-100
brand-200
brand-300
brand-400
brand-500
brand-600
brand-700
brand-800
brand-900
Accent
accent-50
accent-100
accent-200
accent-500
accent-600
accent-700
Slate / neutrals
slate-50
slate-100
slate-200
slate-300
slate-400
slate-500
slate-600
slate-700
slate-800
Semantic
success-50
success-600
danger-50
danger-600
Typography
Display — Source Serif 4
Heading 1 — the quick brown fox
Heading 2 — γρήγορη καφέ αλεπού
Heading 3 — the quick brown fox
Body large — Inter, generous line-height for reading.
Body — Inter, 17px base. Πεπτικό σύστημα, γαστρεντερολογία.
Small — captions and helper text.
Buttons
Icons
menu
x
phone
mail
map-pin
clock
calendar-check
chevron-down
chevron-right
arrow-right
arrow-up-right
check
shield-check
stethoscope
activity
microscope
scan-line
pill
heart-pulse
user
globe
circle-alert
circle-check-big
leaf
sparkles
clipboard-list
file-text
image
newspaper
facebook
Components
Entry card
Icon, title, one-line summary and an arrow affordance.
Feature
Compact icon + title + short body.
Accessible FAQ (native details)
Zero-JS, keyboard-friendly disclosure.
Second question
Chevron rotates on open via group-open.