MedScope Design System

100 components · 4 surfaces · Built from Figma

Introduction

Visual reference for MedScope UI — tokens from file XKSlqw5bsQYbJAoudCEzjy (iOS homescreen 4640:12365, HP dashboard 6602:4, PP dashboard 6602:4394). Teal patient app, blue provider portal, teal pharmacy partner portal.

Section 1 — Design Tokens

Colors

Palettes use steps 50–900. --teal and --blue map to --teal-600 and --blue-600.

Base

--white

--black

--teal

→600

--blue

→600

Teal —teal-*

50

100

200

300

400

500

600

700

800

900

Blue —blue-*

50

100

200

300

400

500

600

700

800

900

Gray —gray-*

50

100

200

300

400

500

600

700

800

900

Green —green-*

50

100

200

300

400

500

600

700

800

900

Amber —amber-*

50

100

200

300

400

500

600

700

800

900

Orange —orange-*

50

100

200

300

400

500

600

700

800

900

Red —red-*

50

100

200

300

400

500

600

700

800

900

Typography

9px Regular

The quick brown fox jumps over the lazy dog.

12px Regular

The quick brown fox jumps over the lazy dog.

13px Regular

The quick brown fox jumps over the lazy dog.

15px Regular

The quick brown fox jumps over the lazy dog.

17px Medium

The quick brown fox jumps over the lazy dog.

20px Bold

The quick brown fox jumps over the lazy dog.

24px Bold

The quick brown fox jumps over the lazy dog.

32px ExtraBold

The quick brown fox jumps over the lazy dog.

48px ExtraBold

The quick brown fox jumps over the lazy dog.

Spacing

4px / --space-1

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

Radius + Shadow

--r-sm

--r-md

--r-lg

--r-xl

--r-2xl

pill

shadow-sm

shadow-card

shadow-md

Section 2 — Shared Primitives (25 components)

#1

Buttons

Teal 56×24; Blue 40×20; radius tokens per spec.

#2

Badges

Delivered Pending Cancelled Active Filled VIP

#3

Inputs

Email

Focused

Phone

+91

Error

This field is required

#4

Toggle

Off

On

#5

Checkbox

—

#6

Radio

#7

OTP Input

1

2

3

#8

Select

Option A

Option B

Option C

#9

Textarea

Notes0/200

#10

Avatar

RHRHMSMS

#11

Tag / Chip

Default Teal Blue

#12

Spinner

#13

Skeleton

#14

Progress Bar

#15

Divider

Left

Right

#16

Tooltip

#17

Modal

#18

Bottom Sheet

#19

Toast / Snackbar

Order placed!

Payment failed.

Low stock on 2 items.

3 items updated.

#20

Alert Banner

2 patients require immediate follow-up

5 prescription refill requests pending

#21

Empty State

No prescriptions yet

Upload your first prescription to get started

#22

Step Indicator

1 2 3

#23

Segmented Control

#24

Search Bar

Search medicines…

Search…

#25

Icon Set

home

person

notifications

settings

search

medication

local_pharmacy

calendar_today

description

shopping_cart

favorite

location_on

phone

email

camera_alt

qr_code_scanner

local_shipping

inventory_2

shield

science

bolt

schedule

check_circle

add_circle

more_horiz

chevron_right

arrow_back

close

tune

analytics

people

assignment

Section 3 — iOS Components (35 components)

#26

iOS Status Bar

9:41

#27

iOS Tab Bar

Home

Search

2Rx

1Orders

Profile

#28

Mobile Nav Bar

#29

Refill Card

Metformin

500mg

3days

Refill by Mar 29, 2026

Set Auto-Refill

#30

Refill Count Badge

3days

8days

15days

#31

Quick Action Button Grid

Upload Rx

Scan

Track

Records

#32

Wellness Metric Card

95

Glucose

120/80

BP

72

Weight

#33

Order History Card

Order #RH2401

Mar 28

Delivered

3 items · ₹1,250

#34

Prescription Card

Prescription #2401Verified

Dr. Sharma

Uploaded: Mar 20, 2026

Valid until: Jun 20, 2026

3 medicines prescribed

#35

Medicine List Item

💊

Paracetamol 500mg

Crocin

In Stock 28% OFF

₹25

₹35

💊

Vitamin D3

Generic

₹180

#36

Medicine Detail Tabs

Paracetamol is used to treat mild to moderate pain and fever.

1

#37

Pharmacy Card

MedPlus PharmacyOpen

4.8 (234) · 0.5 km

123 Link Road, Andheri West

Open 24 hours

#38

Order Status Tracker

Order Placed

10:00 AM

Confirmed

