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?

© 2021 created by Aditi Vengurlekar