Dit is
de styleguide van Reservato.

Benieuwd naar de huisstijl van Reservato? In deze styleguide vind je elementen terug voor de website.

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.

#f2944a

#000000

#ff923c

#c6b5af

#545454

#f7dba7

#ffffff

#f5f5f5

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

Font naam

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

Font naam 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.

Font naam 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

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

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.

Lorem ipsum.

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

Lorem ipsum.

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

Lorem ipsum.

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

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.

Buttons

Button style with light background color

Blockquote

SHARED BY

Reservato

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 #f2944a

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.