UI Style Guide
made by BW Media
06
Colors
Dark Grey
#1E1E1E, #303030
Light Grey
#edeef0
Blue
#0546A7, #255EB4, #416FB4
Yellow
#ECEC51
Red
#FC4040
06
Typography
Titles & Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse varius enim do
in eros elementum tristique. Duis cursus
- Unordered list
- Unordered list
- Ordered list
- Ordered list
Fonts
Aa
Arial
Styles:
- Regular
- Condensed
- Italic
Aa
Monsterrat
Styles:
- Regular
- Condensed
- Italic
06
Buttons
Styling
06
Icons
06
Custom Classes
Headings
Paragraphs
Rich Text
heading-1
heading-2
heading-3
heading4
heading-5
heading-6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- list item
- list item
- list item
Text Align
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Font Weight
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Text Style
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Text Colour
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
General
Hide
Size
Background color
Icons
Ratio box
1:1 Aspect Ratio
padding-top: 100%;
1:168 Aspect Ratio
padding-top: 168%;
1:168 Aspect Ratio
padding-top: 168%;
1:168 Aspect Ratio
padding-top: 168%;
Margin Left
Margin Right
mr_0px
mr_5px
mr_10px
mr_15px
mr_20px
mr_25px
mx_16vh
Margin Bottom
Margin Top
Custom Margin
mt_4px
mb_4px
ml_4px
mr_4px
mt_8px
mb_8px
ml_8px
mr_8px
mt_12px
mb_12px
ml_12px
mr_12px
mt_16px
mb_16px
ml_16px
mt_24px
mb_24px
ml_24px
mt_24px
mt_32px
mb_32px
ml_32px
mr_32px
mt_48px
mb_48px
ml_48px
mr_48px
mt_64px
mt_64px
mt_64px
mt_64px
mt_96px
mb_96px
ml_96px
mr_96px
mt_128px
mb_128px
ml_128px
mr_96px
Padding all
Padding
Padding
Padding
SG Headings
sg-section-heading
sg-sub-section-heading
sg-h1-heading
sg-color-heading
Heading
fonts-styles-heading
SG Text Blocks
This is some text inside of a div block.
Rules
- A subheading above a heading should always have a margin bottom of 4px and the heading should have margin top 0px
- Text with buttons underneath should have a margin bottom of 16px