Color System

Warm, healthy, alive. Inspired by Apple Health.

Signature Gradient

--health-gradient: #0A84FF to #30D158

Core

#0A84FF Primary

#E8F4FD Primary Soft

#FFFFFF Surface

#F2F2F7 Secondary

#E5E5EA Tertiary

#F2F2F7 Background

Text

#1C1C1E Primary

#636366 Secondary

#C7C7CC Tertiary

Health Zones

#30D158 Optimal

#FFD60A Attention

#FF9F0A Warning

#FF3B30 Critical

Category Colors

Vitals

Medication

Wellbeing

Vaccination

Lab

Document

Event

Allergy

Accent

#FF6B6B Coral

#36D1A0 Mint

Typography

SF Pro system stack. Clear hierarchy from hero data to footnotes.

Data Value XL

48px / 800 / -1px

98.6

Data Value

36px / 700 / -0.5px

120/80

Large Title

34px / 700 / -0.4px

Health Dashboard

Title 1

28px / 700 / 0.36px

Measurements

Title 2

22px / 700 / -0.26px

Blood Pressure

Title 3

20px / 600 / -0.45px

Recent Entries

Headline

17px / 600 / -0.41px

Medication Schedule

Body

17px / 400 / -0.41px

Take 1 tablet with food in the morning.

Callout

16px / 400 / -0.32px

Your glucose is within the normal range.

Subheadline

15px / 400 / -0.24px

Last measured: 2 hours ago

Footnote

13px / 400 / -0.08px

Source: City Polyclinic #12

Caption 1

12px / 500 / 0

SYSTOLIC PRESSURE

Caption 2

11px / 400 / 0.07px

Updated 5 min ago

Spacing Scale

Base unit: 4px. Consistent rhythm across all components.

sp-1

4px

sp-2

8px

sp-3

12px

sp-4

16px

sp-5

20px

sp-6

24px

sp-8

32px

sp-10

40px

sp-12

48px

Border Radius

Large, rounded, modern. No sharp corners.

16px

Card

14px

Button

12px

Input

8px

Chip

999px

Pill

50%

Avatar

Depth & Shadows

No visible borders on cards. Shadows only. Subtle and layered.

Card

Elevated

Modal

Buttons

Gradient primary. Clean secondary. All with 14px radius and 50px height.

Standard Buttons

Add Measurement View History Cancel Delete Record

Small Buttons

Save Edit Skip Remove

Icon Buttons

Input Fields

No visible border by default. Subtle background. Focus reveals primary ring.

Measurement Value

Unit

Date

Error State

Value is out of valid range

Notes

Badges & Chips

Health zone badges and interactive selection chips.

Health Zone Badges

Normal Borderline Needs Attention Critical Scheduled

Category Chips

All Vitals Medications Vaccinations Labs

Avatars

Family member identity. Gradient backgrounds by member.

A

XL (88)

M

LG (64)

E

Default (44)

T

SM (32)

1. Health Ring

Apple Health inspired circular progress. Gradient stroke, rounded linecaps.

85

%

Medication Adherence

3/5

doses

DTP Vaccine

92

score

Daily Health

2. Zone Indicator Bar

Shows where a measurement value falls within health ranges. Marker dot indicates current position.

Systolic Blood Pressure

Low Normal Elevated High

125 mmHg

Body Temperature

Low Normal Fever High Fever

36.8 °C

3. Trend Sparkline with Zone Background

Mini line chart with colored background zones. Green band = normal range.

Blood Glucose (7 days)

Mon Tue Wed Thu Fri Sat Sun

4. Health Summary Tile

Card with icon, metric, large value, sparkline, and trend. Category-colored top bar.

0%

Heart Rate

72 bpm

+5

Blood Pressure

125/82 mmHg

-1.2

Weight

74.5 kg

Good

Wellbeing

4 / 5

5. Family Member Pill

Horizontal pill selector for switching between family members. Active state fills with gradient.

A

Aidar

M

Madina

E

Erasyl

T

Togzhan

6. Passport-Style Card

Child health passport as a beautiful digital document. Gradient accent, photo area, data grid.

Erasyl Akhmetov

Child Health Passport

Active 12 records

Date of Birth

15 June 2023

Blood Type

A (II) Rh+

Allergies

None recorded

Vaccinations

3 of 5 complete

Pediatrician

д-р Нурлан К.

Clinic

City Polyclinic #7

7. Timeline Spine

Vertical spine connecting health events. Colored dots, dashed connector, inline dates.

March 17, 2026

Blood Pressure Measurement

125/82 mmHg — Slightly elevated

March 15, 2026

Medication Taken

Vitamin D3 — 1000 IU morning dose

March 10, 2026

DTP Vaccination (Dose 3)

City Polyclinic #7 — д-р Нурлан К.

March 8, 2026

Wellbeing Check-in

Mood: Good, Sleep: 8 hours, Energy: High

March 5, 2026

Allergy Alert

Seasonal rhinitis — symptoms recorded

8. Vaccine Schedule Timeline

Horizontal progress showing dose completion. Green = done, outlined = upcoming, red border = overdue.

DTP Vaccine Schedule

Diphtheria, Tetanus, Pertussis

2 mo

Done

4 mo

Done

6 mo

Done

!

18 mo

Overdue

5

4 yr

Upcoming

9. Wellbeing Face Selector

Custom illustrated faces with gradient backgrounds. 5 states from struggling to great.

How are you feeling today?

Awful

Bad

Okay

Good

Great

10. Stat Comparison Card

Shows current vs previous period with change indicator and mini visualization.

Average Heart Rate

This Week

72

Last Week

75

-4% improvement

Steps Daily Average

This Week

8.2k

Last Week

6.8k

+20.5% increase

Navigation

Bottom tab bar with gradient floating action button. 5 tabs with the center "Add" raised.

Today

Analytics

Add

Timeline

Settings

Composite: Dashboard Preview

How the components come together in a real screen.

March 17, 2026

Good Morning

Aidar's health overview

A

Aidar

M

Madina

E

Erasyl

92

score

Daily Health Score

Heart Rate

72 bpm

Blood Pressure

125/82

Elevated

Medications

2/3 taken

1 remaining

Wellbeing

Good

DTP Dose 4 — Overdue

Was scheduled for Feb 15, 2026

Overdue

Token Reference

All CSS custom properties at a glance. Copy-paste ready.

Token	Value	Usage
--health-primary	#0A84FF	Primary actions, links, active states
--health-gradient	135deg, #0A84FF to #30D158	Primary buttons, rings, hero elements
--zone-optimal	#30D158	In range, healthy, completed
--zone-attention	#FFD60A	Borderline values
--zone-warning	#FF9F0A	Needs attention
--zone-critical	#FF3B30	Out of range, critical, destructive
--shadow-card	0 2px 12px rgba(0,0,0,0.06)	Default card elevation
--shadow-elevated	0 8px 24px rgba(0,0,0,0.08)	Floating elements, dropdowns
--radius-card	16px	All card containers