We have outlined the following Values, Principles and Practices to align our team and aid in times of uncertainty on what it means to produce Buildout Quality experiences. We use these Values, Principles and Practices to improve our work, our team and the Mission itself—all in the name of integrity and building the company that runs commercial real estate.
Our values are qualities that are important to us and help to form our principles.
Our principles are the rules or fundamental truths we live by and help govern our behavior.
Our practices are behaviors that can be applied. We evaluate design quality by asking, ‘Is this solution crafted?’
It is important for us to make sure that our product isn’t just beautiful on the outside, but that it’s built with integrity on the inside.
We’ve created a unified visual system laying out the core components of Buildout’s brand. These guidelines are meant to be a baseline to maintain brand integrity with room for flexibility and creativity.
The Buildout logo is the most important identifying component of our brand. It provides a consistent foundation that promotes and maintains our brand equity, leadership, and confidence.
As we've expanded our portfolio of solutions, we've evolved our brand architecture to a Branded House. In addition to the logo for the master brand, we also have logos for each one of our sub-brands: Buildout Insights, Buildout CRM, and Buildout Marketing.
For the master brand, use the Horizontal logo when possible. If using our Icon only logo, our Sans icon or Horizontal logo must appear elsewhere on the piece—exceptions include when an avatar is required or swag items.
In circumstances where the use of a product logo is preferred (i.e. product-specific sell sheets, presentations, in the application, etc), use the full product logo. Sans Icon versions of the product logos are not permitted.
The preferred colors of the Buildout logo are Buildout Blue or white, however situations where the logo needs to be presented in black is acceptable.
In circumstances where the use of a product logo is preferred, use the full color logo.
Buildout’s primary typeface is Proxima Nova. However, Lato should be used in the body of emails, where Proxima Nova is not yet accepted.
p
Our color palette is made up of three main colors, four accent colors, and three neutrals. Our main colors help communicate the knowledge, authority, and integrity of our company, while our bright accent colors help promote our diverse and vibrant company culture. When used appropriately, our palette will promote brand consistency and be inclusive and accessible.
Our main colors are used most often. We primarily use white for our backgrounds and use our other main colors for tags, buttons, links, and accents. When selecting colors for accent elements, we should consider using one of our main colors before looking to our tints or accent colors.
Tints and accent colors are available for added flexibility when it comes to background colors and design accents. For instance, while the primary background in our designs should be white, Light Electric 2.0 may be used to break up white space or call out important information. We use Light Electric 2.0 for color-blocking most often.
The use of the dark variations should be limited, but may be used for text to ensure a high enough contrast ratio on light backgrounds, for swag items, or when all other variations are not a good fit.
Our customers are one of our core values. As such, we strive to meet standard WCAG 2.0 guidelines for contrast accessibility to ensure everyone can properly, see, read, and interact with our materials. All color combinations for text, buttons, tags, and other indicators require at least a 4.5 contrast ratio (AA accessibility rating). The contrast ratio between two colors can be measured here.
Historically, overlaying text on hero images has been a key component of our visual brand. However, since we can’t always ensure a 4.5 contrast ratio between the background image and text, we intend to ease off the use of this design treatment. While we transition to a more accessible design, we will make sure crucial information isn’t placed in the hero image.
Photography is a key contributor to our visual identity, therefore selection must be calculated and informed. The tone of our images should be simple, clear, and honest; warm and bright; relatable and realistic. And the subject matter should generally try to showcase one of the following—our product, users, team, or benefits. Photos may be used outside of these subject matters, but should be purposeful and evoke thought related to the piece’s message.
When talking about our team, show photos of us when possible. If we have to use stock imagery, show people who are dressed casually, in a casual environment similar to ours.
When talking about our application/benefits, make sure the environment is casual and feels warm and bright. Show people using the application and working together.
When talking about our users, maintain their level of professionalism. Show their faces and typical work environment to make our users feel connected to the photos.
When talking about our team, show photos of us when possible. If we have to use stock imagery, show people who are dressed casually, in a casual environment similar to ours.
When talking about our users, maintain their level of professionalism. Show their faces and typical work environment to make our users feel connected to the photos.
When talking about our application/benefits, make sure the environment is casual and feels warm and bright. Show people using the application and working together.
In some instances, you may enhance the photo with a gradient. We have one standard gradient and may only deviate from this standard on the Buildout home page.
In order to achieve brand consistency, we've outlined specific values that should always be used when creating certain assets.
Email represents one of our largest marketing efforts. Due to the vast differences in intention and target audience, our messaging might vary but it is crucial for our visual brand to remain consistent. As such, we have a variety of email templates to start from when creating an email campaign and set specific standards in regards to sizing and spacing elements.
All of our landing pages are built in Webflow or Hubspot. Layouts of our landing pages will vary depending on content, but we encourage repeating patterns and structures found on our already existing pages.
As long as we don’t stray from our core universal elements, we have flexibility when it comes to the design of our printed materials. All printed documents must contain a footer. The footer provides important way-finding information for our readers by helping them orient themselves within the document. It also acts as a safeguard by displaying our copyrighted text and logo.
As long as we don’t stray from our core universal elements, we have flexibility when it comes to the design of our digital ads. Ad size will be predetermined by vendor and all digital ads should be retina-friendly unless otherwise specified. Ads should also include our Horizontal or Sans Icon logos and be tested at their actual size for legibility. Our social media font size and margins are recommended when ad size permits.
Screenshots are an effective way to communicate changes within our app, provide instruction and market our software.
In-app screenshots should be taken using the ‘Window Resizer’ Chrome Extension and always be captured in a ‘guest’ browser window in light mode. Screenshots should be taken using the Small Desktop preset (1280x1024), unless screenshot will be placed in a mockup. Take screenshots using the key commands: ‘cmd + shift + 4 + space’.
Due to HTML complexity, we deliver a JPG image of our emails when requested. JPGs should even 50px of grey space to the right and left of the body; height is variable but be sure to include 45px of grey space before and after the email. The image should not include the Buildout footer information.
All screen recordings and videos should be recorded at a 16:9 ratio unless otherwise specified.
We have three different tiers of co-branding. For partnerships, we use the partner’s logo in a lockup with ours. For account-based marketing, we can showcase the company’s materials in screenshots and images, but we will not include their logo in a lockup. Occasionally, we will do a full co-brand where we will use their logo, their materials, and their brand colors/elements.
Social media
To effectively engage Buildout’s audience, there are certain best practices to keep in mind when promoting content on social media, such as including an image. In the event, we need to create a post image in lieu of using an article card, please start from our social media templates and always refer to Sprout Social’s size guide before creating cover images.
Layout and spacing
[B] sizing: 182px
[C] spacing: Should be equal to each other
[D] width: ≥ 590px
[E] spacing: ≥ 80px
Typography
Font-weight: 300
Line-height: 64.8px