Atomic Design System Health Pal Design System Version 1.

Introduc5on

Health Pal’s design language system is a development tool that brings

cohesion to the digital product’s user interface and experience.

All brand and UX components including usage documentaFon will be

managed here. Changes sync to the whole team, and designers can
switch to the latest version or roll back updates at any Fme.

This file has been built based on Atomic Design principles, an

effecFve interface design system which is not a linear process, but
rather a mental model to help my team members think of our user
interfaces as both a cohesive whole and a collecFon of parts at the
same Fme.

Index

Fundamentals Atoms Molecules Organisms

Voice and Tone BuNons Input with Label BoNom NavigaFon

Brand Colors Checkboxes Search Field Dialogs
Typography Switches Date Picker Half Screen BoNom Sheets
Grids SelecFon BuNons Text Area AcFve Search Result Cells
Iconography Segmented Controls Search Bar Cards
Images Tool Tips
Logos Messaging
IllustraFons IllustraFons

Do’s and Dont’s

Gradients
Cards
SelecFon Controls
Text Readability

Fundamentals Fundamentals
Colors
Iconography With our product we are geing to the heart of what maNers most our customers. Our visual design
Typography elements create an impression that Health Pal is fundamentally designed around paFent needs -
Grid Systems something very different to a typical healthcare experience.

Voice and Tone

Health Pal’s personas are representaFons of a cluster of our target customers who exhibit similar
aitudes, goals, and behaviors in relaFon to our product. Thanks to our personas, our design team is able
to keep the real user at the heart of everything we design.

Nya: The Teacher

Nya is a 34yr teacher living in California with her husband and raising two
children. Her Fme is valuable and she needs a way to submit what she’s
looking for in a health pracFFoner and have someone do the research
and make the appointments for her and her family. She wants to make
her health a priority and keep up with her regualr appointments, but she
is unable to do so with her busy schedule.

MoKvaKons

MoFvated to book the top health pracFFoner’s based on Google and

Yelp raFngs.
Nya is interested in learning more about alternaFve therapy treatments.

Alex: The Triathlete

Alex is a 40yr product director at a corporate investment and incubaFon

firm and triathlete. He struggles with finding health pracFFoners near his
office that have available appointments that work with his schedule.

MoKvaKons

MoFvated to treat injuries from being an athlete and oUen see’s health
pracFFoner’s for preventaFve maintenance and rouFne body care.
Alex does not have Fme to call mulFple health pracFFoners to see if they
provide a parFcular service.

Kate: The College Student

Kate is a 21yr college student living in Boston. She’s been adjusFng to

this new independence in her life and is sFll learning to keep up with the
process of booking her yearly health exams. Since Kate is new to Boston,
she feels overwhlemed when trying to select a doctor out of the many
provided to her through her insurance’s web portal.

MoKvaKons

MoFvated to find a new general health pracFFoner.

Kate is a liNle embarrassed about asking certain health quesFons over
the phone and would like to make appointments via text message or
booking through an app to make her feel more comfortable.

Brand Colors

Color is an extremely purposeful branding tool. It crosses language barriers to become the most powerful
symbol of brand consistency. To promote global recogniFon for Health Pal, we use cohesive, consistent
and ownable brand colors. Studies have shown that color can increase brand recogniFon by up to 80%.

For Health Pal, the primary color chosen for our paleNe is a soothing Green. Green is thought to relieve
stress and help heal. Green is a cool color that symbolizes nature and the natural world. Green also
represents tranquility, good luck, and health. Did you know those who have a green work environment
experience fewer stomachaches?

Health Pal’s expressive secondary colors are hues of green and blue which provide an important
supporFng role. Also included is a hot cool pink that is a split complementary color. Harmonious and
interesFng, split-complementary colors will give our app just enough contrast to draw aNenFon to
important details.

Colors

Primary Color Secondary Color Image Gradient

#0E353B #0E353B #0E353B

System Colors

Light Cyan Lavender Playful Accent Plum

#D3F2F0 #E7DDFF #FF50F4 #813B6E

H1 Header Body Copy InacKve State Divider Line Background

#1C2637 #727680 #D6D6DB #EFF0F3 #FFFFFF

iOS Icons

Typography

Text and typography oUen define an interface—the majority of any app’s UI is text. Having a suitable
typeface that’s set well is criFcal for an interface and, because Health Pal is a design led company, we
care a great deal about the expression of our interface. We needed a soluFon that would lend a
consistent voice across all mediums and plaporms we support—web, iOS, and android.

We are using Google’s free open source font, Lato, which renders beauFfully on the browser and
with good readability. Lato is a classic font which pairs well with Open Sans and Raleway. It was designed
by Łukasz Dziedzic in 2010 and has been widely adopted aUerward. Currently, it is adopted by more than
8,600,000 websites.

Font - Lato

1st Level Headline | 30pt Black

This is the largest header for welcoming and onboarding

2nd Level Headline | 24pt Bold

This is a modal header for booked appointments

3rd Level Headline | 18pt Bold

This is the most used Ktle header for list cells, cards, and paragraphs

4th Level Headline | 16pt Black

This header is used for the name of the health or wellness prac55oner

Copy Text

Paragraph | 18pt Bold Bullet Points

Lorem ipsum dolor sit amet, consetetur sadipscing • Cold Laser Therapy • Spinal & Postural
elitr, sed diam nonumy eirmod tempor invidunt ut • ChiropracFc Care • CorrecFve Exercises
labore et dolore magna aliquyam erat, sed diam
• Myofascial Release • NutriFonal Counseling
voluptua. At vero eos et accusam et justo duo dolores
• Acupuncture • Lifestyle Advice
et ea rebum.

