Color System

Brand & Semantic Tokens

Primary

--primary · #431843

Primary Dark

--primary-dark · #003c8f

Primary Light

--primary-light · #E3F2FD

Secondary

--secondary · #00838F

Success

--success · #2E7D32

Success Light

--success-light · #e8f5e9

Warning

--warning · #BF4400

Warning Light

--warning-light · #fff3e0

Error

--error · #B00020

Error Light

--error-light · #ffdad6

Surface & Text Tokens

On Surface

--on-surface · #1A1C2E

On Surface 2

--on-surface-2 · #5C6070

On Surface 3

--on-surface-3 · #767676

Surface

--surface · #FFFFFF

Surface Variant

--surface-var · #EEF2FF

Page BG

--page-bg · #E8EAF6

Divider

--divider · #E2E8F0

WCAG 2.1 AA Contrast Ratios

Foreground	Background	Ratio	AA Normal	AA Large
--on-surface	--surface (white)	16.81:1	Pass	Pass
--on-surface-2	--surface (white)	6.25:1	Pass	Pass
--on-surface-3	--surface (white)	4.54:1	Pass	Pass
white on --primary	--primary #431843	14.48:1	Pass	Pass
--success on --success-light	--success-light #E8F5E9	4.56:1	Pass	Pass
--warning on --warning-light	--warning-light #FFF3E0	4.74:1	Pass	Pass
--error on --error-light	--error-light #FFDAD6	5.67:1	Pass	Pass

Typography

Typeface: Roboto · Weights: 300 / 400 / 500 / 700

.h1 20px · Bold 700 · tight

Heading One

.h2 18px · Bold 700 · tight

Heading Two

.h3 16px · Bold 700 · tight

Heading Three

.body-lg 16px · Regular 400

Body large — The quick brown fox jumps over the lazy dog

.body-base 14px · Regular 400

Body base — The quick brown fox jumps over the lazy dog

.body-sm 13px · Regular 400 · on-surface-2

Body small — The quick brown fox jumps over the lazy dog

.body-xs 11px · Regular 400 · on-surface-3

Body extra small — The quick brown fox jumps over the lazy dog

.section-label 11px · Bold 700 · uppercase · tracked

Section Label

.item-title 14px · Medium 500

List Item Title

.item-subtitle 13px · Regular 400 · on-surface-2

List Item Subtitle — supporting text

.link Inherits size · Medium 500 · primary

Anchor link example

Buttons & Actions

Filled & Outlined

.btn.btn-primary

.btn.btn-outlined

.btn.btn-tonal

.btn.btn-danger

Text & Icon Buttons

.btn-text

.icon-btn (on app-bar)

.compose-send-btn

Chips & Badges

Status Chips

Paid.chip-sm.chip-success

Processing.chip-sm.chip-warning

Denied.chip-sm.chip-error

Active.chip-sm.chip-primary

Active.chip-sm.chip-white

Legend Chips

Auth

.chip + .chip-dot

Onboarding

Main Flows

System States

Nav Badge

mail 3 .nav-badge

Avatars

Color Variants (40px)

MC

.avatar-primary

NP

.avatar-teal

LA

.avatar-orange

AP

.avatar-success

HP

.avatar-purple

ER

.avatar-error

Sizes

SJ

22px

SJ

40px (.avatar-40)

SJ

52px (.avatar-52)

SJ

.avatar-sm (app-bar)

Form Elements

Default Field

Email Address

sarah@email.com

.text-field

Error State

Username

sarah.johnsonn

Username not found

.text-field.error

With Icon

Password

••••••••

.text-field + .tf-icon

Placeholder

Search

Enter search term

.tf-placeholder

Toggle Switch

.toggle.on

.toggle (off)

OTP Input

3

8

2

.otp-box / .otp-box.filled

Search Bar

.search-bar

Navigation

Bottom Navigation Bar

App screen content

.bottom-nav > .nav-item / .nav-item.active / .nav-item-rel + .nav-badge

Tabs

.tabs > .tab / .tab.active

App Bar

Screen Title

.app-bar > .icon-btn / .app-bar-title

List Items

Dr. Maria Chen

Results look normal, follow up in...

2h

Nurse Practitioner

Your prescription has been renewed

Yesterday

Personal Information

Two-Factor Auth

.list-item / .item-body / .item-title / .item-subtitle / .item-meta / .msg-trailing / .unread-dot / .chevron

Cards & Surfaces

Standard Card

MC

Dr. Maria Chen

Primary Care

Confirmed

Mar 15 · 10:30 AM

.card.card-padded

Alert Card

Lab results ready

Reviewed by Dr. Chen

View

.card.alert-card

Insurance Card

Red Cross Red Shield PPO

