Whitby Seafoods

Style Guide

Style Guide
 

Site logos

Site colours

typography - #3c5865

H1 VTypewriter 32px | 36px -40

H2 VTypewriter 28px | 32px -40

H3 VTypewriter 20px | leading 24px -40

H4 VTypewriter 18px | leading 22px -40

T1 Courier new 18px | 24px
T1 Courier new 14px | 20px

Body copy Courier New 12px | leading 18px

Accordions

  • Accordion 1

    Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • Accordion 2

    Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • Accordion 3

    Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Modals

Click on a button to see the different types of modals

  • small

    Awesome. I have it.

    Your couch. It is mine.

    I'm a cool paragraph that lives inside of an even cooler modal. Wins!

  • small close

    Awesome. I have it.

    Your couch. It is mine.

    I'm a cool paragraph that lives inside of an even cooler modal. Wins!

     
  • large

    Awesome. I have it.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam enim, facere! Nam, magni beatae voluptates.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere aspernatur ullam illo sequi minus veritatis facilis blanditiis assumenda libero autem porro nisi unde, deserunt inventore, natus nemo laboriosam, debitis sapiente!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nesciunt natus omnis odit distinctio officiis possimus voluptates quod reprehenderit, ea accusantium praesentium asperiores reiciendis labore error, aliquid ipsam? A, aliquam.

Forms