Brighton

Website Styleguide & Example Sheet

Typography

.brighton-eyebrow

Font Family: caecilia-sans-text
Font Weight: 400
Font Size: 1.5rem / Mobile: 1.3rem
Line Height: 2.1rem / Mobile: 1.5rem
Letter Spacing: .3rem / Mobile: .25rem
Text Transform: Uppercase
Color: #403F3F

Lorem ipsum dolor sit lectus

.brighton-h1

Font Family: abril-display
Font Weight: 400
Font Size: 4.2rem / Mobile: 2.8rem
Line Height: 4.8rem / Mobile: 3.6rem
Text Transform: Uppercase
Color: #403F3F

Lorem ipsum dolor sit lectus ullamcorper

.brighton-h2

Font Family: abril-display
Font Weight: 400
Font Size: 3.6rem / Mobile: 2.4rem
Line Height: 4.2rem / Mobile: 3.2rem
Text Transform: Uppercase
Color: #403F3F

Lorem ipsum dolor sit lectus ullamcorper

.brighton-h3

Font Family: abril-display
Font Weight: 400
Font Size: 2.8rem / Mobile: 2.2rem
Line Height: 3.4rem / Mobile: 3rem
Text Transform: Uppercase
Color: #403F3F

Lorem ipsum dolor sit lectus ullamcorper consectetur

.brighton-h4

Font Family: abril-display
Font Weight: 400
Font Size: 2.2rem / Mobile: 1.8rem
Line Height: 3rem / Mobile: 2.6rem
Text Transform: Uppercase
Color: #403F3F

Lorem ipsum dolor sit lectus ullamcorper consectetur tempus massa

.brighton-h5

Font Family: abril-display
Font Weight: 400
Font Size: 1.8rem / Mobile: 1.7rem
Line Height: 2.6rem / Mobile: 2.4rem
Text Transform: Uppercase
Color: #403F3F

Lorem ipsum dolor sit lectus ullamcorper consectetur tempus massa. Tempus et pharetra pharetra massa.

.brighton-p1

Font Family: caecilia-sans-text
Font Weight: 300
Font Size: 2rem / Mobile: 1.8rem
Line Height: 3.2rem / Mobile: 3rem
Color: #403F3F / Mobile: #000

Lectus vestibulum matis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Habitasse platea dictumst quisque sagittis purus sit amet. Tempus urna et pharetra pharetra massa. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum.

.brighton-p2

Font Family: caecilia-sans-text
Font Weight: 400
Font Size: 1.6rem
Line Height: 3rem / Mobile: 2.6rem
Color: #403F3F

Lectus vestibulum matis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Habitasse platea dictumst quisque sagittis purus sit amet. Tempus urna et pharetra pharetra massa. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum.

.brighton-p3

Font Family: caecilia-sans-text
Font Weight: 400
Font Size: 1.4rem
Line Height: 2.8rem / Mobile: 2.4rem
Color: #444

Lectus vestibulum matis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Habitasse platea dictumst quisque sagittis purus sit amet. Tempus urna et pharetra pharetra massa. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum.

.brighton-p4

Font Family: caecilia-sans-text
Font Weight: 400
Font Size: 1.2rem
Line Height: 2rem
Color: #444

Lectus vestibulum matis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Habitasse platea dictumst quisque sagittis purus sit amet. Tempus urna et pharetra pharetra massa. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum.

.brighton-cta

Font Family: caecilia-sans-text
Font Weight: 400
Font Size: 1.6rem / Mobile: 1.5rem
Line Height: 2rem
Letter Spacing: .1rem
Text Transform: Uppercase
Color: #444

Color pallete

(--color-styleguide-primary)
#F7F5F3
(-color-styleguide-secondary)
#DBD9D7
(--color-styleguide-text-heading)
#403F3F
(--color-styleguide-text-body)
#444
(--color-styleguide-accent-1)
#333333
(--color-styleguide-accent-2)
#DDE9EB
(--color-styleguide-accent-3)
#E8E6F3
(--color-styleguide-accent-4)
#E3EBF8
(--color-styleguide-accent-5)
#F4E3E3
(--color-styleguide-black)
#000
(--color-styleguide-white)
#fff

Typography Examples

Section One

Vestibulum Matis

Laoreet id donec ultrices tincidunt arcu non sodales. Habitant morbi tristique senectus et donec aliquet netus.

Lorem Ipsum Dolor Amet

Dis parturient montes nascetur ridiculus mus mauris. Sit amet nulla facilisi morbi tempus iaculis. Laoreet id donec ultrices tincidunt arcu non sodales. Habitant morbi tristique senectus et netus. Venenatis cras sed felis eget velit aliquet. Ac odio tempor orci dapibus. Lorem ipsum dolor sit amet, Massa ultricies mi quis hendrerit.

Lorem ipsum dolor sit amet consectetur

Vitae ultricies leo integer malesuada nunc. Lectus vestibulum matis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Habitasse platea dictumst quisque sagittis purus sit amet. In hac habitasse platea dictumst quisque sagittis purus sit. Tempus urna et pharetra pharetra massa. Nibh sit amet commodo nulla facilisi nullam.

Learn More

Section Two

Lectus Mas Dictums

