Style Guide

[teenie-quaggard]

Prototype created by a group of students at LCC in 2018. We need to acknowledge their contribution in the app. Our prototype will use this styling as an initial base.

https://marvelapp.com/81ef74h/screen/39137069

Figma

https://www.figma.com/file/bwRLEGnGk5GhjASNTZZpo8K2/Untitled?node-id=0%3A1

Colors

White	Black	Yellow	Gray	x	x
#fff	#231F20	#F9D52F	#BDBDBD	#	#

Typography

Tag	Style	Figma Sample
H1 Landing page	Work Sans Black 38 Uppercase Letter spacing 10% AND Permanent Marker 70 Uppercase Letter spacing 10%
H1 Error page	Work Sans Black 35 Letter spacing 10%
H2	Work Sans ExtraBold 38 Letter spacing 10%
H2 Accordion	Work Sans Black Uppercase 24 Letter spacing 8%
H3	Roboto Medium 16 Uppercase Letter spacing 10% (Goal Title)
H4	Roboto Medium 16 Letter spacing 10%
P	Roboto regular 16 Letter spacing 10% Line spacing 18
P emphasized	Roboto light italic 16 Letter spacing 10% Line spacing 18
Link	Roboto Medium 16 Letterspacing 10% Line spacing 18 Underline Yellow background

Spacing

Style	Sample
Page margin
Text padding
Item padding

Buttons

Some tips: https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112

Style	Sample
Call to Action
Primary Action
Primary Action Hover (inverse)
Secondary Action
Secondary Action Hover Inverse
Secondary Action Clicked State
Tertiary Action
Tertiary Action Hover
Tertiary Action Clicked State - White Theme
Tertiary Action Hover State - White Theme
Tertiary Action Clicked State - Yellow Theme
Tertiary Action Hover State - Yellow Theme

[Oliversw]

Regarding asking for branding:
"... Ive tried to get the brand guidelines but my collegue told me that because weve been doing a lot of work we need to update them. Maybe for now use yellow, black and white as the main colors ( reference: http://s3.amazonaws.com/appforest_uf/f1524769033938x822086018742993500/BLP_REPORT_WEB.pdf ) ..."