CSS Style Guide

Main colors
#00a850
#2c312f
#ffffff
#000000
#666666
Secondary White 30%
#888888
Secondary White 40%
#cacaca
Secondary White 80%
#eeeeee
Secondary White 90%
#eeeeee
Secondary White 95%
#eeeeee
Secondary White 97%
Expanded colors
Primary
Secondary
White
Black
Primary White 90%
Primary White 80%
Primary White 70%
Primary White 60%
Primary White 50%
Primary White 40%
Primary White 30%
Primary White 20%
Primary White 10%
Primary Black 10%
Primary Black 20%
Primary Black 30%
Primary Black 40%
Primary Black 50%
Primary Black 60%
Primary Black 70%
Primary Black 80%
Primary Black 90%
Secondary Black 90%
Secondary Black 80%
Secondary Black 70%
Secondary Black 60%
Secondary Black 50%
Secondary Black 40%
Secondary Black 30%
Secondary Black 20%
Secondary Black 10%
Secondary White 10%
Secondary White 20%
Secondary White 30%
Secondary White 40%
Secondary White 50%
Secondary White 60%
Secondary White 70%
Secondary White 80%
Secondary White 90%
Grids
6 columns
1/6
2/6
3/6
4/6
5/6
6/6
4 columns
1/4
2/4
3/4
4/4
2 columns
1/2
2/2
1 column
1/1
.padding-vertical-large .collapse-bottom
.padding-vertical-large
.padding-vertical-med
.padding-vertical-small
.padding-vertical-none
Typography

Jumbo Heading

Sample text is being
used as a placeholder

Sample text is being
used as a placeholder

Sample text is being
used as a placeholder

Sample text is being
used as a placeholder

Sample text is being
used as a placeholder
Sample text is being
used as a placeholder
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

text-extralarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse underlined enim in eros elementum tristique.

text-large

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

paragraph

Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

text-split

Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

text-small

Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

text-tiny

Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Satoshi Template

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

‍

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

‍

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.

‍

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

‍

‍

text-color-green
text-color-off black
text-color-white
text-color-black
text-color-dark gray
text-color-gray
text-color-light gray
text-color-white smoke
.text-align-left
text-align-left
.text-align-center
text-align-center
.text-align-right
text-align-right
.text-style-strikethrough

text-style-strikethrough

.text-style-extralight

text-style-extralight

.text-style-bold

text-style-bold

.text-style-extrabold

text-style-extrabold

.text-style-italic

text-style-italic

.text-style-muted

text-style-muted

.text-style-allcaps

text-style-allcaps

.text-style-nowrap

text-style-nowrap

.text-style-quote

Sample text is being used as a placeholder.

Buttons
.button
Button Text
Button TextButton Text
.button .is-small
Button TextButton TextButton Text
.button .is-large
Button TextButton TextButton Text
is-secondary
Button TextButton Text
.button .is-text
Button Text
Button Text
Button Text
.button .is-icon
Button Text
Button Text
Button Text
.social-icon + .icon-1x1-small
Padding
.padding-bottom
.padding-top
.padding-vertical
.padding-horizontal
.padding-left
.padding-right
.padding-small
.padding-medium
.padding-large
.padding-xlarge
.padding-xxlarge
.padding-huge
.padding-xhuge
.padding-xxhuge
Margins
.margin-bottom
.margin-top
.margin-vertical
.margin-horizontal
.margin-left
.margin-right
.margin-small
.margin-medium
.margin-large
.margin-xlarge
.margin-xxlarge
.margin-huge
.margin-xhuge
.margin-xxhuge
.hide
.hide-tablet
.hide-mobile-portrait
.hide-mobile-landscape
.overflow-visible
.overflow-hidden
.overflow-auto
.overflow-scroll
.align-left
.align-center
.align-right
.is-rounded
.is-outlined
backgrounds
.is-green
.is-off black
.is-white
.is-black
.is-dark-gray
.is-gray
.is-light gray
.is-whitesmoke