Sugar n Spice Design System Language
A Design System Language was created for Sugar n Spice 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
#F12679
#D67F00
#FFCECE
#FF6060
#919191
#F9F9F9
#373737
Buttons
Primary Button
Corner radius:30
Sign up
50 px
250 px
Secondary Button
Corner radius:30
Sign up
39 px
137 px
Tertiary Button
Corner radius:30
Sign up
21 px
92 px
Button Color
Linear Gradient
#D67F00
#F12679
Button States
Active
Hover
Selected
Disabled
Button Shadow
Active
Blur: 6
Distance: 4
Hover
Blur: 6
Distance: 4
Selected
Blur: 14
Distance: 4
Disabled
No shadow
​
Social Media Sign Up/Log In
Selection Buttons
Unselected
Selected
Quantity selection button
- 1 +
Typography
Font
A a
Futura
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Logo Text
Tag Line Text
Futura
Light
48 px
​
Futura
Light Oblique
24 px
​
Headings
Futura
Light
50 px
​
Heading 1
Futura
Medium
40 px
Futura
Light
50 px
​
Heading 2
Futura
Medium
25 px
Futura
Light
50 px
​
Heading 3
Futura
Book
30 px
Futura
Light
50 px
​
Heading 4
Futura
Heavy
25 px
Buttons
Button1
Futura
Medium
30 px
Button 2
Futura
Medium
21 px
Body
Body 1
Futura
Light
18 px
Body 2
Futura
Book
18 px
Body 3
Futura
Book
12 px
Logo Design
I wanted to create a logo for Sugar n Spice that was simple, versatile and represented the colors of festivity and Indian essence. I created various logo sketches to choose from, exploring different ways to hero colors and font into the logo.
Final Logo
Sugar and Spice
From India, to the world
Other UI Components
​
Bottom navigation bar
Pagination dots
Rating
Icons
Onboarding
Input forms
Placeholder
Active
Typing
Error
x
Password
mypassword
x
Passwords do not match
Search
Search food
What are you looking for?