Sapa · Sarana × Erha

Design System

QA surface for tokens, type, and primitives — Phase 1 (v2.0).

← Kembali ke EMR

Color tokens

background
#F4F6FA
card / surface
#FFFFFF
border
#E4E8F0
border-strong
#D4DAE6
primary (navy)
#0E2A47
navy-soft
#3A4A63
muted-foreground
#8A95A8
accent (teal)
#0F9E9E
teal-bg
#E7F5F5
amber
#E2A23A
amber-bg
#FBF1DD
red
#D64A4A
red-bg
#FBE9E9
green
#2F9E5B
green-bg
#E6F4EC

Type scale

display 28 / 700
Sapa Copilot
h1 22 / 700
Konsultasi Melasma
h2 17 / 600
Anamnesis
body-strong 14 / 600
Sari Handayani
body 14 / 400
Pasien mengeluh flek hitam di pipi sejak liburan.
small 12.5 / 500
Subjective — riwayat & keluhan
micro 11 / 600 uppercase
Rekomendasi

Buttons

Chips & status pills

AI MatchPerhatianTidak disarankanAlternatif aman12 mntResepmendengarkansiapperhatiankontraindikasiselesai

Avatar & confidence bar

SH
NP
PL
H
92%
74%
48%
22%

Banners

Section card

Diagnosis

Assessment

Melasma · Fitzpatrick IV · kulit kombinasi

Distilasi otomatis dari percakapan konsultasi.

Rekomendasi

AI suggestion

Truwhite Activator C SerumPagi
88%

Peringatan

Safety check

Retinoid dikontraindikasikan pada kehamilan.