Deze styleguide is ontworpen om richtlijnen te bieden voor een consistente en herkenbare visuele en tekstuele identiteit voor "The Social Sportsclub." 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.
Ons typografiesysteem combineert karakter met leesbaarheid. We gebruiken twee lettertypes om een duidelijke hiërarchie en een herkenbare toon te creëren in al onze communicatie.
Cabin Condensed - Titels, koppen & quotes
Cabin Condensed wordt gebruikt voor alle koppen en titels. Het smalle, moderne ontwerp zorgt voor een opvallende uitstraling en maakt efficiënt gebruik van de ruimte.
Toepassingen:
Paginatitels
Sectiekoppen
Hero-teksten (opvallende statements)
Public Sans - Bodytekst, labels & knoppen
Public Sans is ons primaire lettertype voor alle functionele en ondersteunende teksten. Het is strak, neutraal en zeer goed leesbaar in zowel digitale als gedrukte uitingen. Het zorgt ervoor dat onze content toegankelijk en scanbaar blijft, zelfs in kleinere formaten.
Toepassingen:
Lichaamstekst en langere alinea’s
Formuliervelden en labels
Knopteksten en navigatie
Onderschriften en voetteksten
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.
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.
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.
