Style Guide

Deze styleguide is ontworpen om richtlijnen te bieden voor een consistente en herkenbare visuele en tekstuele identiteit voor "The Social Sports Club." Of je nu een ontwerper, marketeer, schrijver of een ander lid van ons team bent, deze guide is een waardevol hulpmiddel om onze boodschap effectief over te brengen en ons merk consistent te vertegenwoordigen.

Menu

Colors Typography Icons Forms Rich Text Buttons Grid system

Colors

Primary Colors

Primary 1

#389170

Primary 2

#0A0A09

Primary 3

#fAFAFA

Neutral Colors

Neutral 800

#25272A

Neutral 700

#3C3E43

Neutral 600

#686D76

Neutral 500

#80858F

Neutral 400

#9A9EA5

Neutral 300

#CCCED2

Neutral 200

#E6E7E8

Neutral 100

#FaFAFA

Typography

Fox jumps over the lazy dog

Heading 1 - 48px / 3.75em

Fox jumps over the lazy dog

Heading 2 - 56px / 2.92em

Fox jumps over the lazy dog

Heading 3 - 40px / 2.08em

Fox jumps over the lazy dog

Heading 4 - 32px / 1.67em

Fox jumps over the lazy dog

Heading 5 - 24px / 1.25em

Fox jumps over the lazy dog

Heading 6 - 20px / 1.04em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph extra small - 12px / 0.73em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph Small - 16px / 0.94em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph Normal - 18px / 0.94em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph large - 18px / 1.15em

Link - Lorem ipsum dolor sit amet

text link - 16px / 0.83em

Bold - Lorem ipsum dolor sit amet

text bold - 18px / 0.94em

Italic - Lorem ipsum dolor sit amet

text italic - 18px / 0.94em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

block quote

Lorem ipsum dolor sit amet consectetur.
Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
Sapien in tempus lectus lorem quis est.

Bullet list

Lorem ipsum dolor sit amet consectetur.
Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
Sapien in tempus lectus lorem quis est.

numbered list

Icons

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Rich Text

This is Heading 1

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.

Over The Social Sportsclub in Rotterdam — Lorem Ipsum dolor sim amet

This is Heading 2

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
Sapien in tempus lectus lorem quis est.

This is Heading 3

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

This is Heading 4

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.

‍

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
Sapien in tempus lectus lorem quis est.

This is Heading 5

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.

This is Heading 6

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.

Buttons

Primary - Small

Primary - Default

Secondary - Small

Secondary - Default

Tertiary - Small

Tertiary - Default

Grid system

Col-lg-12

Col-lg-1

Col-lg-11

Col-lg-2

Col-lg-10

Col-lg-3

Col-lg-9

Col-lg-4

Col-lg-8

Col-lg-5

Col-lg-7

Col-lg-6

Col-lg-6

justify-center

justify-left

justify-right

justify-around

justify-space-around