Beaver Builder

📋 1 Guidelines

🔗 Connections

Sector

Software

Region

Usa

Guideline Year

2020

Language

English

Tags

Software

Official Websites

Brand Guidelines

2020

Brand Summary

Mission
  • To create a fresh, fun atmosphere that inspires creativity and discovery, evoking thoughts of maps, road trips, camping, and wilderness.
Core Values
  • creativity
  • playful exploration
  • discovery
  • unexpected intersections
Target Audience
  • Individuals or teams seeking a creative, approachable, and playful web-building experience.
Personality Traits
  • fun
  • creative
  • playful
  • friendly
Visual Identity Overview
  • Minimalist, abstract designs with overlapping colorful shapes, dashed lines suggesting movement, cartoon beaver mascot, light backgrounds, and a warm, airy color palette.

Categories

Brand Voice
  • The Beaver Builder 2020 brand art aims to create a fresh, fun atmosphere that inspires a sense of creativity and discovery. The art is meant to subtly evoke thoughts of maps, wandering road trips, camping and wilderness.
  • The creative process is one of playful exploration and unexpected intersections between ideas and the art hints at that throughout.
Brand Imagery
  • The Beaver Builder 2020 brand art aims to create a fresh, fun atmosphere that inspires a sense of creativity and discovery. The art is meant to subtly evoke thoughts of maps, wandering road trips, camping and wilderness.
  • The creative process is one of playful exploration and unexpected intersections between ideas and the art hints at that throughout.
Color Palette
  • The colors used in the brand art make it feel fun, light and airy. Because shapes overlap using the multiply blend mode, different values are provided for opaque vs blended.
  • In addition to neutrals, there’s a wide palette of hues. When representing the brand generically or specifically the flagship Page Builder product, all the hues can be used in concert. When representing specific products ( Beaver Themer, Assistant and Beaver Builder Theme) a subset of colors is used to give each product a distinct feeling.

  • BEAVER RED BROWN #3EOOOO

  • BEAVER TEXT RED #7E2F17

  • ASSISTANT CHARCOAL #505153
  • BASE TAN #FFF4DC
  • OPAQUE #84D5D6 #1B7A97 #EE521F #FBA613 #64DC87 #7461C7 #0909CF #ECDFC3 • • • • • • MULTIPLY #840FF8 #1B7FAF #EE5624 #FBAE16 #63E69C #7465E7 #D9E3F0 #ECE9E2
  • Below are some examples of different color sets being used in specific product contexts.
  • The color blobs represent different aspects of the creative process. When they overlap, they use the multiply blend mode (see color page). Typically the blobs frame the main content of a graphic and hug the edge, but this isn’t a hard rule. Avoid using color blobs over a photograph or other colors than the base tan.
Typography
  • Brand art typically uses two different typefaces. Both are available from Adobe Fonts and can be enabled through Creative Cloud. In most cases headings should appear in the Beaver Red Brown color rather than black.
  • BEAVER RED BROWN
  • #3E0000
  • Museo is the font that the original beaver builder text as well as the Assistant text is set in. It should generally be used to draw focus.
  • Atrament is a dense display font good for taglines and bold statements.
  • Body typography should feel large and open. Stick to standard sans-serifs like San Francisco, Roboto, Open Sans or Helvetica. For websites, support the OS’s system font for body text.
  • Text should feel spacious and have a gentle rhythm. Avoid kerning text more tightly than it naturally would be. Use Atrament when you need to densely pack text into a space.
  • Using Italics can help draw out pull quotes
Tone And Messaging
  • The Beaver Builder 2020 brand art aims to create a fresh, fun atmosphere that inspires a sense of creativity and discovery. The art is meant to subtly evoke thoughts of maps, wandering road trips, camping and wilderness.
  • The creative process is one of playful exploration and unexpected intersections between ideas and the art hints at that throughout.
Brand Values
  • The Beaver Builder 2020 brand art aims to create a fresh, fun atmosphere that inspires a sense of creativity and discovery. The art is meant to subtly evoke thoughts of maps, wandering road trips, camping and wilderness.
  • The creative process is one of playful exploration and unexpected intersections between ideas and the art hints at that throughout.
