Flywheel

📋 1 Guidelines

🔗 Connections

Sector

Software

Region

Usa

Guideline Year

2016

Language

English

Tags

Internet

Official Websites

Brand Guidelines

2016

Brand Summary

Mission
  • Flywheel empowers designers, developers, and digital agencies to focus on building beautiful, functional sites for their clients, making it easy to create, develop, host, manage projects, and scale businesses [^1].
Core Values
  • fun
  • friendly
  • welcoming
  • whimsy
  • energy
  • stability
  • momentum
  • creativity
  • personality
  • clarity
  • legibility
  • consistency
  • warmth
Target Audience
  • Designers, developers, and digital agencies seeking a delightful platform for WordPress site creation, hosting, and project management [^2].
Personality Traits
  • fun
  • friendly
  • energetic
  • whimsical
  • welcoming
  • creative
  • playful
  • professional
Visual Identity Overview
  • Flywheel’s visual identity is defined by a simple, legible logo with bold yet soft appearance, a vibrant and inviting color palette, playful and professional typography, whimsical iconography, and photography that captures warmth and energy. The brand emphasizes clarity, consistency, and personality in all visual elements [^3].

Categories

Brand Imagery
  • The photography style of Flywheel mirrors the sense of fun, whimsy, and welcoming that our brand embodies on an everyday basis. We also work with a variety of straight on, isometric, and overhead angles. Use a bright atmosphere to add energy and a subtle contrast between shadows and high­lights. Not too harsh, not too blown out, but a nice balance in between. The photography should capture a vibrant, happy feeling. All the good vibes!
  • Lighting is key in our photog­raphy! Whites should be very white, so we often use natural light or daylight bulbs (5,500 kelvin CFL bulbs) and silver reflectors so colors stay true and don’t get distorted. When editing, always err on the side of warm tones -we keep things warm and cozy around here.
  • When it comes to lifestyle shots, we love to showcase the human side of hosting! Our warmth and whimsy should come across in every photo we take.
  • A fresh coat of paint can take any design to the next level! Try using our bright, bold brand colors as solid backgrounds for tech or product photography.
  • We use lifestyle and product photography to create photos that pack a bunch of personal­ity ( and pretty props) into our visual images.
  • Using angels straight on, above, or isometric are all acceptable.
Color Palette
  • Color palette - page 16
  • Colors, tints, and shades - page 17
  • Acceptable uses - page 19
  • Blue Green Gray Yello w Purple Orange Pink Red
  • All of our colors compliment each other to create a wonderfully whimsical color palette. Just like our main hue, these colors are paired with tints and shades to help create depth when used together.
  • Our blue color is what we try to use in most cases, along with gray for text and supporting element use.
  • When using color, try and keep it to a monochromatic scheme, using your main color choice’s tints and shades for added detail.
  • #04516e #262727 PMS: 312 U PMS: 433 U #338199 #434344 CMYK: C60 M0 Y13 K0 CMYK: C62 M54 Y53 K26 HEX: #50c6db HEX: #5d5e5e #b0e0ea #9f9c9c RGB: R81 G198 B219 RGB: R93 G93 B93 #d6eef2 #c7c4c4
  • SECONDARY COLORS PMS: 360 U CMYK: C67 M0 Y70 K0 HEX: #51bb7b RGB: R82 G188 B123 PMS: 192 U CMYK: C0 M85 Y48 K0 HEX: #ef4e65 RGB: R240 G78 B102 #257048 #409564 #add9b8 #d4ead9 #8c2738 #ba3e51 #f18085 #fad1cd PMS: 7548 U CMYK: C0 M15 Y100 K0 HEX: #f0ce15 RGB: R255 G212 B0 PMS: 239 U CMYK: C6 M92 Y6 K0 HEX: #e0368c RGB: R224 G54 B140 #9a7700 #c3a028 #f6e299 #f9edc9 #851252 #af2a6f #eba0c0 #f3cddd PMS: 158 U CMYK: C0 M65 Y100 K0 HEX: #f47820 RGB: R244 G121 B32 PMS: 266 U CMYK: C56 M81 Y0 K0 HEX: #8350a0 RGB: R131 G80 B160 #8e4402 #bb5f23 #fab889 #fdd9be #4d275f #693f7e #b69cc8 #d5c9e2
  • Color is crucial, but without proper legibility, the logo means nothing. Please make sure that our logo always stands out in a magnificent, monochromatic way!
  • And remember – always use the logo at 100% opacity on white or colored backgrounds!
  • Primary blue Primary gray Black and white Secondary green Secondary yellow Secondary orange Secondary red Secondary pink Secondary purple
