Stijlgids

© Copyright Ziemo

Stijlgids maken

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in lacus lacinia, elementum nunc ac, finibus ipsum. Nullam pretium erat turpis, nec imperdiet libero pulvinar nec. Mauris eu ex eu eros vestibulum fringilla et quis diam. Duis erat tellus, sodales vel urna quis, congue efficitur sapien. Morbi a faucibus nibh. Vivamus non sapien et odio rutrum bibendum vel ut ante. Donec lobortis est erat, ac viverra eros iaculis sit amet. Phasellus ac tortor massa. Mauris eget sem vitae sem finibus hendrerit. Suspendisse potenti. Donec id ipsum a lectus consequat imperdiet. Vivamus diam enim, varius nec venenatis et, maximus eu mauris. Aliquam sit amet quam lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat, orci id finibus euismod, metus nibh porttitor mi, eget dapibus augue dui vitae quam. Fusce nunc diam, vulputate id odio nec, dictum lobortis velit. Morbi ullamcorper semper ex ac ullamcorper. Ut vel velit vulputate enim dictum aliquet lacinia vehicula elit. Mauris molestie lobortis leo nec aliquet. Quisque non sodales urna. Curabitur urna mauris, efficitur nec risus a, viverra vehicula arcu. Integer fringilla justo vel consequat fringilla. Vivamus rhoncus risus risus, eget fringilla erat aliquam interdum. Nam vitae purus vehicula ex facilisis euismod. Aenean et augue lacinia, porta erat in, accumsan eros. Donec mi sapien, mollis et metus nec, finibus sagittis dui. Aenean ac urna cursus, malesuada sapien id, varius nisi. Duis pharetra ligula elit, ut interdum felis ullamcorper et. Morbi vitae turpis dictum, suscipit libero vel, cursus dui. Cras ut lacus egestas, fringilla eros id, semper odio.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in lacus lacinia, elementum nunc ac, finibus ipsum. 

Logo

Logogebruik met achtergrond wit.

Dit is primair en de standaard.

Logogebruik met achtergrond turquoise.
Als secundaire optie.

Logogebruik met achtergrond geel.
Actiegericht of extra opvallend.

Logogebruik met achtergrond zwart.

Zwart is steeds meer de standaard.

Kleuren

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Primair

#07889B

Secundair

#66B9BF

Gradient

#07889B
#
66B9BF

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Primair

#FEC810

Secundair

#FFE794

Gradient

#FEC810
#FFE794

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Primair

#000000

Secundair

#797979

Gradient

#000000
#797979

Ondersteunende grijstinten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Primair

#797979

Secundair

#C5C5C5

Gradient

#F5F5F5

Typografie

Titel

Lorem ipsum dolor sit amet

Familie: Bree Sans Serif
Afmeting: 32 px
Dikte: 400 (normaal)
Kleur: #7979789 (donker grijs)
Regelafstand: 38 px

Titel

Lorem ipsum dolor sit amet

Familie: Bree Sans Serif
Afmeting: 32 px
Dikte: 400 (normaal)
Kleur: #07889B (turquoise)
Regelafstand: 38 px

Titel

Lorem ipsum dolor sit amet

Familie: Bree Sans Serif
Afmeting: 32 px
Dikte: 400 (normaal)
Kleur: #FEC810 (geel)
Regelafstand: 38 px

Kop

Lorem ipsum dolor sit amet

Familie: Bree Sans Serif
Afmeting: 22 px
Dikte: 400 (normaal)
Kleur: #7979789 (donker grijs)
Regelafstand: 28 px

Kop

Lorem ipsum dolor sit amet

Familie: Bree Sans Serif
Afmeting: 22 px
Dikte: 400 (normaal)
Kleur: #07889B (turquoise)
Regelafstand: 28 px

Kop

Lorem ipsum dolor sit amet

Familie: Bree Sans Serif
Afmeting: 22 px
Dikte: 400 (normaal)
Kleur: #FEC810 (geel)
Regelafstand: 28 px

Titel

Lorem ipsum dolor sit amet

Familie: Roboto
Afmeting: 70 px
Dikte: 900 (zwart)
Kleur: #000 (zwart)
Regelafstand: 70 px

Titel

Lorem ipsum dolor sit amet

Familie: Roboto
Afmeting: 70 px
Dikte: 900 (zwart)
Kleur: #07889B (turquoise)
Regelafstand: 70 px

Titel

Lorem ipsum dolor sit amet

Familie: Roboto
Afmeting: 70 px
Dikte: 900 (zwart)
Kleur: #FEC810 (geel)
Regelafstand: 70 px

Ondertitel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Familie: Roboto
Afmeting: 22 px
Dikte: 300 (licht)
Kleur: #000 (zwart)
Regelafstand: 34 px

Ondertitel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Familie: Roboto
Afmeting: 22 px
Dikte: 300 (licht)
Kleur: #07889B (turquoise)
Regelafstand: 34 px

Ondertitel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Familie: Roboto
Afmeting: 22 px
Dikte: 300 (licht)
Kleur: #FEC810 (geel)
Regelafstand: 34 px

Boven- / Subtitel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper.

Familie: Roboto
Afmeting: 16 px
Dikte: 300 (licht)
Kleur: #000 (zwart)
Regelafstand: 28 px

Boven- / Subtitel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper.

Familie: Roboto
Afmeting: 16 px
Dikte: 300 (licht)
Kleur: #07889B (turquoise)
Regelafstand: 28 px

Boven- / Subtitel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper.

Familie: Roboto
Afmeting: 16 px
Dikte: 300 (licht)
Kleur: #FEC810 (geel)
Regelafstand: 28 px