Visual Style
  • When choosing backgrounds for brand art, stick to lighter, simpler backgrounds. Avoid deep colors and complicated photographs. Overlaying the brand over photographs is fine as long as there’s a high degree of contrast and separation. Using background shapes over more busy photos can help as well.
  • The colors used in the brand art make it feel fun, light and airy. Because shapes overlap using the multiply blend mode, different values are provided for opaque vs blended.
  • In addition to neutrals, there’s a wide palette of hues. When representing the brand generically or specifically the flagship Page Builder product, all the hues can be used in concert. When representing specific products ( Beaver Themer, Assistant and Beaver Builder Theme) a subset of colors is used to give each product a distinct feeling.
  • BEAVER RED BROWN #3EOOOO
  • BEAVER TEXT RED #7E2F17
  • ASSISTANT CHARCOAL #505153
  • BASE TAN #FFF4DC
  • OPAQUE #84D5D6 #1B7A97 #EE521F #FBA613 #64DC87 #7461C7 #0909CF #ECDFC3 • • • • • • MULTIPLY #840FF8 #1B7FAF #EE5624 #FBAE16 #63E69C #7465E7 #D9E3F0 #ECE9E2
  • Below are some examples of different color sets being used in specific product contexts.
  • Brand art typically uses two different typefaces. Both are available from Adobe Fonts and can be enabled through Creative Cloud. In most cases headings should appear in the Beaver Red Brown color rather than black.
  • BEAVER RED BROWN
  • #3E0000
  • Museo is the font that the original beaver builder text as well as the Assistant text is set in. It should generally be used to draw focus.
  • Atrament is a dense display font good for taglines and bold statements.
  • Body typography should feel large and open. Stick to standard sans-serifs like San Francisco, Roboto, Open Sans or Helvetica. For websites, support the OS’s system font for body text.
  • Text should feel spacious and have a gentle rhythm. Avoid kerning text more tightly than it naturally would be. Use Atrament when you need to densely pack text into a space.
  • Using Italics can help draw out pull quotes
  • The color blobs represent different aspects of the creative process. When they overlap, they use the multiply blend mode (see color page). Typically the blobs frame the main content of a graphic and hug the edge, but this isn’t a hard rule. Avoid using color blobs over a photograph or other colors than the base tan.
  • If you need to generate new blob shapes, there’s a great web app for it: https://www.blobmaker.app. Keep the complexity of the shapes low and the curves simple. It will allow you to download SVG files of the shapes.
  • The dashed wandering lines give a sense of movement and can draw focus to elements in the design. They’re meant to evoke the feeling of hiking trails or treasure maps. The lines should be simples-curves, never overlapping itself, with some momentum to it. The irregular dashed stroke can be represented by Adobe Illustrator or Affinity Designer.
  • Gaps 20 20 –·-·-·-·-·-·-·-· .-•-.• 1 1_ I0•. ’ Dashes 50 1 Dash Ratio: 50 20 1 20
  • The easiest way to represent these lines is to use Affinity Designer. It can add the arrow cap natively.
  • Adobe Illustrator can do the irregular dashed line but the arrow line caps will have to be added manually as vector shapes.
Layout And Composition
  • The color blobs represent different aspects of the creative process. When they overlap, they use the multiply blend mode (see color page). Typically the blobs frame the main content of a graphic and hug the edge, but this isn’t a hard rule. Avoid using color blobs over a photograph or other colors than the base tan.
  • If you need to generate new blob shapes, there’s a great web app for it: https://www.blobmaker.app. Keep the complexity of the shapes low and the curves simple. It will allow you to download SVG files of the shapes.
  • The dashed wandering lines give a sense of movement and can draw focus to elements in the design. They’re meant to evoke the feeling of hiking trails or treasure maps. The lines should be simples-curves, never overlapping itself, with some momentum to it. The irregular dashed stroke can be represented by Adobe Illustrator or Affinity Designer.
  • Gaps 20 20 –·-·-·-·-·-·-·-· .-•-.• 1 1_ I0•. ’ Dashes 50 1 Dash Ratio: 50 20 1 20
  • The easiest way to represent these lines is to use Affinity Designer. It can add the arrow cap natively.
  • Adobe Illustrator can do the irregular dashed line but the arrow line caps will have to be added manually as vector shapes.
🐛 Report