Dit is de Styleguide
van Reservato
Bekijk de huisstijl van Reservato. In deze styleguide vind je de basis elementen die we gebruiken op de website.
Lets rock! 🚀
Color palette
#ff3b30
#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.
Tone of voice
Font 1.0
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 !?@#%&*()/
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.
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.
Font 2.0
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 !?@#%&*()/
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.
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
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
List
- Lorem ipsum dolor
- Ut enim ad minim veniam
- Lorem ipsum
- 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.
- Lorem ipsum dolor
- Ut enim ad minim veniam
- Lorem ipsum
- 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
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
List
- Lorem ipsum dolor
- Ut enim ad minim veniam
- Lorem ipsum
- 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.
- Lorem ipsum dolor
- Ut enim ad minim veniam
- Lorem ipsum
- 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.
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.
Icons
Icon nummer 3
Icon nummer 4
Forms styles I
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.
Forms styles II
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 dolar
Excepteur sint aliqua
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum
Lorem ipsum dolor amet consec tetur adipiscing elit eiusmod tempor incididunt labore dolore magna alirua enim minim veniam nostrud exerci tation ullamco laboris aliruip noname.
Consectetur adipiscing elit
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.
Excepteur sint occaecat
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat.
01.
Exceur Sint Lorem
Lorem ipsum dolor amet consec tetur adipiscing elit eiusmod tempor labore dolore magna alirua enim minim lorem ipsum dolor amet sit veniam.
02.
Exceur Sint Lorem
Lorem ipsum dolor amet consec tetur adipiscing elit eiusmod tempor labore dolore magna alirua enim minim lorem ipsum dolor amet sit veniam.
03.
Exceur Sint Lorem
Lorem ipsum dolor amet consec tetur adipiscing elit eiusmod tempor labore dolore magna alirua enim minim lorem ipsum dolor amet sit veniam.
Lorem ipsum dolar
Excepteur Sint Accaecat Dolor Cupidatat Ron.
Perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae. Ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia sit aspernatur aut.
“Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat hendrerit massa. In cursus ornare sollicitudin.”
Lorem Ipsum
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
Lorem Ipsum
Excepteur occaecat cupidatat non proident sunt in.
Lorem Ipsum
Excepteur occaecat cupidatat non proident sunt in.
Lorem Ipsum
Excepteur occaecat cupidatat non proident sunt in.