Components — SugboDoc Design System

Clinical UI for healthcare workflows. Calm, dense, information-first. Every component below is the live, file-copied design system source.

Token-drivenRoboto onlyFHIR-alignedNo raw hex1px hairline bordersCard → List → Modal60+

Buttons

Variants, sizes, loading & disabled states

Refresh roster

Status pills & badges

StatusPill = clinical state. Badge = taxonomy, counts, metadata.

StatusPill — clinical state
In ProgressCompletedPendingIssuedDraftEntered in Error
StatusPill — sizes
In ProgressIn ProgressIn ProgressIn ProgressIn Progress
Badge — tones & appearances
grayprimarydangerwarningsuccessinfoskypurplepink
softsolidoutlineActiveAdd

Form controls

Field wrapper + Input, Select, Textarea, Checkbox, Radio, Switch

Search by facility name

This field is required

Cards & stats

White surface, 1px border, at most shadow-sm

Open claims
128
+12%vs. last 7 days
Awaiting voucher
9
-4%3 overdue
Submitted today
42
+8%
Rejected
3
0%

Patient summary

Active encounter
Patient
Juan Dela Cruz
PRN
PRN-00231
Facility
Cebu City Medical Center
Plan
Clinic Pro

Alerts & announcements

Inline notices and dismissible banners

Review neededImmunization record is incomplete for this patient.
SyncedAll claims submitted to PhilHealth.

Heads up

Filing window closes in 2 days.

Saved

Patient profile updated.

Action required

Assign an attending physician.

Avatars

Photo, initials, icon — with status dot

JD20px
JD28px
JD36px
JD44px
JD56px
JD72px
MS

Tabs

Underline tabs with optional counters

Active tab: encounters

Table

TableCard, head, header cell, row, cell

PatientMRNProviderStatusUpdated
Juan Dela CruzMRN-00231Dr. ReyesIn ProgressAug 2610:24 AM
Maria SantosMRN-00245Dr. TanCompletedAug 254:02 PM
Ahmed KhalidMRN-00262Dr. LopezPendingAug 249:15 AM
Liza ParkMRN-00271Dr. ReyesDraftAug 231:48 PM

Progress, stepper & timeline

Determinate progress, multi-step workflow, audit trail

Claim completeness72%
Documents uploaded40%
Validation passed95%
  1. Claim submittedAug 26, 10:24 AM

    CF4 + eSOA uploaded to PECWS.

  2. Validation passedAug 26, 10:21 AM

    validateCF4 returned 0 errors.

  3. Awaiting voucherAug 26, 10:22 AM
  4. Draft createdAug 25, 4:02 PM

Empty states, skeletons & spinners

Loading and zero-data placeholders

No encounters yet

Add a patient to begin charting.

Loading claims...

Accordion

Progressive disclosure for dense reference content

Patient reports intermittent chest tightness for 3 days, no radiation.

Overlays

Modal, confirm modal and off-canvas drawer

Search bar

Pill search with menu + trailing slot

DR

Typography

Ten type styles — Roboto only

Display — The quick brown fox

display

H1 — The quick brown fox

h1

H2 — The quick brown fox

h2

H3 — The quick brown fox

h3

H4 — The quick brown fox

h4

Body Large — The quick brown fox

bodyLarge

Body — The quick brown fox

body

Body Small — The quick brown fox

bodySmall
Caption — The quick brown foxcaption
Label — The quick brown foxlabel
SugboDoc Design System — Vibecoded by nilvelRoboto 400 / 500 / 600 / 700