Commons Style Guide

[teenie-quaggard]

Commons Style Guide Based on Figma

Colors

Gradient

Based on:

background: rgba(241,231,103,1);
background: -moz-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(255,199,41,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(255,199,41,1)));
background: -webkit-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(255,199,41,1) 100%);
background: -o-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(255,199,41,1) 100%);
background: -ms-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(255,199,41,1) 100%);
background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(255,199,41,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#ffc729', GradientType=1 );

Hex codes

Yellow	Pink	Black	Dark Gray	Light Gray	White
#FFC729	#E882A8	#0D0906	#5B5B68	#C4C4C4	#FFF

Typography

Tag	Sample	Font
Landing Page H1		Poppins Extrabold 60px
Warning H1		Poppins Extrabold 80px
Info Page H1		Poppins Extrabold 40px
H2		Poppins Extrabold 30px

[Oliversw]

❤️ 😍 ❤️

[teenie-quaggard]

Copy of old styleguide.
See main post for updated styleguide.

Commons Style Guide

This is totally up for debate! Just nice to have a starting point. I am really into the clean, colourful card style of the Readymag inspiration at the bottom of that page and would like to implement something along the same lines. Let's talk tomorrow.

Color scheme

Pink	Blue	Green	Yellow	White	Black
#D25369	#63B3D2	#9ABB16	#F7CA0F	#F2F9F3	#F2F9F3

Typography

Tag	Sample	Font
H1		Poppins Regular 400 80px
H2		Poppins Light 300 65px
H3		Poppins Light 300 50px
H4		Poppins Regular 400 25px
P		Roboto Regular 400 20px
Link		Roboto Regular 400 20px

https://fonts.google.com/specimen/Poppins
https://fonts.google.com/specimen/Roboto

Crazy8s

Team Crazy8

Workshop Crazy8

Inspiration

https://stories.readymag.com/

Example cards:

https://canalstreet.market/