Group #: BCB-2024-887234

Policy #: POL-SJ-20190314

.insurance-card

Hero Card

Good morning, Sarah 👋

Member since 2019 · Red Cross PPO

.hero-card

Feedback & Overlays

Error Banner

.error-banner

Toast

Appointment scheduled successfully!

.toast / .toast-icon / .toast-text / .toast-action

Modal Card

.modal-card

Progress & Steppers

Registration Progress Bar

.reg-progress > .reg-progress-seg.on / .off

Step Indicator

1

Email

2

Verify

3

New

.step-row / .step-item / .step-circle.active / .step-line

Deductible Progress Bar

Deductible

$250

of $1,500

.progress-bar-track / .progress-bar-fill

Domain Components

Care Grid Cards

local_hospital

Primary Care

In-network

emergency

Urgent Care

Open now

videocam

Virtual Visit

On-demand

self_improvement

Mental Health

In-network

.care-grid > .care-card / .care-icon.care-icon-{blue|orange|green|purple|teal|red}

Benefit Row

Preventive Care: 100% Covered
Specialist Visit: $40 copay
Emergency Room: $250 deductible

.benefit-row / .benefit-name / .benefit-val

Claim Key-Value Row

Amount Billed$180.00

Plan Paid$130.00

Deductible Applied$0.00

Your Cost$25.00

.claim-detail-section / .claim-kv / .claim-total-row

Provider Components

Star Rating

★★★★★ 4.9 (127)

unicode ★ · color #F59E0B · .body-sm

★★★★☆ 4.7 (89)

partial — ☆ for empty

Filter Chips (Scrollable Row)

active: .chip-sm.chip-success + check icon / inactive: border:1px solid var(--border) · aria-pressed

Provider Result Card

Dr. Maria Chen

Primary Care · 0.3 mi

4.9 (127)

In-Network

Dr. Aisha Patel

Internal Medicine · 1.2 mi

4.8 (203)

Out-of-Net

.list-item align-items:flex-start · trailing column: network chip + Book button · in-net → .btn-primary / out-of-net → .btn-outlined

Provider Hero

MC

Dr. Maria Chen

Primary Care Physician

4.9 · 127 reviews

In-Network Accepting Patients

15+

Years Exp.

$25

Copay

0.3 mi

Distance

avatar 64×64 · .h2 name · .body-sm specialty · star rating · network + status chips · .stat-row stats bar

Booking & Scheduling

Segmented Button (Visit Type)

active: border:2px solid var(--primary) · bg:var(--primary-light) · color:var(--primary) / inactive: border:1px solid var(--border) · bg:var(--surface) · aria-pressed

Calendar Date Picker

March 2026

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

15

Selected — bg:var(--primary) · white text · 50% radius

16

Available — color:var(--on-surface)

1

Past / unavailable — color:var(--on-surface-3) · aria-disabled

Time Slot Chips

9:00 AMAvailable

10:30 AMSelected — .chip-sm.chip-success · aria-pressed=true

2:00 PMUnavailable — bg:var(--surface-var) · disabled attr

Appointment Card with Actions

Dr. Maria Chen

Primary Care

Confirmed

Mar 15, 2026 · 10:30 AM

450 Sutter St · In-Person

Upcoming · Confirmed — .chip-success · actions: .btn-outlined + .btn-text (error color)

Dr. James Park

Primary Care

Pending

Apr 2, 2026 · 2:00 PM

Video Visit

Upcoming · Pending — .chip-warning · video icon instead of location

Dr. Maria Chen

Primary Care

Completed

Feb 10, 2026 · 9:00 AM

Past · Completed — opacity:0.75 · neutral chip · no action buttons

Health Records

Lab Result List Item

Comprehensive Metabolic Panel

Feb 28, 2026 · Dr. Maria Chen

1 Abnormal

Lipid Panel

Feb 15, 2026 · Dr. Maria Chen

Normal

Complete Blood Count

Mar 5, 2026 · Dr. Maria Chen

Pending

avatar-{error|success|orange} · science icon (font-size:0 on wrapper, 20px on icon) · trailing: .chip-{error|success|warning}

Result Range Indicator (Abnormal Row)

Cholesterol Total

Ref: <200 mg/dL

215 mg/dL ↑

High

0Normal <200300 mg/dL

abnormal row bg: var(--error-light) · gradient bar: var(--success) → var(--error) split at threshold % · marker: 12px circle at value%, border:2px solid white · value ↑ in var(--error)

Prescription Card — Refill States

Lisinopril 10mg

Once daily · Blood Pressure

3 Refills

Dr. Maria Chen

Last filled Feb 1 · CVS Caremark

Many refills — .chip-success · .btn-primary

