flipside Style Guide
Digital style guide for our brand.
Logos
flipside green
flipside black
flipside white
Colors
Primary Color: #C5D143
Secondary Color: #EF2850
Background #1: #808289
Background #2: #EAEAEB
Typography
Fonts, sizes, colors, and all that good stuff. A great resource for keeping your type sizing looking tight is to reference Type Scale.
Headings Font: 'Titilium Web', sans-serif;
Body Text Font: 'Titilium Web', sans-serif;
H1 Heading
60px | 43px - Normal - Line Height 1.1
H2 Heading
50px | 33px - Normal - Line Height: 1.1
H3 Heading
37px | 27px - Normal - Line Height: 1.4
H4 Heading
28px | 23px - Normal - Line Height: 1.4
H5 Heading
21px - Normal - Line Height: 1.4
H6 Heading
16px - Normal - Line Height: 1.4
Adaptogen etsy godard chia fam, vaporware tote bag vinyl hoodie blue bottle neutra ennui locavore. 3 wolf moon hot chicken swag ugh mustache plaid squid coloring book mixtape franzen. Flannel cliche messenger bag vexillologist portland chambray freegan godard, tote bag marfa mustache humblebrag pug.
Salvia leggings lumbersexual you probably havent heard of them wayfarers 8-bit vinyl pour-over kale chips tumblr jean shorts before they sold out. Yr locavore 8-bit, cornhole cred you probably havent heard of them ramps skateboard affogato cray schlitz raclette small batch seitan.
18px | 16px - Normal - Line Height: 1.5
- This is an unordered list
- Lists are awesome
- Everyone loves a list
16px - Normal - Line Height: 1.3
- This is a ordered list
- Lists are awesome
- Everyone loves a list
Man braid cliche poutine hexagon, four dollar toast air plant humblebrag umami adaptogen forage succulents scenester.
Buttons / CTAs
You can set up various buttons style to help visually communicate primary, secondary, and tertiary actions you want a visitor to take.