Style Guide
Color Palette
#005FF3
#000C52
#1F2446
#8D8F9D
#F7F8FE
#12BECC
#F58080
#FCAB79
#FFD266
#6A00E5
Typography
Headings
Home Page H1Homepage H1, 120pt Roc Grotesk 100px line height, 0px kerning
Mobile Homepage H1Homepage H1, 60pt Roc Grotesk 60px line height
H1H1, 60pt Roc Grotesk 60px line height
Mobile H1H1, 40pt Roc Grotesk 60px line height
H2H2 - 34px Roc Grotesk, Medium 30px line height
Mobile H2H2 Mobile - 30px Roc Grotesk, Medium 30px line height
H3H3 - 30px Roc Grotesk, Medium 30px line height
Mobile H3H3 Mobile - 24px Roc Grotesk, Medium 28px line height
H4H4 - 24px Roc Grotesk, Medium 30px line height
Mobile H4H4 Mobile - 20px Roc Grotesk, Medium 24px line height
Body Copy
Quote - 30px Roc Grotesk, Medium 35px line height
Regular Body Copy - Roc Grotesk 16px Regular - 24px Line Height. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
Small/Mobile Body Copy - Roc Grotesk 14px Regular - 24px Line Height. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
Lists
- Unordered Bulleted List - Regular Body Copy
- Unordered Bulleted List - Regular Body Copy
- Unordered Bulleted List - Regular Body Copy
-
Unordered Bulleted List - Regular Body Copy
- Unordered Bulleted Sub-List - Small Body Copy
- Unordered Bulleted Sub-List - Small Body Copy
- Unordered Bulleted Sub-List - Small Body Copy
- Numbered List - Regular Body Copy
-
Numbered List - Regular Body Copy
- Numbered List - Regular Body Copy
- Numbered List - Regular Body Copy
- Numbered List - Regular Body Copy
Links
This is a Text Link on light background.
This is a visited link.
This is a link that goes to an external website .
This is a Text Link on dark background.
UI Elements
Other Interactive Elements
Default
Hover
Post Blocks
Default
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo…
Hover
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo…
Default
Hover