Dit is
de styleguide van Bar Coco.

Benieuwd naar de huisstijl van Bar Coco? 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.
#42AE76
#ce2b37
#adb8a7
#6d886b

#ffffff

#000000

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

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

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

Lorem ipsum

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.”

Michael Doe - Customer

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

Lorem ipsum
Lorem ipsum dolar

Excepteur sint accaecat cupidatat lorem.

Lorem ipsum

Icons

Icon nummer 1
Icon nummer 2

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.

Buttons

Button style with light background color

Lorem ipsum
Lorem ipsum
Lorem ipsum

Blockquote

SHARED BY

Bar Coco

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 rgba(173,184,167,0.2)

Lorem ipsum
Lorem ipsum
Lorem ipsum

Buttons style with background color #000000

Lorem ipsum
Lorem ipsum
Lorem ipsum

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.