Style Guide
Van Aetsveld
Inspiratie
Kleuren
Kleurtinten en transparanties zijn wiskundige berekeningen van de hoofdkleuren.
- Action: De actiekleur van het palet (belangrijke knoppen en links).
- Primary: De primaire kleur van het palet. (hoofd CTA’s en secties).
- Secondary: De op één na meest gebruikte kleur van het palet (minder belangrijke knoppen en infokaarten).
- Accent: De minst gebruikte kleur van het palet. (kaders, kaarten, enz.).
- 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.).
- 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
Typografie
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.