R E V I S I O N   O N E       0 6 . 2 8 . 2 1           

D E S I G N

 

Grid

1 x 6

Our logo centers within a 1 x 6 bounding box. Using these proportions we created a 6x6 square grid, that we use throughout our compositions to maintain consistent layouts.

Logos and Icons

Use but Don't Abuse 

We love our logo, and we ask that you follow these guidelines to ensure it always looks the best it can. Our logo is the combination of a wordmark with the icon and shouldn't be modified.

LeafLink_Logo_WEB__ICON_GDP.png
LeafLink_Logo_WEB__GDP.png
LeafLink_Logo_WEB__ICON_WHITE.png
LeafLink_Logo_WEB__WHITE.png
 

Spacing

Give Me Some Space

Maintaining proper breathing room around our logo and logotype is of paramount importance. We've used our 1x6 grid to determine that amount of spacing. 

 

Composition

A Balanced Approach

By utilizing the grid we developed, our goal is to improve compositional consistency.

 
 

Logo Usage

Definitely Don’t

Maintaining a consistent and professional brand image is a priority for LeafLink, be sure to avoid doing any of the following:

DO NOT: Squash or stretch the logo

DO NOT: Use an unapproved logo color

DO NOT: Rotate, tilt, or skew the logo

DO NOT: Use outdated company logos

 

Type Scaling

A Scaled Solution

Conforming with our grid, we’ve developed a type system scales with our compositions.

Logo
Optically aligned with first vertical stroke of the LeafLink icon.

Headline
SOFIA BOLD 96PT | LEADING 140%

Headline
SOFIA BOLD 96PT | LEADING 140%

Tertiary Headline
SOFIA BOLD 24PT | LEADING 140%

Body
SOFIA REGULAR 12PT | LEADING 140%

Caption
SOFIA ITALIC 10PT | LEADING 140%

Visual Assets

Shape and Form

We've used our logo to define a number of shape assets to use throughout our compositions

 
 

Shape Usage

Definitely Do

Refer to this handy guide for creative ways to use our shape system in your compositions. 

DO: mix shapes with product cards

DO: use shapes in the background of a design

  • DO: Rotate, expand, and re-size          shapes to fit layout
     

  • DO: Balance shapes on
            one another

Shape Usage

Definitely Don't

Likewise, here are a few things to avoid when using our shape system. 

DO NOT: distort shapes by stretching,                  or skewing while re-sizing

DO NOT: bring in new shape colors

DO NOT: create new shapes, use only
                what’s in shape library

DO NOT: use more than 5-7 shapes
                per single design, unless
                creating a pattern

DO NOT: use gradient treatments
                on shapes

 

Colors of LeafLink

Pick Your Strain

Historically LeafLink has had a wide variety of color at our disposal. We opted to continue using these colors, however we've allowed more flexibility with our color usage. 

Iconography

Symbols and Themes

Our new icon system utilizes our new shape objects, merged with stroke elements to create a balance of delicate and sturdy forms in a conceptual theme. 

Sizing: 40px x 40px is the standard icon size for web

 

Floating UX Elements

UI InSitu

Highlighting the product is an important part of marketing LeafLink. We’ve continued to use cards of UI/UX found in the product. Gradients are now softer and more directional, and we’ve added a neumorphic highlight on the panels to indicate a sense of physicality and real-world lighting presence to our digital product.

Group 14412.png
 

Animation Principles

All About the Curves

In animation, we control the timing through curves. Changing the curves can make an animation feel slow and lethargic to bouncy and energetic. We’ve developed a curve template to use for our animations to maintain a consistent energy presence in our branded animations.

 
 

Typography

Fonts

Maintaining a consistent typographic presence is important for any brand. At LeafLink, we use Sofia Pro in our marketing materials. In situations where Sofia Pro is unavailable, such as google slides, and certain web experiences, we use the font Spartan, which is available on the Google platform. 

Sofia Pro

To be used for headers, sub-headers, body copy, quotes, etc. 

Primary Font

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 

Spartan

To be used when Sofia Pro is not available. Ex: Google Sheets, Slides, Docs, etc. 

Alternative Font

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 

Rules & Examples

Heading One

Bold, Sentence Case

80

line_height.png

120%

line_spacing.png

-3%

GP - 100

Heading Two

Bold, Sentence Case

48

line_height.png

120%

line_spacing.png

-2%

GP - 100

Heading Three

Bold, Sentence Case

36

line_height.png

120%

line_spacing.png

-2%

GP - 100

Heading Four

Bold, Sentence Case

18

line_height.png

120%

line_spacing.png

-2%

GP - 100

SD - 100

BD - 100

MK - 100

Paragraph Large

Regular, Sentence Case

24

line_height.png

140%

line_spacing.png

0%

GP - 100

Paragraph Medium

Regular, Sentence Case

18

line_height.png

140%

line_spacing.png

0%