Sagittis hac habitasse platea dictumst quisque sagittis purus sit. Tempus urna et pharetra pharetra massa eget est lorem. Habitasse platea dictumst quisque sagittis amet.

Learn More

Mauris mi sit amet mauris commodo. Quis lectus nulla at volutpat diam ut. Vitae ultricies leo integer malesuada nunc. Lectus vestibulum matis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Habitasse platea dictumst quisque sagittis purus sit amet. In hac habitasse platea dictumst quisque sagittis purus sit. Tempus urna et pharetra pharetra massa. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum amet nulla facilisi.

Dis parturient montes nascetur ridiculus mus mauris. Sit amet nulla facilisi morbi tempus iaculis. Laoreet id donec ultrices tincidunt arcu non sodales. Habitant morbi tristique senectus et netus. Venenatis cras sed felis eget velit aliquet. Ac odio tempor orci dapibus. Lorem ipsum dolor sit amet, Massa ultricies mi quis hendrerit.

  • Aliquet Ullamcorper
  • Pharetra Massa
  • Morbi & Tincidunt
  • Lectus & Dictumst
  • Sagittis & Habitasse
  • Pharetra & Vitae Nulla

    • Lorem Ipsum Dolor

    In hac habitasse platea dictumst quisque sagittis purus sit. Tempus urna et pharetra pharetra massa eget est lorem. Habitasse platea dictumst quisque sagittis purus sit amet.

    Learn More

    Lorem ipsum dolor sit amet

    Dis parturient montes nascetur ridiculus mus mauris. Sit amet nulla facilisi morbi tempus iaculis. Laoreet id donec ultrices tincidunt arcu non sodales. Habitant morbi tristique senectus et netus. Venenatis cras sed felis eget velit aliquet. Ac odio tempor orci dapibus. Lorem ipsum dolor sit amet, Massa ultricies mi quis hendrerit dolor.

    Quis lectus nulla at volutpat diam ut. Vitae ultricies leo integer malesuada nunc. Lectus vestibulum matis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Habitasse platea dictumst quisque sagittis purus sit amet. In hac habitasse platea dictumst quisque sagittis purus sit. Tempus urna et pharetra pharetra massa eget est lorem.

  • Aliquet Ullamcorper
  • Pharetra Massa
  • Morbi & Tincidunt
  • Lectus & Dictumst
  • Sagittis & Habitasse
  • Pharetra & Vitae Nulla

    • Emper auctor neque vitae tempus quam pellentesque. Morbi tristique senectus et netus et malesuada fames ac. Lectus sit amet est placerat in egestas erat imperdiet sed. Metus vulputate eu scelerisque felis.

    Sit amet luctus venenatis lectus magna fringilla urna porttitor. Eget arcu dictum varius duis at consectetur lorem donec massa. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Ut morbi tincidunt augue interdum velit euismod. Lectus quam id leo in vitae turpis massa. Lectus vestibulum matis ullamcorper velit sed.

    Lorem ipsum dolor sit lectus ullamcorper consectetur

    Our success model provides clients with a framework for blue sky innovation, deep data insights, a clear playbook to deliver, and a roadmap to grow lifetime value.

    Massa ultricies mi quis hendrerit dolor magna eget est lorem. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi sit amet mauris commodo. Quis lectus nulla at volutpat diam ut. Vitae ultricies leo integer malesuada nunc. Lectus vestibulum matis ullamcorper velit sed ullamcorper.

    Sit amet luctus venenatis lectus magna fringilla urna porttitor. Eget arcu dictum varius duis at consectetur lorem donec massa. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Ut morbi tincidunt augue interdum velit euismod. Lectus quam id leo in vitae turpis massa. Lectus vestibulum matis ullamcorper velit sed.

    Lorem ipsum dolor sit

    Venenatis cras sed felis eget velit aliquet. Ac odio tempor orci dapibus. Tortor condimentum lacinia quis vel eros donec ac. Posuere urna nec tincidunt praesent. Sit amet luctus venenatis lectus magna fringilla urna porttitor eget arcu.

    Dis parturient montes nascetur ridiculus mus mauris. Sit amet nulla facilisi morbi tempus iaculis. Laoreet id donec ultrices tincidunt arcu non sodales. Habitant morbi tristique senectus et netus. Venenatis cras sed felis eget velit aliquet. Ac odio tempor orci dapibus. Lorem ipsum dolor sit amet, Massa ultricies mi quis hendrerit dolor magna eget est lorem. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi sit amet mauris commodo. Quis lectus nulla at volutpat diam ut. Vitae ultricies leo integer malesuada nunc. Lectus vestibulum matis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Habitasse platea dictumst quisque sagittis purus sit amet. In hac habitasse platea dictumst quisque sagittis purus sit. Tempus urna et pharetra pharetra massa. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum.

    Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Etiam sit amet nisl purus in mollis nunc sed id. Nec feugiat in fermentum posuere urna nec tincidunt praesent.

    Sit amet luctus venenatis lectus magna fringilla urna porttitor. Eget arcu dictum varius duis at consectetur lorem donec massa. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Ut morbi tincidunt augue interdum velit euismod. Lectus quam id leo in vitae turpis massa. Lectus vestibulum matis ullamcorper velit sed ullamcorper morbi tincidunt ornare.