INTERNAL DEVELOPMENT SHOWCASE — NOT A PRODUCTION SURFACE · Stage 1 foundation only

Component showcase

DEV-SHOWCASE

Primitives and composites mapped to Figma design system. Zero feature workflows.

Design tokens

Figma 13:531

Brand/Accent

#1d36d8

Text/Primary

#1f2937

Text/Secondary

#36537b

Text/Muted

#78859f

Surface/Light

#f8f9fc

Borders/Mid

#d8deea

State/Positive

#2c9100

State/Negative

#c81e1e

State/Warning

#d97706

Radii — control 4px · card 8px · modal 12px · pill 100

Buttons

Form controls

Text input

Height 40 · radius 4

SearchBox

Select

Textarea

Checkbox

Toggle

Yes / No

Yes

Status badges

NHSPrivateReadyAwaitingClarification neededNeutralP-MedicineEmergency: Call 999

Cards · Alert · Tabs · Breadcrumb · Tooltip

KPI card shell

Sample metric

Informational note

Pattern matches Figma InformationalNoteBox — visual only.

Tab shell — no refund-slab feature logic.

Filter toolbar · Data table · Pagination

Ref	Patient	Status
RX-1001	A. Patel	New
RX-1002	J. Smith	Awaiting
OTC-220	M. Khan	Ready

Showing 1–3 of 38

Form section · Address · Patient details

Details

Shared field group shell

Name

Address line 1 *

Address line 2

Address line 3

Town *

County *

County list is not seeded (CR-004 residual) — enter county text.

Postcode *

First name *

Last name *

Date of birth *

Mobile number *

Upload · Date · Time slots · Dialog · States

PNG, JPG or PDF up to 10MB

Date picker shell

Time slot selector shell

Detail section

Sample detail content.

Review section

Sample review rows.

Loading…

Empty

No items to show.

Error

Failed to load (demo).

Verified against Figma nodes 13:531, 51:985, 722:2274, 477:786. Pixel-perfect not claimed.