top of page
1
Design
R E V I S I O N O N E 0 6 . 2 8 . 2 1
D E S I G N
Grid
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.
Logo
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.
Spacing
Composition
A Balanced Approach
By utilizing the grid we developed, our goal is to improve compositional consistency.
Composition
Logo Usage
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
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
Visual Assets
Shape Usage
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
Color
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
Iconography
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.
Floating UX Elements
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.
Animation Principles
Typgraphy
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
120%
-3%
GP - 100
Heading Two
Bold, Sentence Case
48
120%
-2%
GP - 100
Heading Three
Bold, Sentence Case
36
120%
-2%
GP - 100
Heading Four
Bold, Sentence Case
18
120%
-2%
GP - 100
SD - 100
BD - 100
MK - 100
Paragraph Large
Regular, Sentence Case
24
140%
0%
GP - 100
Paragraph Medium
Regular, Sentence Case
18
140%
0%
GP - 100
Paragraph Small
Regular, Sentence Case
14
140%
0%
GP - 100
Footer
Mixed: Bold, Regular
14
120%
0%
GP - 100
SD - 100
BD - 100
MK - 100
Layout Examples
bottom of page