H1

Lorem ipsum dolor sit amet consectetur

Familie: Roboto
Afmeting: 32 px
Dikte: 300 (licht)
Kleur: #000 (zwart)
Regelafstand: 36 px

H1

Lorem ipsum dolor sit amet consectetur

Familie: Roboto
Afmeting: 32 px
Dikte: 300 (licht)
Kleur: #07889B (turquoise)
Regelafstand: 36 px

H1

Lorem ipsum dolor sit amet consectetur

Familie: Roboto
Afmeting: 32 px
Dikte: 300 (licht)
Kleur: #FEC810 (geel)
Regelafstand: 36 px

H2

Lorem ipsum dolor sit amet

Familie: Roboto
Afmeting: 22 px
Dikte: 300 (licht)
Kleur: #000000 (zwart)
Regelafstand: 30 px

H2

Lorem ipsum dolor sit amet

Familie: Roboto
Afmeting: 22 px
Dikte: 300 (licht)
Kleur: #07889B (turquoise)
Regelafstand: 36 px

H2

Lorem ipsum dolor sit amet

Familie: Roboto
Afmeting: 22 px
Dikte: 300 (licht)
Kleur: #FEC810 (geel)
Regelafstand: 30 px

H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Familie: Roboto
Afmeting: 16 px
Dikte: 500 (medium)
Kleur: #000000 (zwart)
Regelafstand: 24 px

H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Familie: Roboto
Afmeting: 16 px
Dikte: 500 (medium)
Kleur: #07889B (turquoise)
Regelafstand: 24 px

H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Familie: Roboto
Afmeting: 16 px
Dikte: 500 (medium)
Kleur: #FEC810 (geel)
Regelafstand: 24 px

p

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Familie: Roboto
Afmeting: 14 px
Dikte: 400 (normaal)
Kleur: #000000 (zwart)
Regelafstand: 24 px

p

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Familie: Roboto
Afmeting: 14 px
Dikte: 400 (normaal)
Kleur: #07889B (turquoise)
Regelafstand: 24 px

p

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Familie: Roboto
Afmeting: 14 px
Dikte: 400 (normaal)
Kleur: #FEC810 (geel)
Regelafstand: 24 px

Afbeeldingen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

mountains, hills, rock walls-7623362.jpg
ocean, coast, cliffs-7736669.jpg
barley, field, sunset-1117282.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Elementen

Margin:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Titel

Ondertitel

Marge onder:
10px / 20px

Ondertitel

Boven- / Subtitel

Marge onder:
10px / 20px

Boven- / Subtitel

[Content]

Marge onder:
40px / 80px

H1

p

Marge onder:
10px

H2

p

Marge onder:
10px

H3

p

Marge onder:
0px

Padding:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Container

Hoofdcontainer:
60px 80px 60px 80px

.

.

.

Ruimte tussen panels: 50

Ruimte tussen elementen: 20 / 40

Panels

Panels zijn 

Kleine panels
Randen -> Box-shadow:
Horizontaal: 0 / Verticaal: 2 / Vervaging: 4 / Verspreiding: 1 / Kleur: rgba(0, 0, 0, 0.2)

Groot panel
Randen -> Box-shadow:
Horizontaal: 0 / Verticaal: 0 / Vervaging: 10 / Verspreiding: 0 / Kleur: rgba(0, 0, 0, 0.25)

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in lacus lacinia, elementum nunc ac, finibus ipsum. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel dui sit amet erat euismod interdum sed eget dui. Aliquam iaculis lacinia lorem, vitae volutpat velit rutrum vitae. Etiam in fringilla elit. Phasellus rutrum tellus blandit ante congue, ac eleifend velit molestie. Aenean a lacus non ipsum efficitur tincidunt eu vel turpis. Nam feugiat quam ut est lacinia, vel molestie sapien fermentum. Proin egestas pharetra purus a elementum. Fusce ac dui purus. Duis congue diam id nunc dignissim, vel egestas nisl ornare. Sed arcu ex, scelerisque eget diam in, pellentesque congue nisl. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel dui sit amet erat euismod interdum sed eget dui. Aliquam iaculis lacinia lorem, vitae volutpat velit rutrum vitae. Etiam in fringilla elit. Phasellus rutrum tellus blandit ante congue, ac eleifend velit molestie. Aenean a lacus non ipsum efficitur tincidunt eu vel turpis. Nam feugiat quam ut est lacinia, vel molestie sapien fermentum. Proin egestas pharetra purus a elementum. Fusce ac dui purus. Duis congue diam id nunc dignissim, vel egestas nisl ornare. Sed arcu ex, scelerisque eget diam in, pellentesque congue nisl. 

Voeg je koptekst hier toe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel dui sit amet erat euismod interdum sed eget dui. Aliquam iaculis lacinia lorem, vitae volutpat velit rutrum vitae. Etiam in fringilla elit. Phasellus rutrum tellus blandit ante congue, ac eleifend velit molestie. Aenean a lacus non ipsum efficitur tincidunt eu vel turpis. Nam feugiat quam ut est lacinia, vel molestie sapien fermentum.

Uitwerking

Kladblok

Ik was op zoek naar een kleur en daar een kleurenpaletbij maken met matchende kleuren. 
https://mycolor.space/?hex=%23C31732&sub=1 

Uiteraard ook: 
https://color.adobe.com/nl/create/color-wheel 
Of andere vergelijkbare websites die paletten genereren.


Wat kan ik er nog meer bij maken:

Knoppen

Scroll naar boven