Atorvastatin 20mg

Once daily · Cholesterol

1 Refill

Dr. Maria Chen

Last filled Jan 15 · CVS Caremark

Low refills — .chip-warning · still .btn-primary (action still possible)

Metformin 500mg

Twice daily · Diabetes

No Refills

Dr. Maria Chen

Last filled Dec 10 · CVS Caremark

No refills — .chip-error · .btn-outlined (different action: renewal, not refill)

Empty State

Use when a list or view has no content. Always provide an illustration, a clear reason, and a primary action to resolve the state.

No Upcoming Appointments

You don't have any scheduled appointments. Book a provider to get started.

Anatomy

.illus-circle + icon

Illustration	.illus-circle + Material icon · centered
Title	.h2 · describes what's missing
Body	.body-sm · on-surface-2 · explains why + what to do
Primary CTA	.btn-primary · w-full · direct action to fill the state
Secondary	.btn-text · optional escape hatch

Container: role="status" · Tabs above empty content retain context · text-align:center on container

17. Auth & Onboarding States

17a – Biometric Auth Prompt

Jane Doe

jane.doe@email.com

Touch the sensor or look at your camera

AUTH · 03 — Biometric Login

Element	Spec
User avatar	.avatar-primary.avatar-52 — confirms identity context
Biometric button	72×72px circle · bg: var(--primary-light) · border: 2px solid var(--primary) · icon: fingerprint 36px
Primary CTA	.btn-primary · full-width · "USE FACE ID" or "USE TOUCH ID"
Escape hatch	.btn-text · "Sign in with Password"

aria-label on button describes method · no redundant visible text on icon

17b – Celebration Success State

You're all set!

Your account is ready.

WHAT YOU CAN DO

Find Care

View Coverage

ONBOARDING · 04 — Registration Success

Element	Spec
Top band	bg: var(--primary) · text: #ffffff · flex-col center
Icon circle	80×80px · bg: rgba(255,255,255,0.2) · icon: check_circle 48px white
Feature tile	44×44px · border-radius:10px · bg: var(--primary-light) · icon 22px var(--primary)
Container	role="status" · aria-live="polite" on article
CTA	.btn-primary · full-width · "GET STARTED"

No app bar — full-screen celebration removes chrome distraction

17c – Skeleton Loading

SYSTEM · 04 — Skeleton Loading

Rule	Value
Skeleton color	background: var(--divider) — consistent neutral gray
Shape mirroring	Match target element shape: circles for avatars, rounded rects for text/cards
Text bars	Height 10–14px · border-radius 3px · vary widths (50–80%) for realism
Chips / badges	height 20–22px · border-radius 16px · width ~60px
Accessibility	aria-busy="true" · aria-live="polite" on article
No animation	Wireframe fidelity — omit shimmer in HTML prototype

Mirror real layout exactly — skeleton should be 1:1 with loaded state

Chat & AI Components

Components for the HealthBot AI assistant. All chat screens are accessible via the Chat bottom-nav tab (CHAT · 01–09). Category color: #1565C0.

18a – Chat Bubbles

Bot (Incoming)

HealthBot

Hi Sarah! How can I help you today?

.chat-bubble-row.bot · .chat-bot-icon · .chat-bubble.chat-bubble-bot · border-bottom-left-radius:4px

User (Outgoing)

I need to refill my Lisinopril prescription.

10:43 AM · Delivered

.chat-bubble-row.user · flex-direction:row-reverse · .chat-bubble.chat-bubble-user · bg:var(--primary) · color:white · border-bottom-right-radius:4px

Date Divider

TODAY · 10:42 AM

.chat-date-divider · font-size:10px · color:var(--on-surface-3) · letter-spacing:0.4px

18b – Typing Indicator

HealthBot

HealthBot is looking up your claim...

.chat-typing-bubble · 3× .chat-typing-dot · dot opacity: 1 / 0.55 / 0.25 · aria-live="polite" · send button disabled

Rule	Value
Dot sizes	6×6px · border-radius:50% · bg:var(--on-surface-3)
Opacity cascade	dot 1: 1.0 · dot 2: 0.55 · dot 3: 0.25
App bar status	Replace "Online" with "typing..."
Send button	disabled attr · bg:var(--divider)

18c – Chat Input Bar

Default (empty)

attach_file

Ask me anything...

send

.chat-input-bar · .chat-input-btn-ghost · .chat-input · .chat-input-btn-send

With active text

attach_file

Book with Dr. Chen tomorrow

send

Active state: .chat-input border:1.5px solid var(--primary)

Image/File variant

add_photo_alternate

Type a message...

send

Photo-first context: add_photo_alternate icon replaces attach_file

18d – Quick Reply Chips

