Brand Guidelines

Brand guidelines for Farnell Packaging Limited.

  • Primary

    #272e64

  • Secondary

    #57aef2

  • Tertiary

    #F95C7B

General Elements

Various typographical elements & widgets used throughout the site.

Large H1 Open Sans

Headers – Open Sans

The Open Sans typeface is intended to be used as a header and other title or other heading content. Use Bold for large and secondary or lengthy titles.

Body Copy – Open Sans

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.


H1 Heading Styling

50 words Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque arcu ac est pretium, vitae lobortis sem sagittis. Aenean aliquet magna nec dui tincidunt molestie at ultrices purus. Nullam sodales libero ac pellentesque maximus. In semper purus sed leo tempus varius. Donec consequat tellus dolor, id ultrices sapien ultricies pharetra. Suspendisse volutpat venenatis tortor at condimentum.

Mauris ullamcorper at tellus eget commodo. Donec eget tincidunt urna. Suspendisse nisi nulla, lacinia ut volutpat non, tincidunt in felis. Integer a accumsan justo, pellentesque congue sapien. Nam sodales, urna vitae malesuada ultricies, ante quam aliquet magna, at tincidunt mauris lacus vitae turpis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis rhoncus nunc eget rutrum. Proin fermentum ultrices cursus.
  • Sed tempus nibh congue, vehicula risus ut
  • Nunc eleifend nisi velit, vitae feugiat metus imperdiet non.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis rhoncus nunc eget rutrum. Proin fermentum ultrices cursus.
  2. Sed tempus nibh congue, vehicula risus ut
  3. Nunc eleifend nisi velit, vitae feugiat metus imperdiet non.

H2 Heading Styling

50 words Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque arcu ac est pretium, vitae lobortis sem sagittis. Aenean aliquet magna nec dui tincidunt molestie at ultrices purus.

Another paragraph for testing.

Firstname Lastname
Position, Company

50 words Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.

H3 Heading Styling

50 words Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.

Primary Button
Secondary Button
CTA Button
Small Button
Large Button

H2 Heading Styling

50 words Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.

This is some caption for this image

H4 Heading Styling

20 words Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

H4 Heading Styling

20 words Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

H4 Heading Styling

20 words Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

H4 Heading Styling

20 words Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



Table HeaderTable HeaderTable HeaderTable Header
Item 1Item 2Item 3Item 4
Something else here


Posts

Standard post list styling.

Icons

Iconography is used throughout the site to aid in functionality.

Usage: <svg class="icon-check"><use xlink:href="#icon-check"></use></svg> will output

Forms

Base form styling for regular forms and HubSpot forms.

Warning!

You are using an outdated browser. Things may not appear as intended. We recommend updating your browser to the latest version.

Close