Typography
  • The Flywheel brand utilizes a variety of typefaces along with some hand-made fonts to strike a balance between professional and playful design.
  • Our first primary font is Museo Sans Rounded, a bolder, sans serif typeface that is used for headings and subheads. Similar in look and feel to our Flywheel wordmark, this typeface is also highly legible, fairly geometric, and features friendly rounded corners. In balanced contrast, the second typeface is Archer, a thinner, serif typeface that’s sweet and charming with an added bit of whimsy.
  • We adore the way these two fonts play off each other and represent our standout brand. No Helvetica or Arial here, please!
  • In an effort to break up walls of text with some visual contrast, we’ve added in a few fancy fonts that are playful and full of personality. Use these sparingly (alongside our primary fonts) to spruce up a piece.
  • We want you to have the creative freedom to add playfulness and whimsy to your designs! That said, these are primarily meant to be used for headers. (Never, EVER, for body copy.)
  • One of the easiest ways to establish hierarchy with type is simply through size. Readers will often see the biggest type first and start reading from there.
  • To create a distinct type hierarchy, we vary the sizes and fonts on a page to establish and define clear relationships between pieces of text. When defining these relationships, just make sure there’s enough visual difference between font styles!
  • Our default hierarchy is shown here, but there are exceptions when using the secondary colors for promos and designs outside of the app and marketing site.
  • H ea d l •1 n es l Museo ———–, 30 pt size, +20 tracking, 34 pt leading Sans Rounded 500, sentence case (no punctuation needed) 100% Blue -#50c6db
  • SUBHEADS AND BUTTON COPY—{ Museo Sans Rounded 700, all caps (no punctuation needed) 12 pt size, +40 tracking, 14 pt leading 100% Dark Gray - #262727
  • SECONDARY SUBHEADS ———<l Museo Sans Rounded 100, all caps (no punctuation needed) 12 pt size, +40 tracking, 14 pt leading 100% Gray - #5d5e5e
  • Museo Sans Rounded 300, sentence case Body copy. PAGE 25 10 pt size, +10 tracking, 14 pt leading 100% Gray -#5d5e5e
  • These additional accent styles offer up a bit of font flexibility, but still support our main type treatments. The fancy fonts are mainly meant to be used to add visual contrast to promotional headlines.
  • Pull quotes and lead-in copy. —{ Archer Semibold Italic, sentence case 20 pt size, 0 tracking, 24 pt leading 100% Dark Gray -#262727
  • PAGE VIGNETTES AND TERTIARY HEADLINES —{ Museo Sans Rounded 900, all caps 8 pt size, +40 tracking, 14 pt leading 100% Dark Gray -#262727
  • Side bar notes. ———————–< Archer Semibold Italic, sentence case 8 pt size, +10 tracking, 10 pt leading 100% Blue -#50c6db
  • Mouse copy. ————————-< Archer Book Italic, sentence case 8 pt size, +10 tracking, 10 pt leading 100% Dark Gray -#262727
  • Heartwell Regular, title case (no punctuation needed) > 30 pt size, 0 tracking, > 34 pt leading 100% Blue -#50c6db
  • Smoothy Cursive, title case (no punctuation needed) > 30 pt size, 0 tracking, > 34 pt leading 100% Blue -#50c6db
Logo Usage
  • This is the primary version of our logo. It should be used in all cases possible, unless shape, background color, or length create an issue.
  • Our logo fully embodies our brand and should be super legible and free of any obstructions at all times. For this reason, we ask that designers give our logo a little bit of breathing room and keep a keen eye on these vertical and horizontal clear zones.
  • Clear zones are incredibly important. Use this as a handy guide to figure out how close graphics can get to our logo. When in doubt, just “F” it.
  • The maximum size of our logo is infinite, while the minimum size stops at 1 inch wide for print (150 px for web).
  • We offer an even smaller, more simplified version of our logo that can be used as a bug for even smaller productions. It has six prongs, a heavier weight, and is tracked out more than the primary version.
  • min size = ½ in or 80 px
  • Flywheel is full of possibilities, so we’re offering up a few different versions of the logo to use when the primary one isn’t ideal. While the primary logo should almost always be your first choice, we get that there are scenarios that could compromise the legibility of our logo or that just aren’t compatible with it. So, here’s another option!
  • Our secondary logo also requires some breathing room to help with readability and placement next to other objects within a design.
  • Even with our secondary logo, clear zones are incredibly important. To keep things simple, we kept the same rule: just “F” it.
  • The maximum size of our secondary logo is infinite, while the minimum size stops at 2/3 inch wide for print (100 px for web).
  • We offer an even smaller, more simplified version of our secondary logo that can be used as a bug for even smaller productions. It has six prongs, a heavier weight, and is tracked out more than the primary version.
  • min size = ⅓ in or 50 px
  • The wheel can be used independently as a snazzy little graphic element or on a branded piece where one of the other logos (primary or secondary) are already present.
  • Our logomark needs some room to spin and (sometimes) animate! This clear zone insulates our logomark from other visual elements such as illustrations, copy, or photography.
  • Last but not least, our logomark has clear zones, too. And, yep, you guessed it – to find them, just “F” it.
  • Clear zone at 150%
  • Logo at 100%
  • The maximum size of our logomark is infinite, while the minimum size stops at 1/4 inch wide for print (40 px for web).
  • We offer an even smaller, more simplified version of our logomark that can be used as a bug for even smaller productions. It has six prongs and a heavier weight than the primary version.
  • min size = ⅙ in or 20 px
  • Our logo is super duper important to us, and we spent a lot of time and effort carefully crafting it to be the perfect representation of our beautiful brand. To maintain consistency throughout our efforts and products, it is essential that our logo isn’t altered in a bunch of weird ways.
  • Here are a few examples of what not to do!
  • A lot of these are no-brainers, but just to make sure they never ever happen, we blew out way more examples than you probably need!
  • These are also true for the secondary logo, as well as the logomark itself.
  • Rotate or tilt
  • Drop shadow
  • Move logo elements
  • Use color not in our brand (referance Sec. 02)
  • Distort or stretch
  • “Nick name” or abbreviate
  • Outline
  • Place on conflicting color
  • Remove elements from logo
  • When using our logo, if you have to ask yourself “does this break the brand guide,” it’s probably a good idea not to do it!
  • Mask image inside logo
  • Warp or add filter
  • Use two colors within logo
  • 3D or perspective
  • Skew
  • Use glows
  • Change typeface
  • Add elements to logo
  • Use logo as a sketch
  • Lower opacity
  • Place logo on top of complex background
  • Fill in logo
  • Reflect or mirror
  • Add gradients
  • Add elements within the clearzones
Tone And Messaging
  • Say hello to Flywheel’s logo! It’s simple, legible, and inherently readable while embodying our fun and friendly values and standards. With a bold, yet soft appearance, it invites our users to share our culture and spend time with us.
  • The Flywheel brand utilizes a variety of typefaces along with some hand-made fonts to strike a balance between professional and playful design.
  • Our first primary font is Museo Sans Rounded, a bolder, sans serif typeface that is used for headings and subheads. Similar in look and feel to our Flywheel wordmark, this typeface is also highly legible, fairly geometric, and features friendly rounded corners. In balanced contrast, the second typeface is Archer, a thinner, serif typeface that’s sweet and charming with an added bit of whimsy.
  • We adore the way these two fonts play off each other and represent our standout brand. No Helvetica or Arial here, please!
  • In an effort to break up walls of text with some visual contrast, we’ve added in a few fancy fonts that are playful and full of personality. Use these sparingly (alongside our primary fonts) to spruce up a piece.
  • We want you to have the creative freedom to add playfulness and whimsy to your designs! That said, these are primarily meant to be used for headers. (Never, EVER, for body copy.)
  • The photography style of Flywheel mirrors the sense of fun, whimsy, and welcoming that our brand embodies on an everyday basis.
  • Use a bright atmosphere to add energy and a subtle contrast between shadows and high­lights. Not too harsh, not too blown out, but a nice balance in between. The photography should capture a vibrant, happy feeling. All the good vibes!
  • When editing, always err on the side of warm tones -we keep things warm and cozy around here.
  • When it comes to lifestyle shots, we love to showcase the human side of hosting! Our warmth and whimsy should come across in every photo we take.
Brand Values
  • Say hello to Flywheel’s logo! It’s simple, legible, and inherently readable while embodying our fun and friendly values and standards. With a bold, yet soft appearance, it invites our users to share our culture and spend time with us.
  • Our mark (which you can find on co-founder Tony’s left forearm) is a uniquely energetic symbol - a flywheel in motion! A flywheel is an important part of a machine that exists to provide stability and increase the machine’s momentum, which is exactly what we seek to do for our users and their WordPress sites.
  • Colors define mood and give a sense of character to a brand. We chose colors that are inviting and fun to better fit our values.
  • The photography style of Flywheel mirrors the sense of fun, whimsy, and welcoming that our brand embodies on an everyday basis.
  • When it comes to lifestyle shots, we love to showcase the human side of hosting! Our warmth and whimsy should come across in every photo we take.
Visual Style
  • Say hello to Flywheel’s logo! It’s simple, legible, and inherently readable while embodying our fun and friendly values and standards. With a bold, yet soft appearance, it invites our users to share our culture and spend time with us.
  • This is the primary version of our logo. It should be used in all cases possible, unless shape, background color, or length create an issue.
  • Our logo fully embodies our brand and should be super legible and free of any obstructions at all times. For this reason, we ask that designers give our logo a little bit of breathing room and keep a keen eye on these vertical and horizontal clear zones.
  • Clear zones are incredibly important. Use this as a handy guide to figure out how close graphics can get to our logo. When in doubt, just “F” it.
  • The maximum size of our logo is infinite, while the minimum size stops at 1 inch wide for print (150 px for web).
  • We offer an even smaller, more simplified version of our logo that can be used as a bug for even smaller productions. It has six prongs, a heavier weight, and is tracked out more than the primary version.
  • min size = ½ in or 80 px
Iconography
  • We utilize a series of airy and fun icons to add character and playfulness to our work. The icons are used on posters, web pages, and anything promotional. They can be used in our primary blue color or one of the secondary colors, if used in a monochromatic color scheme and at 65px in size. To add depth to larger icons, we have tints and tones that can be added as fills to create more impact.
  • Icons are shown in two sizes across our site: 65px with 2pt line width, and 130px with 4pt line width.
  • Larger icons are reserved for use in headers or as callouts.
  • Each lined graphic has a 5px radius and rounded corners.
  • When used at 130px or larger, our icons are to be filled in with tints and shades from our color palette. They can be used on white backgrounds or a corresponding colored back­ground in order to complete a monocromatic color scheme.
Layout And Composition
  • This is the primary version of our logo. It should be used in all cases possible, unless shape, background color, or length create an issue.
  • Our logo fully embodies our brand and should be super legible and free of any obstructions at all times. For this reason, we ask that designers give our logo a little bit of breathing room and keep a keen eye on these vertical and horizontal clear zones.
  • Clear zones are incredibly important. Use this as a handy guide to figure out how close graphics can get to our logo. When in doubt, just “F” it.
  • The maximum size of our logo is infinite, while the minimum size stops at 1 inch wide for print (150 px for web).
  • We offer an even smaller, more simplified version of our logo that can be used as a bug for even smaller productions. It has six prongs, a heavier weight, and is tracked out more than the primary version.
  • min size = ½ in or 80 px
🐛 Report