01 · Foundations
Colour tokens
Every colour in this design comes from one of these. Brand red is used decisively but sparingly — button fills, dividers, the active nav indicator, and the action-card CTA strip. Toggle dark mode in the header to see each token's dark counterpart.
--background
page surface
--card
raised surface
--popover
floating surface
--primary
5.89:1 light · 5.79:1 dark
--secondary
low-emphasis fill
--muted
subdued surface
--accent
5.89:1 light · 11.57:1 dark
--destructive
6.52:1 light · 4.86:1 dark
--border
hairlines
--input
control border
--ring
focus ring
--sidebar
persistent dark chrome
Chart series — use in order
chart-1
chart-2
chart-3
chart-4
chart-5
Sidebar chrome — persistent dark, used regardless of theme
--sidebar-primary
--sidebar-accent
--sidebar-border
--sidebar-ring
02 · Foundations
Typography
Public Sans for everything, JetBrains Mono for figures and code. Three weights only — 400, 700, 800. Buttons, nav labels and eyebrows are uppercase and tracked; body copy is 16px, not 14px — this is a membership site as much as a tool.
Display
48 / 800 / 1.05 / -0.02emHeading one
36 / 800 / 1.1 / -0.015emHeading two
28 / 700 / 1.2 / -0.01emHeading three
20 / 700 / 1.3 / 0Section eyebrow
16 / 700 / 1.4 / uppercase 0.03emLead paragraph. Used once, directly beneath a page title, to say what a page or programme is for before the detail starts.
18 / 400 / 1.6Body copy is 16px, not 14px — this design reads as much as it is used. Body text is capped at 65 characters — you can link inline and set inline code without breaking the line rhythm.
Small text. Help text beneath a field, timestamps, secondary metadata.
14 / 400 / 1.5Caption / eyebrow label
12 / 700 / 1.4 / uppercase 0.08emA blockquote. Left rule, no background fill, italic. Used to cite practice guidelines or external standards, never as a testimonial device.
Unordered
- Annual practice declaration
- Continuing professional development log
- Peer review every three years
Ordered
- Submit your application
- Complete the assessment panel
- Receive your credential
03 · Foundations
Surface & elevation
Depth is borders only. Cards, buttons, inputs and tables are flat with a border and carry no shadow. Only floating overlays — dropdown, popover, dialog, sheet, toast, tooltip — use a shadow, and always alongside a border.
border only — cards, buttons, inputs, tables
shadow-xs — reserved, unused by default
shadow-md — menus, popovers
shadow-lg — dialogs, sheets
Radius ramp — everything derives from --radius: 0.25rem
sm · 0px — buttons, inputs, cards, tables
md · 2px — unused
lg · 4px — unused
xl · 8px — unused
full · badges, avatars — the one exception
This is the boxiest design in the repository: buttons, inputs, cards and tables render with literally square corners (rounded-none). Only badges and avatars stay fully round.
05 · Primitives
Form controls
All controls are 40px tall to match buttons. --input is a visibly darker grey than --border so a field's edge clears 3:1 as a UI boundary. The error state changes colour only — the border does not thicken.
Printed on your membership card.
With a leading icon at 16px, inset 12px.
Enter a valid email address.
Disabled — 50% opacity, muted fill.
Determines your local branch and panel.
Reviewed at each re-credentialing cycle.
Checkbox
Radio group
Switch
Slider
Select — open
Rendered open. The selected option carries a check and aria-selected; the highlighted option is tracked with aria-activedescendant.
06 · Primitives
Composed form
Individual controls do not show spacing or rhythm. This does. Sibling fields sit gap-4 apart, groups gap-6.
07 · Data display
Card
Square corners, border, no shadow. Padding is p-6.
Basic card
Header, content, footer. The default container for everything.
Content sits at 16px with a 1.65 line height. Card titles use the h3 scale so they do not compete with the page title.
With header action
The action is a ghost icon button, aligned to the title baseline.
Media card
Media is flush to the card edge — no radius to clip against.
Stat cards
Active members
18,204
3.1% vs last year
Applications overdue
42
11% vs last quarter
Complaints closed
97%
Within the 60-day service standard
CPD hours logged
31
of 50 required this cycle
08 · Data display
Table
Rows are 44px. Numeric columns are right-aligned with tabular-nums — always. Header is bg-muted with uppercase caption type.
| Applicant | Status | Reviewer | CPD hrs | |||
|---|---|---|---|---|---|---|
| Priya Nakamura | Approved | RKRosa Klein | 4 Feb 2026 | 31 | ||
| Tomás Okafor | Under review | JWJoan Whitfield | 29 Jan 2026 | 18 | ||
| Adaeze Nwosu | Declined | RKRosa Klein | 22 Jan 2026 | 9 | ||
| Liam Fitzgerald | Approved | JWJoan Whitfield | 15 Jan 2026 | 40 | ||
| Sofia Marchetti | Withdrawn | RKRosa Klein | 3 Jan 2026 | 6 |
1 of 5 rows selected
09 · Data display
List & feed
Three list shapes that carry most of a member portal: a settings-style list, an activity feed, and a description list.
Notification preferences
Renewal reminders
Email me 60 days before my registration lapses.
Guideline updates
Notify me when a practice standard I follow changes.
Newsletter
Quarterly update from the council.
Activity
Rosa Klein approved Priya Nakamura's application
4 minutes ago
Joan Whitfield requested more evidence on Application #412
22 minutes ago
Rosa Klein published a revised practice-standards-v4
3 hours ago
Automatic reminder sent for 12 upcoming renewals
Yesterday at 23:41
Application detail
- Reference
- APP-8214
- Category
- Fellow
- Panel
- Central region
- CPD hours
- 31 of 50
- Decision due
- 14 Mar 2026
10 · Data display
Badge & status
Status colours signal state. They are never used decoratively. Badges and avatars are the one shape exception in this design and stay fully round.
Badge variants
Status pills
Counters
11 · Data display
Avatar
Initials on bg-muted are the fallback. No generated colours per member — that would reintroduce uncontrolled colour into the palette.
Sizes
With image
With status
Group
12 · Data display
Data visualisation
Chart series are used in order: a two-series chart uses chart-1 and chart-2, never chart-1 and chart-4. Gridlines are border, labels are muted-foreground.
Applications by category
Last 7 intake weeks
Median decision time
Area chart, single series
Sparklines
14 · Navigation
Tabs & segmented control
Tabs are uppercase, tracked, and use a 2px underline — the same red as the active nav indicator, never the filled-pill treatment shadcn ships by default.
Horizontal tabs
The active panel renders below the bar with no additional container. A tab panel that adds its own border doubles the rule already drawn by the tab bar.
Segmented control
Vertical tabs
Vertical tabs use the sidebar item treatment rather than an underline, because a vertical rule reads as a container edge.
17 · Feedback
Alert & callout
Intent is carried by the icon and a /10 tinted background — not by a heavy coloured left bar, which fights the card border for the same job.
Practice standards v4 is now in effect
All Fellows and Trainees must attest to the revised standards by the next renewal.
Registration confirmed
Your Fellowship is current until 14 Mar 2027.
CPD hours below target
You have logged 31 of 50 required hours with 90 days left in this cycle.
Log CPD activityApplication declined
Reference APP-8107 did not meet the evidence requirement. Resubmission is open for 30 days.
View panel notes18 · Overlays
Dialog, sheet & popover
All shown inline rather than as real overlays. Floating surfaces get both a shadow and a border — the only surfaces in this design that carry a shadow at all.
Dialog
Submit for peer review
Your file will be assigned to a reviewer from your region's panel.
Alert dialog — destructive
Withdraw application APP-8214?
This ends the current review cycle. You will need to start a new application to reapply.
Popover
CPD hours
Logged so far this three-year cycle, across all approved activity types.
31 / 50
Tooltip
Sheet / drawer
Evidence attachments
Uploaded for APP-8214.
19 · Feedback
Progress & loading
Progress bar
62% — CPD hours this cycle
24% — document storage used
Spinner
Progress ring
Skeleton
20 · Feedback
Toast & notification
Popover surface, shadow-lg, stacked bottom-right in a real application. Every toast is dismissible; destructive ones do not auto-dismiss.
Declaration saved
Your annual practice declaration has been recorded.
Fellowship approved
APP-8214 was approved by the Central panel.
Could not submit your declaration
Retrying in 30 seconds.
21 · Feedback
Empty, error & loading states
Empty states are the one place a heading may be centred. The icon sits in a square muted tile rather than a circle, so it reads as deliberate rather than as a missing image.
No applications yet
Start a Fellowship or Trainee application to begin the assessment process.
No results for "renewl"
Check the spelling, or search the guidelines library instead.
Could not load your applications
The service returned an error. This is usually temporary.
22 · Composed
Application page header
Breadcrumb, title, description, actions, tabs. In-app sections use py-10 rhythm rather than the marketing bands' py-16.
Priya Nakamura — APP-8214
ApprovedFellowship application, Central region panel. Decision recorded 4 Feb 2026 by Rosa Klein.
23 · Composed
Marketing hero
Marketing bands use py-16 rather than the in-app py-10. No gradient, no decorative background pattern — health-pro never uses either.
Setting the standard
for safe, accountable practice.
Meridian Council accredits, credentials and supports health professionals across every stage of practice — from trainee to Fellow to retirement.
Open to all registered health and medical professionals.
$ meridian status --member MHC-0042917
✓ Registration current — expires 14 Mar 2027
✓ Indemnity insurance verified
… CPD hours: 31 / 50 this cycle
→ meridian.example/members/0042917
24 · Composed
Feature grid — the action card
The signature pattern: a bordered, square-cornered card capped by a full-bleed CTA strip flush with the card's own edges — bg-sidebar-primary, h-11, centred uppercase label. Segmented by audience, mirroring how a professional body actually organises its site.
Fellows
Manage your credential, log CPD hours and view your renewal timeline.
Trainees
Track supervised placements, assessment milestones and exam dates.
Health care professionals
Look up practice standards, notify a change of details, or refer a colleague.
Patients & the public
Confirm a practitioner's registration, or raise a concern about their care.
Each strip is a real <a href> carrying data-slot="button" — it navigates, so per shared/ACCESSIBILITY.md it is never a <button> styled to look like a link.
25 · Composed
Pricing table — membership tiers
The recommended tier is marked with a heavier border and a badge — not a different background colour, which would introduce a second accent surface.
Trainee
For registrars and residents in supervised training.
$180/year
- Access to the guidelines library
- Supervised placement tracking
- Trainee peer network
Fellow
For fully qualified practitioners in independent practice.
$420/year
- Everything in Trainee
- CPD tracking and reminders
- Voting rights at general meeting
- Reduced-fee legal advice line
Retired / honorary
For Fellows who have ceased clinical practice.
$60/year
- Non-practising registration
- Newsletter and events
- Mentorship programme access
26 · Composed
Testimonial
The re-credentialing process used to take me a full weekend of paperwork. This cycle it took an evening — the CPD log carries forward automatically, and the panel could see everything they needed without another email from me.
"As a trainee, having one place to see every milestone I still need was the difference between anxious guessing and actually finishing on time."
"Patients ask us to confirm a colleague's registration more than you'd think. Being able to point them at a public register in ten seconds matters."
27 · Composed
Call to action band
The dark --sidebar chrome, full-bleed — one of the four places this design permits it. Brand red stays confined to the button fill inside it, matching the reference's dark CTA/footer band.
29 · Utility
Icon set
Lucide, inline SVG, 20px standalone / 16px in controls, stroke width 2. Never an emoji, never a filled glyph — the stroke weight keeps the set coherent with the square, bordered surfaces around it.
30 · Utility
Motion & interaction
One duration for everything interactive. Colour and opacity animate; layout and position do not — nothing the user is aiming at ever moves.
| State | Treatment | Timing |
|---|---|---|
| Default | Base token colours | — |
| Hover | Fill drops to /90, or surface shifts to bg-accent. No transform. | 150ms |
| Focus | ring-2 ring-ring ring-offset-2 on :focus-visible only. Inside the dark sidebar chrome, the ring switches to ring-sidebar-ring with ring-offset-sidebar. | instant |
| Active | Fill drops to /80. No scale. | 150ms |
| Disabled | opacity-50 pointer-events-none plus the real disabled attribute. | — |
| Overlay entry | Fade plus 4px rise | 200ms |
| Reduced motion | All durations collapse to ~0 — handled in theme.css | 0.01ms |
Try it — tab through these
The ring uses ring-offset-background so it stays visible on both page and card surfaces.