CasePlus Design System

UI component library and design tokens for the CasePlus Hospital Management System

Color Palette

Primary

#6F31C3

Primary Gradient

#6F31C3 → #B78DFF

Neutrals

#FAF7FF

#F3F0FF

#E9E4FF

#DCD6F7

#BABACA

#2B2D3A

Semantic Colors

Success

Pending

Hold

Info

Error

Gradient Backgrounds

Data Visualization

Line Chart

1 May10 May20 May31 May

Donut Chart

General156 (42%)

Surgery92 (25%)

Internal Medicine68 (18%)

Pediatrics32 (9%)

Others20 (6%)

Table Style

Patient Name	ID	Status	Date
A. Schultz	CASE-2026-0016	Success	21 May 2026
R. Richardson	CASE-2026-0015	Pending	21 May 2026
N. Hamilton	CASE-2026-0014	Hold	20 May 2026
C. Morales	CASE-2026-0013	Success	20 May 2026

Typography

Poppins

Light · Regular · Medium · SemiBold · Bold

Display / 32px / Bold

The quick brown fox

Heading 1 / 24px / SemiBold

The quick brown fox jumps over the lazy dog

Heading 2 / 20px / SemiBold

The quick brown fox jumps over the lazy dog

Heading 3 / 16px / SemiBold

The quick brown fox jumps over the lazy dog

Body 1 / 14px / Regular

The quick brown fox jumps over the lazy dog

Body 2 / 12px / Regular

Caption / 11px / Regular

Buttons

Primary

Hover

Secondary

Tertiary

Input Fields

Pagination

…

Breadcrumb

Patient Journey

Pre-Admission

Admission

Pre-Procedure

Procedure

🛏

Recovery

📄

Discharge & Follow Up

Status Labels

SuccessPendingHoldSuccessPendingHoldSuccessPendingHold

Icons Style

UI Elements

CheckedUncheckedSelectedUnselected

Switch on

Switch off

Badges

NewUpdatedImportantLow Priority

Card Styles

👥

Total Patients

1.248

+8.2%from last month

💰

Total Revenue

Rp 128.450.000

+12.5%from last month

🛏

Room Utilize

78%

+5.6%from last week