UI kit

Light mode

skips v1
Editable code handoff

Component samples only. No care, payments, or messages are sent. All names, prices, and health content are samples. The font is Onest, bundled in fonts/, with its ss02 letters and an Arial fallback.

01 Foundations

Exact PDF values · Shared structure in both themes

Color palette

Logo

Button green

Yellow

Page

Surface

Field border

America’s answer to skipped healthcare.

Onest 800 · Display

Your care plan

Onest 700 · Section title

Upright titles in the app. The logo stays artwork.

Medical care online.

Onest 400 · Body 16/24

Labels 14/20 · Buttons 16/20

Spacing · 4 px base

4

8

12

16

24

32

48

64

Radius

0

8

12

16

Borders & icons

1 px border
2 px focus / icon stroke
24 px standard icon
48 px button height

Grid

12 columns · Desktop
8 columns · Tablet
4 columns · Mobile
1200 px content max

02 Buttons

Actions and states

Get carePrimary

View care planSecondary

View detailsTertiary

Icon button

Send messageDisabled

Sending…Loading

Get careHover

Get carePressed

Get careKeyboard focus

Same size in every state. Focus uses a 2 px ring with a 2 px gap.

Test loading

03 Form controls

Labels, inputs, choices, and feedback

Name (optional)

Search

DropdownChoose an optionOption oneOption two

Date · month/day/year

CheckboxOption oneOption twoAlerts

Text area

File upload

Local picker only. Files are not uploaded.

Disabled field

Email address (required)

Enter your email address.

Check fieldSuccess sample

04 Navigation

Header · Mobile · Tabs · Sidebar

Get care

Desktop header

OverviewMessagesResults

Overview sample. No patient data.

05 Cards

Reusable content parts

All card content is sample copy. Price is not an approved offer.

Basic card

One clear next step.

View details

Service card

A place for the service name and short details.

View service

AP

Alex Parker

Sample profile

View profile

Sample price

One visit

$45

per visit · Example only

View price details

Result card

No result is shown in this demo.

Sample stateView results

06 Labels & status

Tags, pills, badges, and dots

Tags & badges

General careNewSample highlight2 new messages

Status pills

ActivePendingCompleteCanceled

Status dots

OnlineAwayOffline

Always pair color with a word or icon.

07 Feedback

Notices, progress, and empty states

Message sent.
This is a sample notice.

File did not upload.
Try again.

Your next step
Review your care plan.

Check your details.
Some fields need a review.

Sample toast: changes saved.

Loading…

No messages yet

Start with a short message.

Loading card

08 Overlays

Modal · Drawer · Popover · Tooltip · Menu

Start a visit

Modal preview. Open it to test focus and Escape.

CancelOpen modal

Modal

Open drawerDrawer

Account menu

ProfileSettings

Popover

More detail about this item.

HelpExtra help. Key care details should not live only in a tip.

09 Content

Avatars, icons, lists, and tables

Avatars & icons

APCLPatient / clinician samples

---

---

• Visit scheduled · Sample
• Care plan ready · Sample

Sample records. No patient data.

Date	Type	Status
Sep 26, 2026	Visit	Complete
Sep 25, 2026	Test	Pending

What happens next?

Your next step goes here. This is sample care text.

How do I send a message?

Open Messages and use the text box. This is a demo, not live care.

10 Messaging

Patient and clinician sample flow

Demo only. Do not enter real health details.

CL

What would you like help with?Clinician sample · 9:14 AM

AP

I have a question about my care plan.Patient sample · 9:16 AM · Sent

Demo visit started

sample-file.pdfAttachment preview only

Message

Nothing is sent. Text stays on this page.

11 Healthcare-specific

Sample structures, not clinical content

Layout samples only. No clinical advice or real patient data.

Condition card

Condition name and short details.

View condition

Treatment card

Your treatment plan belongs here.

View treatment

Prescription card

Name, strength, and full instructions.

View prescription

Lab result

Test, value, unit, and lab range.

View result

Referral card

Who to see and the next step.

View referral

Visit status

Sep 26, 2026 · 3:30 PM Eastern Time

View visit

Care plan

Steps, dates, and who to contact.

View care plan

Provider card

Sample clinician · PA-C

View provider