Professional Documents
Culture Documents
Health Pal Design Documentation
Health Pal Design Documentation
Health Pal Design Documentation
Introduc5on
Index
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.
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
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.
MoKvaKons
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
System Colors
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
This is the most used Ktle header for list cells, cards, and paragraphs
This header is used for the name of the health or wellness prac55oner
Copy Text
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.
Grids
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
Images
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
Describe Symptoms
Monday, September 7
258
S M T W T F S
6 7 8 9 10 11 12
iOS
Messaging
Info Warning
Success Error
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
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
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
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.