Design System

After a few years of research and development, in 2021 Patient Discovery undergoes a complete redesign to address multiple missed or errors in the early stages, and aims for friendlier broader approach including, color palette, typography, accessibility, grids and more.

Color Pallete

Purple 01
#753FF5
Purple 02
#5D0EC5
Pink 01
#EB4E93
Pink 02
#B425B7
Yellow
#F8D648
Green
#5DCBBF
Dark 01
#332C54
Dark 02
#453E6F
Mid 01
#6A649A
Mid 02
#918DC7
Mid 03
#C5BFFA
Light 01
#E6E5FD
Light 02
#F5F5FE

Typography

Aa
Roboto
Roboto - Bold 700
Roboto - Regular 400
Roboto - Light 300
1.802rem/28.83px
Header 1
1.602rem/25.63px
Header 2
1.424rem/22.78px
Header 3
1.266rem/20.25px
Subheading
1.125rem/18.00px
Body Large
1rem/16.00px
Body
0.889rem/14.22px
Body Small
0.79rem/12.64px
Header 4

Grids

Desktop

Max width: 1280px
Padding: 57 0 57 0
Gap: 10px
Total Usable Space: 1170px

Tablet

Width: 90%
Padding: 50 0 50 0
Gap: 10px

Mobile

Width: 85%
Padding: 30 0 30 0
Gap: 10px

Animations

Animation continue to be a crucial part in Interface design. To maintain brand guidelines on all aspects of design including animation.

Iconography

Simple Icons

Icons designed for us elements such as navigations and buttons

Spot Illustrations

A more detailed colored icons that are used for forms, surveys, and UI elements that involved user interaction

Components

Forms

Default
A basic and simple form
Active/ Hover
For when a user enters the forms by focus or typing
Errors
Just a few examples of errors in the forms
Success
State of form when user passes validation
Other
Any extra states

Buttons

Primary
Secondary
Tertiary
Default
Default
Default
Default
Hover
Hover
Hover
Hover
Pressed
Pressed
Pressed
Focus
Focus
Focus
Focus
Disabled
Disabled
Disabled
Disabled

Cards

Cards were designed to guide the user through the site faster from the dashboard. Cards show content such as Titles, body, main images, and more

Survey

Single Select List

A simple single select using brand guidelines. These are used during onboarding or tracks to gather information about users in a simple and clean manner.

Multi Select List

Users can select multiple answers in the same approach as single select. These are used to gather information on non-binary questions.

Single Select Grid

Another option for a single select but with visual elements, mostly including of spot illustrations. This options helps the users have a better idea on what they are selecting and decreases confusion.

Multi Select Grid

Just like the multi select and single select grid. This Multi Select Grid option give the user ability to process much more information and with the visual elements it helps them make a better informed decision.