Style Guide

[Joepock123]

---

Issue: #1
HackMD Style Guide markdown here.
Inspiration from Kristina

Figma

Link to Figma board.

---

Design Principles

• Simplicity: easy to navigate and users are able to find what they're looking for in a short amount of time
• Minimalist: went for a minimalist, pastel design since the product is aimed at ice cream lovers
• Accessibility: follows the accessibility guidelines outlined by W3C to ensure app is accessible and inclusive to all
• Mobile-first: users are more likely to use the app on their phone, so this approach was at the forefront when designing

---

Colours

Navy	Ivory	Blush	Pale blue	Peach
#1F4068	#F7F4F0	#F7DCD5	#C3DDED	#F6E3DC

---

Typography

Tag	Style	Figma Sample
H1 Header	Changa One italicized Navy capitalized
H2 subtitle	Karla 16px Navy
Form labels	Karla 16px Navy

---

Spacing

Style	Sample
Letter spacing
Page margin	60 pts
Item padding
Text padding
Button spacing	16 pts
Form labels	9 pts
Form fields	29 pts
Form radio buttons	39 pts

---

Buttons

Some tips using buttons from uxdesign.

Style	Sample
Landing page buttons
Vendor Edit Schedule Button
Customer ice cream signal button
Hamburger navigation menu
Log out button

---

Page templates

Landing page


Login and signup options page


Vendor signup form


Map