GoSimplo Colours via Global Colours

Primary blue
#0033FF
Primary
‍#FF3300
Primary purple
#7300FF
Primary cyan
#00E7E7
Primary magenta
#FF00DB
Primary silver
#BBBBBB
Primary bl
‍#000
Primary alerts
#219653 #EB5757 #F2C94C

Typography

soehne font family: font page

Far far away, behind the word mountains.

Heading 1

Far far away, behind the word mountains, far from the countries

Heading 2

Far far away, behind the word mountains, far from the countries

Heading 3

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Heading 4
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
Heading 5
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
Heading 6

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Paragraph

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Simplo sub heading

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Larger Paragraph
A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences.
Quote
  • A small river named Duden
  • It is a paradisematic country
  • Which roasted parts
List
Introducing Dashboard UI Kit Styleguide
.Tagline

Buttons

Sign me up
.Simplo-Button blue-button
Sign me up
.Simplo-Button .Black-button
Sign me up
.Simplo-Button .cyan-button
BUTTON-LINK
Sign me up
.Simplo Button .Rounded-button
Sign me up
.Simplo Button  .rounded-button-border

Alerts

Get ready for your flight! Boarding starts at 9:45AM.
.alert .positive-alert
Hey man! Go check out janlosert store for more amazing products!
.alert .neutral-alert
Ou snap! Seems like there is a problem with our server.
.alert .warning-alert
Damn... What the hell have you done.
.alert .error-alert

Labels

default label
.label
PINK Label
.LABEL-PINK
Violet Label
.LABEL-violet
This one is black
.LABEL-black
Red One
.LABEL-Red
50 Shades... No
.LABEL-Grey

Social Buttons

.social-icon
.icon-facebook
.SOCIAL-ICON
.ICON-twitter
.SOCIAL-ICON
.ICON-Instagram
.SOCIAL-ICON
.ICON-googleplus
.SOCIAL-ICON
.ICON-linkedin
.SOCIAL-ICON
.ICON-Pinterest

Logotype

White GOSIMPLO LOGO (download, it's svg)
GoSimplo logo in a black and pink colour.
BLACK GOSIMPLO LOGO (download, it's svg)
White GOSIMPLO LOGO (download, it's svg)
GoSimplo circular logo in pink and black color.
BLACK GOSIMPLO LOGO (download, it's svg)

Container spacing

Background Color

.background-color-black

.background-color-white

.background-color-lightgrey

.background-color-pink

.background-color-dark-blue

.background-color-cyan

.background-color-blue

.background-color-pink

.background-color-yellow

.background-color-green

.background-color-red

Border solid

.border-1px-black

border-1px-gray

UI Elements
Buttons
button
button hover effect
button
is-button-small
button-secondary
button-secondary
is-button-small
button-tertiary
button-tertiary
is-button-small
button-link
Text Colours
text-color-black
text-color-gray
text-color-gray
text-color-gray
text-color-gray
text-color-gray
text-color-gray
text-color-gray
text-color-white
Text Alignment
text-align-left
text-align-center
text-align-right
Text Sizes

A 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 faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A 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 faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A 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 faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A 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 faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A 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 faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Padding Direction
.padding-top
.padding-bottom
.padding-left
.padding-right
.padding-horizontal
.padding-vertical