Creating a design system to streamline SoundCloud’s product experience at scale.
Creating a design system to streamline SoundCloud’s product experience at scale.
SoundCloud is one of the largest music streaming services in the world which enables its users to upload, promote, and share audio. As a conceptual project, I decided to work on and create a design system for soundcloud for the betterment of my skills as well as it would help me understand the product better and would help me create a systematic and consistent product.
The design system was created for the existing Soundcloud app keeping in mind with changes in the components and design so as to create a standardised and consistent UI elements for and adding new features and elements.
SoundCloud is one of the largest music streaming services in the world which enables its users to upload, promote, and share audio. As a conceptual project, I decided to work on and create a design system for soundcloud for the betterment of my skills as well as it would help me understand the product better and would help me create a systematic and consistent product.
The design system was created for the existing Soundcloud app keeping in mind with changes in the components and design so as to create a standardised and consistent UI elements for and adding new features and elements.
SoundCloud Design System
Role
Prototyping, UI Design, Design System
Timing
1 Month, March 2024 - April 2024
Tools
Figma
Team
StyleGuide
StyleGuide
Simple base elements like bold colours & typography are the foundation of the entire system which is built upon.
Simple base elements like bold colours & typography are the foundation of the entire system which is built upon.
Typography
Typography
Inter
Inter
SoundCloud Design System
SoundCloud Design System
Paragraphs
Paragraphs
Pre-Title
Pre-Title
Font family: Inter
Font family: Inter
Font style: Bold
Font style: Bold
Font size: 14
Font size: 14
Line height: 150%
Line height: 150%
Inter
Inter
Pre-Title
Pre-Title
Font family: Inter
Font family: Inter
Font style: Medium
Font style: Medium
Font size: 14
Font size: 14
Line height: 150%
Line height: 150%
Inter
Inter
Pre-Title
Pre-Title
Font family: Inter
Font family: Inter
Font style: Regular
Font style: Regular
Font size: 14
Font size: 14
Line height: 150%
Line height: 150%
Inter
Inter
Pre-Title
Pre-Title
Font family: Inter
Font family: Inter
Font style: Light
Font style: Light
Font size: 14
Font size: 14
Line height: 150%
Line height: 150%
Inter
Inter
Subtitle
Subtitle
Subtitle
Subtitle
Font family: Inter
Font family: Inter
Font style: Bold
Font style: Bold
Font size: 24
Font size: 24
Line height: 120%
Line height: 120%
Inter
Inter
Subtitle
Subtitle
Font family: Inter
Font family: Inter
Font style: Semibold
Font style: Semibold
Font size: 24
Font size: 24
Line height: 120%
Line height: 120%
Inter
Inter
Subtitle
Subtitle
Font family: Inter
Font family: Inter
Font style: Medium
Font style: Medium
Font size: 24
Font size: 24
Line height: 120%
Line height: 120%
Inter
Inter
Subtitle
Subtitle
Font family: Inter
Font family: Inter
Font style: Regular
Font style: Regular
Font size: 24
Font size: 24
Line height: 120%
Line height: 120%
Inter
Inter
Titles - Headlines
Titles - Headlines
Title H1
Title H1
Font family: Inter
Font family: Inter
Font style: Bold
Font style: Bold
Font size: 72
Font size: 72
Line height: 120%
Line height: 120%
Letter spacing: -2%
Letter spacing: -2%
Inter
Inter
Title H1
Title H1
Font family: Inter
Font family: Inter
Font style: Bold
Font style: Bold
Font size: 64
Font size: 64
Line height: 120%
Line height: 120%
Letter spacing: -2%
Letter spacing: -2%
Inter
Inter
Title H1
Title H1
Font family: Inter
Font family: Inter
Font style: Bold
Font style: Bold
Font size: 48
Font size: 48
Line height: 140%
Line height: 140%
Letter spacing: -2%
Letter spacing: -2%
Inter
Inter
Title H1
Title H1
Font family: Inter
Font family: Inter
Font style: Bold
Font style: Bold
Font size: 32
Font size: 32
Line height: 140%
Line height: 140%
Letter spacing: 0%
Letter spacing: 0%
Inter
Inter
Title H1
Title H1
Font family: Inter
Font family: Inter
Font style: Medium
Font style: Medium
Font size: 32
Font size: 32
Line height: 140%
Line height: 140%
Letter spacing: 0%
Letter spacing: 0%
Inter
Inter
Body text
Body text
Body
Body
Font family: Inter
Font family: Inter
Font style: Bold
Font style: Bold
Font size: 12
Font size: 12
Line height: 150%
Line height: 150%
Inter
Inter
Body
Body
Font family: Inter
Font family: Inter
Font style: Medium
Font style: Medium
Font size: 12
Font size: 12
Line height: 150%
Line height: 150%
Inter
Inter
Body
Body
Font family: Inter
Font family: Inter
Font style: Regular
Font style: Regular
Font size: 12
Font size: 12
Line height: 150%
Line height: 150%
Inter
Inter
Small text
Small text
Small text
Small text
Font family: Inter
Font family: Inter
Font style: Bold
Font style: Bold
Font size: 10
Font size: 10
Line height: 150%
Line height: 150%
Inter
Inter
Small text
Small text
Font family: Inter
Font family: Inter
Font style: Medium
Font style: Medium
Font size: 10
Font size: 10
Line height: 150%
Line height: 150%
Inter
Inter
Small text
Small text
Font family: Inter
Font family: Inter
Font style: Regular
Font style: Regular
Font size: 10
Font size: 10
Line height: 150%
Line height: 150%
Inter
Inter
Grid System
Grid System
Responsive layout grids for Desktop, Tablet and Mobile are used here to assist us to align page elements based on sequenced columns and rows.
Responsive layout grids for Desktop, Tablet and Mobile are used here to assist us to align page elements based on sequenced columns and rows.
1440x960px
1440x960px
1440x960px
Spacing System
Spacing System
My preferred method is a 8pt linear scare for elements and 4pt for spacing icons or small text blocks. I have used the 4pt baseline grid for my typography which means the line-heights of the font are divisible by 4. The spacing system allows a product to be more consistent.
My preferred method is a 8pt linear scare for elements and 4pt for spacing icons or small text blocks. I have used the 4pt baseline grid for my typography which means the line-heights of the font are divisible by 4. The spacing system allows a product to be more consistent.
4px
4px
8px
8px
12px
12px
16px
16px
24px
24px
32px
32px
40px
40px
Color Palette
Color Palette
SoundCloud Design System
SoundCloud Design System
Brand
Pizazz
Pizazz
#F46F20
#F46F20
Black
Black
#333333
#333333
Neutrals
Text Primary
Text Primary
Text Primary
#333333
#333333
#333333
#5C5C5C
#5C5C5C
#5C5C5C
#858585
#858585
#858585
#ADADAD
#ADADAD
#ADADAD
#D6D6D6
#D6D6D6
#D6D6D6
#EBEBEB
#EBEBEB
#EBEBEB
#FFFFFF
#FFFFFF
#FFFFFF
Subtext
Subtext
Subtext
#A6A6A6
#A6A6A6
#A6A6A6
#B8B8B8
#B8B8B8
#B8B8B8
#CACACA
#CACACA
#CACACA
#DBDBDB
#DBDBDB
#DBDBDB
#EDEDED
#EDEDED
#EDEDED
#F6F6F6
#F6F6F6
#F6F6F6
#FCFCFC
#FCFCFC
#FCFCFC
Background
Interface
Interface
#F6F6F6
#F6F6F6
#FCFCFC
#FCFCFC
#FFFFFF
#FFFFFF
System
System
System
Primary
Primary
Primary
#F46F20
#F46F20
#F46F20
Success
Success
Success
#4BB543
#4BB543
#4BB543
Error
Error
Error
#FF3333
#FF3333
#FF3333
Warning
Warning
Warning
#FF9966
#FF9966
#FF9966
Disabled
Disabled
Disabled
#A6A6A6
#A6A6A6
#A6A6A6
Elevation
Interface
Interface
Default
Default
Active
Active
Floating
Floating
Icons
Icons
I have decided to go ahead with Phosphor Icon family as creating a new icon family requires thoughtful approach so as to fulfill the important principles of iconography i.e. Clarity, Alignment, Brevity, Consistency and Ease to use.
I have decided to go ahead with Phosphor Icon family as creating a new icon family requires thoughtful approach so as to fulfill the important principles of iconography i.e. Clarity, Alignment, Brevity, Consistency and Ease to use.
Phosphor Font Family - Linear, Filled
Phosphor Font Family - Linear, Filled
16px
16px
20px
20px
24px
24px
32px
32px
Components
Components
Components are simple system created by basic elements. Those elements can be constituted into many forms such as buttons, inputs and cards.
Components are simple system created by basic elements. Those elements can be constituted into many forms such as buttons, inputs and cards.
Buttons
Buttons
SoundCloud Design System
SoundCloud Design System
48px
48px
48px
Enabled
Enabled
Enabled
32 px
32 px
32 px
32 px
32 px
32 px
48px
48px
48px
Enabled
Enabled
Enabled
32 px
32 px
32 px
32 px
32 px
32 px
4 px
4 px
4 px
48px
48px
48px
Enabled
Enabled
Enabled
1 px stroke
1 px stroke
1 px stroke
Default
Default
Default
Enabled
Enabled
Enabled
Disabled
Disabled
Disabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
Contained
Contained
Contained
Enabled
Enabled
Enabled
Disabled
Disabled
Disabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
Outlined
Outlined
Outlined
Enabled
Enabled
Enabled
Disabled
Disabled
Disabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
Texted
Texted
Texted
Enabled
Enabled
Enabled
Disabled
Disabled
Disabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
Split
Split
Split
Enabled
Enabled
Enabled
Enabled
Enabled
Enabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
With Icon
With Icon
With Icon
Enabled
Enabled
Enabled
Disabled
Disabled
Disabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
Contained
Contained
Contained
Enabled
Enabled
Enabled
Disabled
Disabled
Disabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
Outlined
Outlined
Outlined
Enabled
Enabled
Enabled
Disabled
Disabled
Disabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
Texted
Texted
Texted
Enabled
Enabled
Enabled
Disabled
Disabled
Disabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
Split
Split
Split
Enabled
Enabled
Enabled
Disabled
Disabled
Disabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
Icons Only
Icons Only
Icons Only
Enabled
Enabled
Enabled
Disabled
Disabled
Disabled
Hover
Hover
Hover
Pressed
Pressed
Pressed
Processing
Processing
Processing
Contained
Contained
Contained
Outlined
Outlined
Outlined
Texted
Texted
Texted
Split
Split
Split
Controls
Checkbox
Checkbox
Unselected
Unselected
Selected
Selected
Indeterminate
Indeterminate
Inactive Unselected
Inactive Unselected
Inactive Selected
Inactive Selected
Inactive Indeterminate
Inactive Indeterminate
Radio
Radio
Unselected
Unselected
Selected
Selected
Inactive Selected
Inactive Selected
Inactive Unselected
Inactive Unselected
Switch
Switch
Inactive
Inactive
Active
Active
Inactive Disabled
Inactive Disabled
Active Disabled
Active Disabled
Tags
Tags
Primary
Primary
Success
Success
Error
Error
Warning
Warning
Disabled
Disabled
Inputs
Inputs
SoundCloud Design System
SoundCloud Design System
Search bar and message
Search bar and message
Search
Search
Search
Search
Search
Search
Search
Search
Search
Search
This is the description area
This is the description area
Search
Search
This is an error message
This is an error message
Error
Error
Success
Success
Disabled
Disabled
Warning
Warning
Navigation
Pagination
Pagination
1
1
2
2
3
3
95
95
96
96
97
97
1
1
2
2
3
3
95
95
96
96
97
97
1
1
2
2
3
3
32
32
95
95
96
96
97
97
Slider
Slider
Navigation buttons
Navigation buttons
Tab bars
Tab bars
Selected Item
Selected Item
Item
Item
Item
Item
Item
Item
Item
Item
Side Bar
Upload
Drop area
Drop area
Drag and drop your tracks
Drag and drop your tracks
FLAC, WAV, ALAC, or AIFF for highest audio quality.
FLAC, WAV, ALAC, or AIFF for highest audio quality.
Max file size: 25MB
Max file size: 25MB
Wrong file format.
Please try again.
Wrong file format.
Please try again.
FLAC, WAV, ALAC, or AIFF for highest audio quality.
FLAC, WAV, ALAC, or AIFF for highest audio quality.
Max file size: 25MB
Max file size: 25MB
Uploading progress
Uploading progress
Uploading...
Uploading...
CSVB_129_humble_beginnings.mp3
CSVB_129_humble_beginnings.mp3
10.2MB
10.2MB
Uploading...
Uploading...
3 of 25 tracks
3 of 25 tracks
156MB
156MB
Uploaded file view
Uploaded file view
CSVB_129_humble_beginnings.mp3
10.2MB
CSVB_129_humble_beginnings.mp3
10.2MB
CSVB_129_humble_beginnings.mp3
10.2MB
File size is more than 25MB.
Uploading progress
Uploading progress
SoundCloud Design System
Role
Prototyping, UI Design, Design System
Timing
1 Month, March 2024 - April 2024
Tools
Figma
Team