Framework

UI Style Guide

01. Color palette

In dit onderdeel van de style guide verwerken we de kleuren die we gaan toepassen op de website. Onder de kleur vind je de kleurencodes. Deze kleurencodes plaatsen we in het kleurenpalet van je website.

#FFFFFF

#000000

#00b2e2

#5b6771

#f59c26

#FFFFFF

#00b2e2

#00b2e2

#5b6771

02. Text styles

In het volgende onderdeel van deze style guide hebben we de tekst type gestijld. We hebben 3 verschillende styles gebruikt waar je een keuze uit kan maken.

Primary

Secondary

Heading 1

Heading 1

Heading 1

Heading 2

Heading 2

Heading 2

Heading 3

Heading 3

Heading 3

Heading 4

Heading 4

Heading 4

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

List

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

All in one

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

03. Modules

In het laatste gedeelte van deze styleguide hebben we de meest gebruikte modules gestijld met de eerder gemaakte tekst stijlen. Ook hier laten we drie verschillende stijlen zien om je een goed beeld te geven van hoe de modules er op je website uit kunnen komen te zien.

Primary

Secondary

Tertiary

Blurb

]

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Email optin

Contact form

10 + 8 =

6 + 13 =

9 + 1 =

Image

Call to action

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Divider

Person

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Social Media Follow

Toggle

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Testimonial

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Video

Accordion

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Blog

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem    Lean werken gaat over het zo efficiënt mogelijk maken van processen. Het analyseren van een probleem is daarbij heel erg belangrijk. Er zijn verschillende methodes om de oorzaak van een probleem te...

Het Ishikawa diagram en hoe je Lean er praktisch mee maak

Het Ishikawa diagram en hoe je Lean er praktisch mee maak    Een leverancier/onderhoudsbedrijf van Cv-ketels vroeg mij laatst om hulp. Het bedrijf kreeg regelmatig klachten, omdat hun monteurs vaak veel te laat aankwamen bij de klant. Als hij aan zijn eigen monteurs...

Scrum-events: dit zijn ze en hierom zijn ze zo belangrijk

Scrum-events: dit zijn ze en hierom zijn ze zo belangrijk

Scrum-events: dit zijn ze en hierom zijn ze zo belangrijk  Sprints vormen het hart van de Scrum-methode. Een sprint is een korte periode die uit 2 tot maximaal 4 weken bestaat. Binnen die periode wordt er in een multidisciplinair team gewerkt aan de ontwikkeling van...

Wat is agile werken? En hoe Scrum en Lean daarin passen

Wat is Agile werken? En hoe Scrum en Lean daarin passen     Agile werken. Het is een term die je steeds vaker hoort in het bedrijfsleven. Maar wat is Agile werken nou precies? Agile betekent letterlijk: wendbaar, lenig en flexibel. Het is oorspronkelijk een term uit...

Dit is wat Scrum en Lean jou opleveren tijdens een fusie

Dit is wat Scrum en Lean jou opleveren tijdens een fusie   Een bedrijfsfusie. Bij veel organisaties is het een moeizaam, langdurig proces. Dat is niet zo gek. Er komt veel bij kijken: de communicatie met alle stakeholders (werknemers, investeerders en klanten) moet...

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem    Lean werken gaat over het zo efficiënt mogelijk maken van processen. Het analyseren van een probleem is daarbij heel erg belangrijk. Er zijn verschillende methodes om de oorzaak van een probleem te...

Het Ishikawa diagram en hoe je Lean er praktisch mee maak

Het Ishikawa diagram en hoe je Lean er praktisch mee maak    Een leverancier/onderhoudsbedrijf van Cv-ketels vroeg mij laatst om hulp. Het bedrijf kreeg regelmatig klachten, omdat hun monteurs vaak veel te laat aankwamen bij de klant. Als hij aan zijn eigen monteurs...

Scrum-events: dit zijn ze en hierom zijn ze zo belangrijk

Scrum-events: dit zijn ze en hierom zijn ze zo belangrijk

Scrum-events: dit zijn ze en hierom zijn ze zo belangrijk  Sprints vormen het hart van de Scrum-methode. Een sprint is een korte periode die uit 2 tot maximaal 4 weken bestaat. Binnen die periode wordt er in een multidisciplinair team gewerkt aan de ontwikkeling van...

Wat is agile werken? En hoe Scrum en Lean daarin passen

Wat is Agile werken? En hoe Scrum en Lean daarin passen     Agile werken. Het is een term die je steeds vaker hoort in het bedrijfsleven. Maar wat is Agile werken nou precies? Agile betekent letterlijk: wendbaar, lenig en flexibel. Het is oorspronkelijk een term uit...

Dit is wat Scrum en Lean jou opleveren tijdens een fusie

Dit is wat Scrum en Lean jou opleveren tijdens een fusie   Een bedrijfsfusie. Bij veel organisaties is het een moeizaam, langdurig proces. Dat is niet zo gek. Er komt veel bij kijken: de communicatie met alle stakeholders (werknemers, investeerders en klanten) moet...

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem    Lean werken gaat over het zo efficiënt mogelijk maken van processen. Het analyseren van een probleem is daarbij heel erg belangrijk. Er zijn verschillende methodes om de oorzaak van een probleem te...

Het Ishikawa diagram en hoe je Lean er praktisch mee maak

Het Ishikawa diagram en hoe je Lean er praktisch mee maak    Een leverancier/onderhoudsbedrijf van Cv-ketels vroeg mij laatst om hulp. Het bedrijf kreeg regelmatig klachten, omdat hun monteurs vaak veel te laat aankwamen bij de klant. Als hij aan zijn eigen monteurs...

Scrum-events: dit zijn ze en hierom zijn ze zo belangrijk

Scrum-events: dit zijn ze en hierom zijn ze zo belangrijk

Scrum-events: dit zijn ze en hierom zijn ze zo belangrijk  Sprints vormen het hart van de Scrum-methode. Een sprint is een korte periode die uit 2 tot maximaal 4 weken bestaat. Binnen die periode wordt er in een multidisciplinair team gewerkt aan de ontwikkeling van...

Wat is agile werken? En hoe Scrum en Lean daarin passen

Wat is Agile werken? En hoe Scrum en Lean daarin passen     Agile werken. Het is een term die je steeds vaker hoort in het bedrijfsleven. Maar wat is Agile werken nou precies? Agile betekent letterlijk: wendbaar, lenig en flexibel. Het is oorspronkelijk een term uit...

Dit is wat Scrum en Lean jou opleveren tijdens een fusie

Dit is wat Scrum en Lean jou opleveren tijdens een fusie   Een bedrijfsfusie. Bij veel organisaties is het een moeizaam, langdurig proces. Dat is niet zo gek. Er komt veel bij kijken: de communicatie met alle stakeholders (werknemers, investeerders en klanten) moet...

error: checked