Style Guide

UI style guide helps build and further maintain your website or application by ensuring that typography, colors and all crucial UI elements are used in the same way all around on every single page - hooked directly into the CSS file.

Font style: Open Sans Bold

Typography / Headlines

Heading H1

Faux H1

Heading H2

Faux H2

Heading H3

Faux H3

Heading H4

Faux H4
Heading H5
Faux H5
Heading H6
Faux H6
Font style: Open Sans Regular

Typography / Body Copy

I'm small paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean nibh et justo cursus id rutrum.

I'm default paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. I'm Default text Link. enim in eros elementum tristique. Duis cursus, mi quis viverra ornare eros dolor lore.

I'm large paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros quis viverra ornare, lorem ipsum.

I'm large paragraph. Lorem ipsum dolor sit amet consectetur adipiscing elit. Suspendisse varius enim in eros quis viverra ornare, lorem ipsum.

I'm default block quote. Lorem ipsum dolor sit amet, consectetur elit suspendisse lorem eros elementum, lorem ipsum dolore.
  • I'm default list item
  • I'm default list item
  • I'm default list item
  1. I'm ordered list item
  2. I'm ordered list item
  3. I'm ordered list item

Color Palette

Active color
Hover hover
Alternative color 1
Alternative color 2
Super dark backgrounds
Text & dark backgrounds
Light backgrounds

Call to Action

Button Text
Button Text
Link text

Grid

100
50
50
33.3
33.3
33.3
25
25
25
25
66.7
33.3
33.3
66.7
50
25
25
25
25
50

Flex Horizontal Utilities

u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-stretch
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch

Flex Vertical Utilities

u-vflex-left-center
u-vflex-left-bottom
u-vflex-left-between
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between

u-vflex-gap-1

u-vflex-gap-1

u-vflex-gap-2

u-vflex-gap-2

u-vflex-gap-3

u-vflex-gap-3

u-vflex-stretch

u-hflex-gap-1

u-hflex-gap-1

u-divider-bottom-1

u-divider-bottom-2

u-b-margin-1