<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1059590667558673&amp;ev=PageView&amp;noscript=1">
Lean Labs

Brand & style guidelines

 

 

Style

Colors

Our colors are bold, enthusiastic and full of energy. To ensure a unified brand, it's important to use these colors and these colors only.


Primary & secondary colors

  • Red #F84756 (:hover state, buttons, accents)
  • Navy #252A3E (titles, backgrounds, accents)

Interface colors

  • Blue #1ACBF6 (hyperlinks, clickable, accents)
  • Green #11E7AE (accents)
  • Yellow #FFE46B (accents)
  • Salmon #FEF6F6 (accents, backgrounds)
  • White #FFFFFF (backgrounds)
  • Grey #6B6F81 (text)

Typography

Lean Labs use two type families. Merriweather for titles and Poppins for body. All text is written in “Sentence case”, eg. headline: How to get the greatest results from a limited marketing budget


Merriweather

abcdefghijklmnopqrstuvwxyz 
ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0123456789

H1 - header one title - Merriweather, black, #252A3E, 48px

H2 - header two title - Merriweather, black, #252A3E, 48 px

H3 - header three title - Merriweather, black, #252A3E, 28px

H4 - header four title - Merriweather, black, #252A3E, 24px

H5 - header five title - Merriweather, black, #252A3E, 20px

Poppins

abcdefghijklmnopqrstuvwxyz 
ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0123456789

H6 - Header Six Title - Poppins, Medium, Uppercase, #87909E, 16px

Paragraph Text - Poppins, Regular, #87909E, 16px

Small Paragraph Text - Poppins, Regular, #87909E, 14px

Lead Paragraph Text - Poppins, REGULAR, #87909E, 22px

“Blockquote - Poppins, Light, Italic, #87909E, 16px. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.”

 

Text Link - Poppins, Regular, #87909E, 16px

  • List item - Poppins, Regular, #87909E, 16px
  • List item - Poppins, Regular, #87909E, 16px
  • List item - Poppins, Regular, #87909E, 16px
  1. List item - Poppins, Regular, #87909E, 16px
  2. List item - Poppins, Regular, #87909E, 16px
  3. List item - Poppins, Regular, #87909E, 16px

Buttons

There are two types of buttons. Primary buttons and Secondary buttons. Primary buttons are used to push the user to the next step of the buyer journey. Secondary buttons are used to push users deeper into the internal pages.


Primary button text

Images

Photography

At Lean Labs we prefer to use bright, bold photography that conveys optimism, humanity, and authenticity. We are constantly adding to our collection of photography to give anyone operating within the Lean Labs brand a good range of photographs to choose from.


tennis-cris

 

Stock photography

At Lean Labs we prefer to use bright, bold photography that conveys optimism, humanity, and authenticity. We are constantly adding to our collection of photography to give anyone operating within the Lean Labs brand a good range of photographs to choose from.


GOOD stock photography

Screenshot 2020-06-17 at 20.37.54

Bad stock photography

Screenshot 2020-06-17 at 20.35.36

Icons

We have two graphical icon packs. Icons are being used in graphics and slide decks only. Graphic icons are not to be used within the interface, eg. feature list. However functional icons can be used within the interface, eg. down chevron arrow. 


Screenshot 2020-06-18 at 01.31.41

Screenshot 2020-06-18 at 01.31.01

 

Atmosphere

Lean Labs use abstract, offset shapes and patterns to highlight and frame content. If the frame contains blue - it's clickable. If it's green or another color, it is not clickable. 


kevin-pattern

 

Graphics

Lean Labs use unbranded devices to display information. Graphical style still a work in progress. 


 

Video thumbnails

Video thumbs require a logo, cut out team member - w/border, title, sub text and background image.


Desktop video thumb v3 Copy 2

 

Offers

 

Modules

LLv3 Nav Dropdown 01

Screenshot 2020-06-18 at 16.28.43

 

LLv3 Hero 01

Screenshot 2020-06-18 at 16.32.10

 

LLv3 Hero 02

Screenshot 2020-06-18 at 19.19.53

Screenshot 2020-06-18 at 19.22.39

Screenshot 2020-06-18 at 19.23.58

 

LLv2 One Col 01

Screenshot 2020-06-18 at 16.41.25

 

LLv3 Two Col 01

Screenshot 2020-06-18 at 16.35.42

Screenshot 2020-06-18 at 21.12.33

 

LLv3 Two Col Schedule 01

Screenshot 2020-06-18 at 19.16.51

 

LLv3 Clients 01

Screenshot 2020-06-18 at 16.39.06

 

LLv3 Stats 01

Screenshot 2020-06-18 at 18.18.42

 

LLv2 Portfolio List Container v2

Screenshot 2020-06-18 at 18.20.27

 

LLv3 Video Three Col

Screenshot 2020-06-18 at 18.22.39

 

LLv3 Offer Bar 01

Screenshot 2020-06-18 at 18.13.24

 

LLv3 Offer Bar 02

Screenshot 2020-06-18 at 16.42.43

 

LLv3 Offer Bar 03

Screenshot 2020-06-18 at 18.25.12

 

LLv3 Offer Parallax 01

Screenshot 2020-06-18 at 21.23.34

 

LLv2 Testimonial List

Screenshot 2020-06-18 at 18.26.31

 

LLv3 Modal 01

Screenshot 2020-06-18 at 18.29.52

 

LLv3 Meet the Team

Screenshot 2020-06-18 at 20.59.20

 

LLv3 Cards Team 01

Screenshot 2020-06-18 at 18.34.58

 

LLv3 Cards Grid 02

Screenshot 2020-06-18 at 18.38.29

 

SRCO Tabs Accordion 01

Screenshot 2020-06-18 at 19.03.39

 

LLv3 Tabs Testimonials 01

Screenshot 2020-06-18 at 19.10.37