10:15 AM

Packed

Out for Delivery

Now

Delivered

#39

Delivery Partner Card

🚲

Vicky

Delivery Partner

#40

Payment Method Row

Cash on Delivery

Credit / Debit Card

Pharmacy Credit (Care)

#41

Coupon Card

HEALTH5050% OFF

50% Off on First Order

Get flat 50% off on your first medicine order

Valid until Mar 31, 2026

#42

Price Display

Bill Summary

Subtotal₹230

Delivery Fee₹40

Savings−₹35

Total₹235

#43

Health Report Card

Blood Test Report

Lab Report

Mar 22, 2026 · Dr. Sarah Johnson

#44

Scan Viewfinder

Scanning…

#45

Onboarding Slide

Buy Right. Order Anywhere.

Order from your trusted local pharmacy — anytime, anywhere.

#46

Profile Form Row

Full Name

Enter your full name

Date of Birth

DD/MM/YYYY

Health ID (Optional) ⓘ

ABC123456

#47

Refill Reminder Banner

Time to refill

Your diabetes medication — 3 days left

#48

Section Header (iOS)

Quick Actions

Your Refills

Order Again

#49

Notification Item

Order #RH2401 has been delivered

2 hours ago

Time to refill: Metformin 500mg

Yesterday

Prescription verified by Dr. Sharma

2 days ago

#50

Settings Row

Notifications

Order Updates

Push for deliveries

Refill Reminders

Before you run out

Offers & Promotions

Deals from pharmacy

Preferences

Dark Mode

Enable dark theme

#51

Support Contact Card

FAQs

Common questions

Live Chat

Avg. 5 min reply

Call Support

1800-000-0000

Email Us

support@raseet.app

#52

Bill Summary Card

Bill Summary

Subtotal₹230

Delivery₹40

Total₹235

Estimated delivery: Mar 27, 2026

#53

Doctor Card

👩‍⚕️

Dr. Sarah Johnson

General Physician

4.9 (234) · 15 years exp

Today, 2:00 PM

₹500

#54

Add to Cart Stepper

1

#55

Consultation Type Button

Video CallInstant

Chat24/7

Section 4 — Android Components (10 components)

#56

Android Status Bar

#57

Android Bottom Navigation

Home

#58

Android FAB

#59

Android Top App Bar

Medicine Details

#60

Android Card Variants

Elevated

Filled

Outlined

#61

Android Search Bar (M3)

Search medicines…

#62

Android List Item (3-line)

Metformin 500mg

Take with meals

Refill in 8 days

Reminders

Push notifications

Enabled

#63

Android Bottom Sheet

Select Pharmacy

MedPlus Andheri

Apollo Pharmacy

Wellness Forever

#64

Android Chip (M3)

All Tablets Syrups

#65

Android Snackbar

Order added to cart

Section 5 — HP Dashboard Components (15 components)

#66

HP Sidebar Navigation

Raseet Health

Healthcare Portal

Dashboard

Patients 24

Prescriptions 8

Medical Records

DR

Dr. Rajesh

Cardiologist

#67

HP Top Header Bar

City Care Clinic

Healthcare Mode

DR

#68

HP Stat Card (4-up)

Today's Appointments

12

4 remaining

Active Patients

248

+8 this month

Pending Prescriptions

5

needs review

Patient Satisfaction

4.8

96% positive

#69

HP Alert Stack

2 patients require immediate follow-up

5 prescription refill requests pending approval

#70

HP Appointment Row

SJ

Sarah Johnson

Follow-up

9:00 AM, 30 min

confirmed

#71

HP Appointment List Panel

Today's Appointments

SJ

Sarah Johnson

Follow-up · 9:00 AM

confirmed

#72

HP Prescription Row

Lisinopril 10mg

Sarah Johnson

filled2 hours ago

Metformin 500mg

Alex Kim

pending1 day ago

#73

HP Patient Table Row

Patient	MRN	Contact	Conditions	Risk
SJ Sarah Johnson 45 · Female	MRN-2024-001	+91 … · email	Hypertension T2D	medium

#74

HP Data Table (Prescriptions)

Rx Number	Patient	Medication	Dosage	Date	Status
RX-2401	Sarah J.	Lisinopril	10mg · 30	Mar 26	filled
RX-2402	Alex Kim	Metformin	500mg · 60	Mar 25	pending

#75

HP Page Header

Patient Management

View and manage your patient records

#76

HP Table Search Bar

Search by name, MRN, or email…

#77

HP Quick Actions Bar

New Patient

Write Rx

View Records

Analytics

#78

HP Status Badge

filled pending cancelled confirmed expired

#79

