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

+

Beats.png
Group 68.png

Other UI Components - Light Mode

Segmented controls

Corner radius:10

Month

Day

Year

Week

50 px
380 px

Bottom navigation bar

Group 73.png

Heart rate

Path 706.png

Fingerprint

baseline_fingerprint_black_24dp.png

Statistics

Group 70.png

Radial chart

Group 74.png

Breathing

Group 75.png

Onboarding

Group 71.png
Group 72.png

Input forms

Group 76.png
Group 77.png

Other UI Components - Dark Mode

Segmented controls

Corner radius:10

Month

Day

Year

Week

50 px
380 px
Group 65.png

Heart rate

Path 706.png

Fingerprint

baseline_fingerprint_black_24dp.png

Bottom navigation bar

Statistics

Group 74.png

Radial chart

Breathing

Group 77.png
Group 76.png
Group 78.png
fingerprint-black-24dp.png

Onboarding

Thank you for scrolling