Chat area above

attach_file

Or type your own...

send

.chat-quick-replies (overflow-x:auto, flex-shrink:0) · .chat-quick-reply · border:1.5px solid var(--primary) · sits between chat area and input bar · role="group"

18e – Rich Card Response

Appointment card

event

Dr. Maria Chen

Primary Care · In-Network

calendar_todayMar 18, 2026 · 10:30 AM

location_on450 Sutter St · In-Person

payments$25 copay · In-Network

Available

BOOK THIS SLOT

.chat-rich-card · .chat-rich-card-header (gradient) · .chat-rich-card-body · .chat-rich-card-row · .chat-rich-card-action · max-width:210px · margin-left:29px (aligns with bubble text)

Element	Style
Card radius	border-radius:16px · border-bottom-left-radius:4px (matches bot bubble)
Header bg	linear-gradient(135deg, var(--primary), var(--primary-dark))
Row icons	font-size:12px · color:var(--secondary)
Action strip	bg:var(--surface-var) · color:var(--primary) · border-top:1px solid var(--divider)

18f – Image Attachment Bubble

photo

Insurance_Card.jpg · 3:16 PM

.chat-img-bubble · 140×88px · border-bottom-right-radius:4px · bg:var(--surface-var) · role="img" with aria-label

Accepted file types shown in caption below bubble. Bot response should acknowledge the attachment and extract relevant information. For wirframes use the photo Material icon as a placeholder.

18g – Bot App Bar States

Online

smart_toy

HealthBot

Online · AI-powered

Online: green dot #69F0AE · subtitle "Online · AI-powered"

Typing

smart_toy

HealthBot

typing...

Typing: no dot · subtitle "typing..." · italic recommended

Connecting to Agent

smart_toy

HealthBot

Connecting to agent...

Escalation: no dot · subtitle "Connecting to agent..."

18h – Escalation to Live Agent

.chat-escalation-card · agent avatar .chat-agent-avatar (bg:var(--secondary)) · .chat-wait-badge (bg:var(--success-light)) · 3-action stack · bottom-sheet border-radius:20px 20px 0 0

The escalation sheet is a bottom sheet modal — slides up from the bottom of the phone frame. The conversation behind it is dimmed (opacity:0.35) and set to aria-hidden="true".

Element	Value
Agent avatar	52px · bg:var(--secondary) · initials
Wait badge	.chat-wait-badge · bg:var(--success-light) · schedule icon
Live agent icon	support_agent (Material) for history items
Background	opacity:0.35 · aria-hidden="true"

18i – Conversation Feedback

How did we do?

Rate your conversation with HealthBot.

★ ★ ★ ★ ★

Good

.chat-feedback-icon · .chat-stars · .chat-star (color:#F59E0B) · .chat-star-empty (color:var(--divider)) · role="group" with aria-label

Rating	Label
★☆☆☆☆	Poor
★★☆☆☆	Fair
★★★☆☆	Okay
★★★★☆	Good
★★★★★	Excellent

Star color: #F59E0B · empty: color:var(--divider) · font-size:26px · gap:5px

18j – Chat History List Items

smart_toy

Prescription refill — Lisinopril

Refill sent to CVS Caremark · 4 min

2h

support_agent

Live Agent — Claim dispute

Dispute submitted for CLM-0198

Yesterday

smart_toy

Find a doctor — Cardiology

3 in-network cardiologists found

Mar 2

AI conversations: .chat-history-icon bg:var(--primary) · smart_toy icon / Live agent: bg:var(--secondary) · support_agent icon · Unread: .unread-dot in .msg-trailing

18k – Chat FAB

add_comment

.chat-fab · position:absolute · bottom:66px (above bottom-nav) · right:14px · add_comment icon · box-shadow:0 4px 14px rgba(67,24,67,0.45)

18l – Screen Flow Order

Screen	Role	Triggers From	Leads To
CHAT · 01	AI Assistant Home	Chat tab in bottom nav	02 (tap any topic/input)
CHAT · 02	Active Conversation	01 or 09	03, 04, 05, 06, 07, 08
CHAT · 03	Typing Indicator	After user sends message	02 (bot responds)
CHAT · 04	Rich Card Response	02 (structured answer)	02 or MAIN · 09 (book)
CHAT · 05	Quick Replies	02 (bot asks branching question)	02 (chip selected)
CHAT · 06	Image Attachment	02 (attachment icon tapped)	02 (bot reads image)
CHAT · 07	Escalation to Human	02 (complex query detected)	02 or live agent queue
CHAT · 08	Conversation Feedback	02 (user ends / bot wraps up)	01 or 09 after submit
CHAT · 09	Chat History	01 (view all) or back button	02 (resume any conversation)