HP Portal Layout Shell

Raseet · HP

Dashboard

City Care Clinic

12

Appointments

248

Patients

5

Pending Rx

4.8

Satisfaction

2 patients need follow-up

5 refill requests

Section 6 — PP Dashboard Components (15 components)

#80

PP Sidebar Navigation

Raseet Health

Partner Portal

DS

Dr. Sharma

Admin

#81

PP Stat Card (4-up)

Total Orders

1,247

+12%

Revenue

₹3,24,850

+18%

New Customers

89

+24%

Retention Rate

68%

+8% · vs 40–50% industry

#82

PP Trend Badge

+12% −3% +5% vs yesterday

#83

PP Revenue Chart (SVG)

Revenue Trend

#84

PP Order Volume Chart (SVG)

Order Volume

● Delivered● Processing● Cancelled

#85

PP Order Table

Order ID	Customer	Items	Amount	Status
RH-2456	Priya S. Mumbai	3	₹1,250	Processing
RH-2457	Alex K.	1	₹450	Confirmed
RH-2458	Sam P.	2	₹890	Dispatched

#86

PP Customer Table

Customer	Contact	Location	Orders	Total	Status
PS Priya Sharma p@email.com	+91 …	Mumbai	24	₹45,200	ACTIVE

#87

PP Inventory Table

Product	SKU	Category	Price	Stock	Status
Paracetamol 500mg	RH-00N	Tablet	₹25	120	In Stock
Vitamin D3	RH-00V	Tablet	₹180	8	LOW STOCK
Insulin	RH-00I	Injection	₹890	0	OUT OF STOCK

#88

PP Stock Status Badge

In Stock LOW STOCK OUT OF STOCK Attention

#89

PP Prescription Verification Queue

AK

Alex Kim

3 medicines

Jordan Lee

Waiting 1h 15m

Sam Patel

Waiting 25m

Prescription Document

Patient: Alex Kim · MRN: 1024

#90

PP Inventory Filter Chips

All Tablets Syrups Injections Out of Stock

#91

PP Quick Actions Panel

Quick Actions

#92

PP Low Stock Alert Banner

3 items below threshold — Paracetamol 500mg, Vitamin D3, Insulin

#93

PP Wait Time Badge

Waiting 0h 30m Waiting 1h 15m Waiting 2h 30m

#94

PP Page Header

Orders Management

Track and manage all customer orders

Inventory

Catalog management

#95

PP Portal Layout Shell

Raseet Health

Partner Portal

MedPlus — Andheri West

Good morning, Dr. Sharma

47

Today's Orders

5

Pending Rx

3

Low stock

₹24,850

Revenue

3 items below threshold

Recent Orders

RH-2456 · Processing

Quick Actions

View all →

Section 7 — Full Screen Compositions (6 screens)

A

iOS Homescreen

9:41

Raseet Health

Mumbai, Andheri West

Search medicines…

Time to refill
Diabetes med — 3 days

Quick Actions

Upload Rx

Scan

Track

Records

Health Services

Consult Doctor

Chat Pharmacist

Nearby Pharmacy

My Wishlist

Your Refills

Metformin
8 days left

Lisinopril
12 days left

Home

Search

Rx

Orders

Profile

B

iOS My Medications

9:41

3 active medications

Metformin

3 days supply left

3

Lisinopril

8 days supply left

Vitamin D3

15 days supply left

Home

Rx

Profile

C

iOS Payment

9:41

Cart ✓PaymentConfirm

Order summary

Total₹235

Cash on Delivery

Card

Your payment is secured

D

HP Dashboard Home

Raseet HP

Dashboard

Good morning, Dr. Anderson

Thursday, March 26, 2026

12

Appointments

248

Patients

5

Pending Rx

4.8

Satisfaction

2 patients require immediate follow-up

5 refill requests pending

Today's Appointments

Sarah J. · 9:00 AM

Recent Prescriptions

Lisinopril · filled

New Patient

Write Rx

E

PP Dashboard Home

Raseet

Partner Portal

Good morning, Dr. Sharma

47

Orders

5

Pending Rx

3

Low stock

₹24,850

Revenue

3 items below threshold — Paracetamol, Vitamin D3, Insulin

Recent Orders

RH-2456

Processing

Quick Actions

Process (12) →

F

PP Inventory

Raseet PP

Inventory

Manage catalog

AllTabletsOut of Stock

Product	SKU	Stock	Status
Paracetamol	RH-00N	120	In Stock
Vitamin D3	RH-00V	8	LOW
Insulin	RH-00I	0	OUT

Bottom sheet

Slide-up panel content. Tap backdrop to close.