Beats Design System Language

A Design System Language was created for Beats so that uniformity could be maintained throughout the app making the app intuitive and predictable. The design is based on 8 point grid system to maintain consistency of the app.

Color Palette

#B388FF

#E8E4E4

#A8A8A8

#4A4A4A

#9687B1

#FFFFFF

Light mode

Dark mode

#B388FF

#131313

#343434

#A8A8A8

#9687B1

#FFFFFF

Buttons

Primary Button

Corner radius:30

Measure

53 px
153 px

Secondary Button

Corner radius:30

Sign up

48 px
344 px

Tertiary Button

Corner radius:10

Calming Music

43 px
360 px

Button Color

#B388FF

Button States

Active

Hover

Selected

Disabled

Button Shadow

Active 

Hover 

Selected

Disabled

No shadow

Blur: 6

Distance: 4

Blur: 14

Distance: 4

No shadow

Typography

Font 

A a

Roboto

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Logo Text

Tag Line Text

Futura

Light  

48 px

Futura

Light Oblique 

24 px

Headings

Futura

Light 

50 px

Heading 1

Roboto

Regular

50 px

Futura

Light 

50 px

Heading 2

Roboto

Medium

20 px

Futura

Light 

50 px

Heading 3

Roboto

Light

30 px

Futura

Light 

50 px

Heading 4

Roboto

Regular

20 px

Buttons

Button1

Roboto

Regular

30 px

Button 2

Roboto

Regular

20 px

Body

Body 1

Roboto

Light

20 px

Body 2

Roboto

Regular

20 px

Body 3

Roboto

Light

25 px

Logo Design

Final Logo

+

Other UI Components - Light Mode

Segmented controls

Corner radius:10

Month

Day

Year

Week

50 px
380 px

Bottom navigation bar

Heart rate

Fingerprint

Statistics

Radial chart

Breathing

Onboarding

Input forms

Other UI Components - Dark Mode

Segmented controls

Corner radius:10

Month

Day

Year

Week

50 px
380 px

Heart rate

Fingerprint

Bottom navigation bar

Statistics

Radial chart

Breathing

Onboarding

Thank you for scrolling

© 2021 created by Aditi Vengurlekar