14pt Regular 14pt Regular

Grids

Android Material 8pt Grid

iOS SoV 8pt Grid

Web Responsive Layout Grid

Grid Details

hNps://material.io/design/layout/responsive-layout-grid.html#grid-customizaFon
hNps://medium.com/sketch-app-sources/soU-8pt-grid-for-sketch-e6c3f3556960

Atoms Atoms
BuNons
Checkboxes Atoms are the basic building blocks of maNer. Applied to web and naFve app interfaces, atoms are our
Switches buNons, checkboxes, switches, selecFon buNons, segmented controls, images, logos, and illustraFons.
SelecFon BuNons
Segmented Controls

Images
Logos
IllustraFons

BuXons

Android iOS

Normal Btn Normal Btn Normal Btn Normal Btn Normal Btn

Pressed Btn Pressed Btn Pressed Btn Pressed Btn Pressed Btn

Disabled Btn Disabled Btn Disabled Btn Disabled Btn Disabled Btn

Secondary Btn Secondary Btn Secondary Btn Secondary Btn Secondary Btn

Normal Btn Normal Btn Normal Btn Normal Btn Normal Btn

Pressed Btn Pressed Btn Pressed Btn Pressed Btn Pressed Btn

Disabled Btn Disabled Btn Disabled Btn Disabled Btn Disabled Btn

Checkboxes Switches Checkboxes Switches

SelecKon BuXons Segmented Controls

OpFon 1 OpFon 2 OpFon 1 OpFon 2

OpFon 1 OpFon 2 OpFon 1 OpKon 2

Images

Doctor Profile - Office Images Home Card Profile Profile Profile

Logo

Health Pal

IllustraKons

Molecules Molecules
Input with Label
Search Field Things start geing more interesFng and tangible when we start combining atoms together. Molecules
Date Picker are groups of atoms bonded together and are the smallest fundamental units of a compound. These
Text Area AcFve molecules take on their own properFes and serve as the backbone of our design systems.
Search Bar
Tool Tips
Messaging

Input with Label Search Field

type symptom, doctor, or treatment…

Label

Input

Input Filled Text Area AcKve

Describe Symptoms

I am experiencing pain in my leU

achilles tendon. Interested in cold
Date Picker laser treatment or other
recommendaFons.

Monday, September 7
258
S M T W T F S

6 7 8 9 10 11 12

Search Bar Tool Tips

iOS

Browse Health PracFFoners

Got a quesKon?
Looking for something?
Ask your Health Pal
If you have not talked to
Android who can provide
your Health Pal yet, try
recommendaFons and
searching for a doctor or
book your next
wellness expert here.
appointment for you.
Browse Health PracFFoners

Messaging

Info Warning

A short, auto-expiring info message A short, auto-expiring warning message

Success Error

A short, auto-expiring success message A short, auto-expiring error message

Organisms Organisms
BoNom NavigaFon
Dialogs Molecules give us some building blocks to work with, and we can now combine them together to form
Half Screen BoNom Sheet organisms. Organisms are groups of molecules joined together to form a relaFvely complex, disFnct
Search Result Cells secFon of an interface.
Cards

BoXom NavigaKon

Android iOS

Home Assistant Schedule Calls Profile Home Assistant Schedule Calls Profile

Dialogs

Half Screen BoXom Sheet

Search Result Cells Cards

Dr. Olivia Wild 0.2mi

Health Chart
Physical Therapist
18 Reviews Track your annual physical, dental, skin, and
vision exams with your Health Chart.
Madison Park, SeaNle

8:30am 10:00am 10:00am

View Chart

Blake Johnson, DC 0.3mi

Chiropractor
12 Reviews
My Doctors
Madison Park, SeaNle
Lorem ipsum dolor sit amet, consectetur
6:30pm 9:00am 1:30pm 2:30am
adipiscing elit, sed do eiusmod tempor.

Find Doctors

Do’s and Dont’s Do’s and Don’ts

Gradients
Image Cards
When building an inclusive design language system with systems thinking, our design system is only as
SelecFon Controls
strong as our relaFonships with the teams who use it. For a robust design system to work, our company
Text Readability
needs a mature culture that empowers people develop the system together. Without this, designers may
feel like the system is limiFng or blocking their creaFvity. Our intent is to conFnue to support teams as
they build a sustainable design system community together and form an organic alliance. The purpose is
to meet our customers at the visceral, behavioral and reflecFve level. We want our customers to
experience emoFons such as admiraFon and trust, which require Fme to build. Consistency in interfaces,
will build trust by constantly proving customer expectaFons true.

Gradients Image Card Treatment

Wellness Medical

Do Don’t Don’t

Do, use Lato font in bold and Don’t, select images and place
select background images that Lato font over image without
are easy to interpret. Keep a transparent overlay layer as
images clean, bright, posiKve, seen here.
and minimal. For cards use
overlay #1A3228 at 40%
opacity.

SelecKon Controls

Title Title

Line item unselected Line item unselected

Line item selected Line item selected

Line item unselected Line item unselected

Line item selected Line item selected

For all plaeorms iOS, Android, and Web do keep all For all plaeorms iOS, Android, and Web do not place
selecKon controls to the right side of line item. selecKon controls to the leV side before the line item.

Text Readability

Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Lorem ipsum dolor sit amet, consectetur adipiscing elit, tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitaFon ullamco laboris …
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitaFon ullamco laboris …

In ReKna, the most ideal text size for reading is about 16pt,
while typography should be at least 12pt to be legible at a
typical reading distance without zooming. The general rule
for our product is 12pt for small text, and 16pt for body
text and 18pt+ for Ktles.