search

FAC-Sixteen / Tinkl

Project for Weeks 10-12 of Founders and Coders
https://tinkl.herokuapp.com/
1 stars 1 forks source link

Style Guide :sparkles: #18

Open tloth opened 5 years ago

tloth commented 5 years ago

Style Guide

Figma

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

Colours

colour palette

Colour To be used for
#A3DAD1 header, back and tick buttons, selected filters
#DBF0E4 splash and landing page logo, other buttons
#FFFAC1 logo in header?
#F8FCFA backgrounds
#000000 text

Typography

Typeface: Signika Negative https://fonts.google.com/specimen/Signika+Negative Use em/rem instead of px!

Tag Sample
h1: splash, landing h1 96px = 6em
h2: headers h2 36px = 2.25em
p: text buttons p1 24px = 1.5em
p: toilet info, placeholders, instructions p2 18px = 1.125em
p: map links p3 18px = 1.125em

Possible pairings:

Spacing

Page templates

tloth commented 5 years ago

Possible landing page designs:

landing 02

landing 03

teenie-quaggard commented 5 years ago

OMG so cute!!! one little usability thing... Be wary of using only icons like in page: Screen Shot 2019-05-15 at 10 35 53

Icons are not as universal as you may think (just spoke to a group of women in their 60s who just learned what a burger icon was very recently). You make your project much more accessible by always including labels!

BTW I would TOTALLY use this app. So good.