The Beardy Geek Style Guide

Logos

Primary Logo

Alternative Logo

Colours

TBG Blue

TBG Light Blue

HSL: 205, 99%, 69%

RGB: 96, 188, 254

HEX: #60bcfe

TBG Blue

HSL: 205, 100%, 51%

RGB: 4, 150, 255

HEX: #0496ff

TBG Dark Blue

HSL: 201, 100%, 33%

RGB: 0, 107, 166

HEX: #006ba6

TBG Red

TBG Light Red

HSL: 338, 86%, 56%

RGB: 239, 45, 115

HEX: #EF2D73

TBG Red

HSL: 338, 85%, 46%

RGB: 216, 17, 89

HEX: #d81159

TBG Dark Red

HSL: 335, 52%, 37%

RGB: 143, 45, 86

HEX: #8f2d56

TBG Yellow

TBG Light Yellow

HSL: 39, 100%, 63%

RGB: 255, 188, 66

HEX: #ffbc42

TBG Yellow

HSL: 39, 100%, 53%

RGB: 255, 170, 15

HEX: #FFAA0F

TBG Dark Yellow

HSL: 39, 97%, 43%

RGB: 216, 142, 3

HEX: #d88e03

Type

Work Sans

Work Sans is a typeface family based loosely on early Grotesques, such as those by Stephenson Blake, Miller & Richard and Bauerschen Giesserei. The Regular weight and others in the middle of the family are optimised for on-screen text usage at medium-sizes (14px-48px) and can also be used in print design. The fonts closer to the extreme weights are designed more for display use both on the web and in print. Overall, features are simplified and optimised for screen resolutions; for example, diacritic marks are larger than how they would be in print. A version optimised for desktop applications is available from the Work Sans github project page.

This is the H1 heading

This is the H2 heading

This is the H3 heading

This is the H4 heading

This is the H5 heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti iste, quis doloribus ducimus eveniet ea blanditiis facilis quisquam, sint consequuntur commodi porro ex non impedit cum perferendis harum eos.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nihil laudantium laboriosam ad, deleniti excepturi itaque provident hic neque natus possimus mollitia sapiente porro nemo amet omnis veniam dicta non!

Tables

Column 1 Column 2 Column 3
Row 1 1,000 2,000 3,000
Row 2 1,000 2,000 3,000
Row 3 1,000 2,000 3,000

Buttons and Links

Buttons

Primary Button Secondary Button

Standard Link

This is a sample paragraph with a standard link contained within it.