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