School's cool Westland

Style Guide

Deze pagina beschrijft de stijlen en standaarden voor School's cool Westland.

{mb_algemeen_bedrijfsnaam}

Dit is de payoff. Een kort stuk tekst wat de essentie van jouw bedrijf omschrijft.

Bedrijfsgegevens

{mb_algemeen_straat}
{mb_algemeen_postcode} {mb_algemeen_plaatsnaam}
{mb_algemeen_land}

Inspiratie

Moodboard

Kleuren

Een overzicht van de kleuren van deze site.
Kleurtinten en transparanties zijn wiskundige berekeningen van de hoofdkleuren.
  1. Action: De actiekleur van het palet (belangrijke knoppen en links).
  2. Primary: De primaire kleur van het palet. (hoofd CTA’s en secties).
  3. Secondary: De op één na meest gebruikte kleur van het palet (minder belangrijke knoppen en infokaarten).
  4. Accent: De minst gebruikte kleur van het palet. (kaders, kaarten, enz.).
  5. Base: De basiskleur van het palet (de grondtoon van het palet. In donkere variant kleur van de fonts, in lichte kleur achtergronden van secties, etc.).
  6. Neutral: Zwart en wit, plus grijstinten.

Kleurenpalet

Action

Primary

Secondary

Accent

Base

Neutral

Action

Action

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Primary

Primary

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Secondary

Secondary

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Accent

Accent

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Base

Base

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Neutral

Neutral

Ultra Light

Light

Medium

Dark

Ultra Dark

Action

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Primary

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Secondary

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Accent

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Base

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Neutral

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Success

Success

Success Light

Success Dark

Success Hover

Danger

Danger

Danger Light

Danger Dark

Danger Hover

Warning

Warning

Warning Light

Warning Dark

Warning Hover

info

Info

Info Light

Info Dark

Info Hover

Visualiseer kleur & fonts op je website

Dit is gewoon wat voorbeeld tekst. Om een indruk te krijgen van de styling van jouw nieuwe website.
Hoe werkt het?Ja, dit wil ik!

Typografie

Hieronder vind je een overzicht van responsieve typografie maten en diktes voor deze site. Deze zijn berekend op basis van een basisgrootte en een wiskundige schaal.
Heading: Outfit (Google Font)
Bodytekst: Outfit (Google Font)

Dit is een tekst titel

Dit is voorbeeld tekst. Geen zorgen, dit zal vervangen worden bij de afronding van je website. Zo gauw alle informatie aanwezig is, zal deze voorbeeld tekst vervangen worden door de juiste teksten.

Soms is het nodig om tijdelijke bold tekst te plaatsen om een idee te krijgen hoe de tekst op de website eruit ziet.

Van oudsher gebruikt onze branche Lorem Ipsum, een voorbeeld tekst geschreven in het Latijn. Helaas is niet iedereen bekend met Lorem Ipsum en dat kan tot verwarring leiden. Ik kan je niet vertellen hoe vaak klanten me hebben gevraagd waarom hun website in een andere taal is!

  • Dit is een voorbeeld tekst
  • Dit zal later vervangen worden
  • We gebruiken Website Ipsum
  • Het is bedoeld om de ruimte te vullen

Als je nieuwsgierig bent, dit is Website Ipsum in cursief. Het is speciaal ontwikkeld voor gebruik op ontwikkelingswebsites. Behalve dat het minder verwarrend is dan andere Ipsum’s, is Website Ipsum ook geformatteerd in patronen die meer lijken op hoe een echte kopie tegenwoordig op internet wordt geformatteerd.

H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading 3 Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)
Heading 5 Regular
Heading 5 Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold

Heading 1 (H1)

Dit is large tekst. Als je nieuwsgierig bent, dit is Website Ipsum. Het is speciaal ontwikkeld voor gebruik op ontwikkelingswebsites. Behalve dat het minder verwarrend is dan andere Ipsum’s, is Website Ipsum ook geformatteerd in patronen die meer lijken op hoe een echte kopie tegenwoordig op internet wordt geformatteerd.

Heading 2 (H2)

Als je nieuwsgierig bent, dit is Website Ipsum. Het is speciaal ontwikkeld voor gebruik op ontwikkelingswebsites. Behalve dat het minder verwarrend is dan andere Ipsum’s, is Website Ipsum ook geformatteerd in patronen die meer lijken op hoe een echte kopie tegenwoordig op internet wordt geformatteerd.

Heading 3 (H3)

Als je nieuwsgierig bent, dit is Website Ipsum. Het is speciaal ontwikkeld voor gebruik op ontwikkelingswebsites. Behalve dat het minder verwarrend is dan andere Ipsum’s, is Website Ipsum ook geformatteerd in patronen die meer lijken op hoe een echte kopie tegenwoordig op internet wordt geformatteerd.

Heading 4 (H4)

Als je nieuwsgierig bent, dit is Website Ipsum. Het is speciaal ontwikkeld voor gebruik op ontwikkelingswebsites. Behalve dat het minder verwarrend is dan andere Ipsum’s, is Website Ipsum ook geformatteerd in patronen die meer lijken op hoe een echte kopie tegenwoordig op internet wordt geformatteerd.
Heading 5 (H5)
Als je nieuwsgierig bent, dit is Website Ipsum. Het is speciaal ontwikkeld voor gebruik op ontwikkelingswebsites. Behalve dat het minder verwarrend is dan andere Ipsum’s, is Website Ipsum ook geformatteerd in patronen die meer lijken op hoe een echte kopie tegenwoordig op internet wordt geformatteerd.
Heading 6 (H6)
Als je nieuwsgierig bent, dit is Website Ipsum. Het is speciaal ontwikkeld voor gebruik op ontwikkelingswebsites. Behalve dat het minder verwarrend is dan andere Ipsum’s, is Website Ipsum ook geformatteerd in patronen die meer lijken op hoe een echte kopie tegenwoordig op internet wordt geformatteerd.

Knoppen

Solid en outline knoppen zijn beschikbaar in alle kleurensets, inclusief zwart en wit.
ActionAction OutlinePrimaryPrimary Outline

KNOPPEN OP LICHTE ACHTERGROND

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline

KNOPPEN OP DONKERE ACHTERGROND

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline
Button XS
btn--action / btn--xs
Button S
btn--action / btn--s
Button M
btn--action / btn--m
Button L
btn--action / btn--l
Button XL
btn--action / btn--xl
Button XXL
btn--action / btn--xxl

Diversen

Rounded None
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl
None
XS
S
M
L
XL
XXL
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Box shadow M
Box shadow L
Box shadow XL

Kaart

Dit is een kaart met XS-padding. De inhoud ligt vrij dicht bij de randen.

Kaart

Dit is een kaart met S-padding. Deze heeft een iets strakkere padding.

Kaart

Dit is een kaart met M-padding. Hij heeft standaard ademruimte.

Kaart

Dit is een kaart met L-padding. Hij heeft extra ademruimte.

Kaart

Dit is een kaart met XL-padding. Er is veel ademruimte.

Kaart

Dit is een kaart met XXL-padding. Vermijd gebruik in een kleine ruimte.