Dit is
de styleguide van Bar Coco.
Benieuwd naar de huisstijl van Bar Coco? In deze styleguide vind je elementen terug voor de website.
Color palette
#ffffff
Typography
Font 1.0
CourierSans
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 !?@#%&*()/
CourierSans 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.
CourierSans 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
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
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 dolar
Excepteur sint aliqua
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Duis aute irure dolor in reprehenderit in voluptate.
Duis aute irure dolor in reprehenderit in voluptate.
Duis aute irure dolor in reprehenderit in voluptate.
Excepteur sint occaecat
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat.
Exceur Sint
Duis aute irure dolor in reprehen derit in voluptate velit esse cillum dolore eu fugiat nulla.
Exceur Sint
Duis aute irure dolor in reprehen derit in voluptate velit esse cillum dolore eu fugiat nulla.
Exceur Sint
Duis aute irure dolor in reprehen derit in voluptate velit esse cillum dolore eu fugiat nulla.
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
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.
Duis aute irure dolor
Duis aute irure dolor
Duis aute irure dolor
Excepteur sint accaecat cupidatat lorem.
Icons
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.
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.