Dit is
de styleguide van Penning Architectuur en Stedenbouw.

Benieuwd naar de huisstijl van Penning Architectuur en Stedenbouw? In deze styleguide vind je elementen terug voor de website.

Aan de slag

Color palette

Dit is een overzicht van de kleuren (+de hex codes en gradiënten) en voorkomen op de website, Deze kleuren staan ook in de Theme opties zodat ze makkelijk te bereiken zijn tijdens het vormgeven.
#262262
#00b2d9
#036e3b

#208f42

#8cc63f
#f0fcff
#f7fbf0
#000000
#ffffff

Typography

Hieronder een visuele weergave van het typografie. Alle letters van het alfabet, in de vorm van kleine letters en hoofdletters, de cijfers 1 tot en met 10, en een aantal veel gebruikte leestekens. Daarnaast zie je hoe het de typografie tot zijn rechtkomt bij een titel en regulier zin.

Font 1.0

Roboto

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 !?@#%&*()/

Roboto regular

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.

Roboto bold

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.

Text styles

Hieronder zie je hoe de kopteksten, bodytekst en list items worden gebruikt.

Heading 1

Lorem ipsum dolor

Heading 2

Lorem ipsum dolor

Heading 3

Lorem ipsum dolor

Heading 4

Lorem ipsum dolor

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.

Quote

“Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.”

List

  • Lorem ipsum dolor
  • Ut enim ad minim veniam
  • Lorem ipsum
  • Consectetur adipiscing elit

Link

Lorem ipsum dolar

List

  1. Lorem ipsum dolor
  2. Ut enim ad minim veniam
  3. Lorem ipsum
  4. Consectetur adipiscing elit

All in one

Lorem ipsum dolor

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.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Lorem ipsum dolor
  2. Ut enim ad minim veniam
  3. Lorem ipsum
  4. Consectetur adipiscing elit

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor
  • Ut enim ad minim veniam
  • Lorem ipsum
  • 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

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.

Text styles

Hieronder zie je hoe de kopteksten, bodytekst en list items worden gebruikt.

Heading 1

Lorem ipsum dolor

Heading 2

Lorem ipsum dolor

Heading 3

Lorem ipsum dolor

Heading 4

Lorem ipsum dolor

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.

Quote

“Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.”

List

  • Lorem ipsum dolor
  • Ut enim ad minim veniam
  • Lorem ipsum
  • Consectetur adipiscing elit

Link

Lorem ipsum dolar

List

  1. Lorem ipsum dolor
  2. Ut enim ad minim veniam
  3. Lorem ipsum
  4. Consectetur adipiscing elit

All in one

Lorem ipsum dolor

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.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Lorem ipsum dolor
  2. Ut enim ad minim veniam
  3. Lorem ipsum
  4. Consectetur adipiscing elit

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor
  • Ut enim ad minim veniam
  • Lorem ipsum
  • 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

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.

Text styles I

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum

Lorem ipsum dolor sit amet.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo.

Suspendisse egestas est ac? Dolor imperdiet pretium.

Icons

Icon nummer 1

Icon nummer 2

Icon nummer 3

Icon nummer 3

Text styles II

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo. Suspendisse egestas est ac dolor imperdiet pretium. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum

Lorem ipsum dolor sit amet.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo.

Lorem ipsum dolor

Buttons

Button style with light background color

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Blockquote

SHARED BY

Penning Architectuur en Stedenbouw

Nullam eros mi? Mollis in sollicitudin non. Tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo.
Button style with background color #f7fbf0
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Buttons style with background color #f0fcff
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Forms

Lorem ipsum dolor sit amet.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo.

*Sed et felis metus, rhoncus ornare nibh.

Lorem ipsum dolor sit amet.

Nullam eros mi, mollis in sollicitudin non, tincidunt sed enim. Sed et felis metus, rhoncus ornare nibh. Ut at magna leo.

*Sed et felis metus, rhoncus ornare nibh.