Style Guide
Style standards and guidelines for buildthenbless.com
Aa
Headings: Urbanist
Aa
Body: Urbanist
#ef7f00
#062f48
#dfd9ac
#cc2628
Base Colors
Primary
#ef7f00
rgb(239, 127, 0)
Secondary
#062f48
rgb(6, 47, 72)
Accent 1
#dfd9ac
rgb(223, 217, 172)
Accent 2
#cc2628
rgb(204, 37, 41)
Accent 3
#f1b649
rgb(241, 182, 73)
Supplemental Colors
Header Font
#062f48
rgb(6, 47, 72)
Body Font
#062f48
rgb(6, 47, 72)
Dark Red
#7a0405
rgb(122, 4, 5)
Neutral Light
#eeede2
rgb(238, 237, 226)
Footer Red
#4a0707
rgb(74, 7, 7)
Typography
Normal Fonts:
Headings: Urbanist – 900
Body: Urbanist – 400
Headings:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Display Headings:
Display 1
Display 2
Display 3
Display 4
Body:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales neque sodales ut etiam sit amet. Maecenas sed enim ut sem viverra aliquet eget sit.
Typography Stylization
Improving the world
One Micro-Interaction At A Time
Paragraph Text
How to Use Fonts
Larger titles are uppercase to match the logo style, smaller titles are titlecase to avoid feeling overly agressive or like yelling.
Subtitles can be italicized. Highlighting a word in a brighter color for emphasis is also used, but usually reserved for larger titles.
Graphics
Image Frames
Backgrounds
Illustrations
Icons
Font Awesome – Light
Class for background square: icon-bg
Color classes: red, blue, orange, gold
Buttons
Dark Sections
Click me! Click me! Use on Blue Backgrounds Use on red buttonsUse the class “gold” for the last button