Skip to content

Latest commit

 

History

History
79 lines (44 loc) · 4.02 KB

Logo.md

File metadata and controls

79 lines (44 loc) · 4.02 KB
layout title nav permalink
logo
Logo
Logo
/logo/

The logotype

Download the logotype{: .usa-button .bg-bixal-purple}

There are two signature marks that define Bixal —the primary logotype and the complementary B.
The primary logotype is cleancut and powerful.

![]({{ site.url }}/{{site.baseurl}}/assets/img/bixal-logo-intro.png){: .margin-y-2}

Guideline

Using the logo

In order to maintain the visual integrity of our logo, always be sure to include space around it. A minimum equivalent to the height of the logo should also be observed around the logo, and ensure that the logo is always scaled proportionally. To make sure our mark remains legible at smaller sizes, the full mark should only be scaled down to .625” wide for print applications, with the preferred minimum web size at 40 pixels wide.

![]({{ site.url }}/{{site.baseurl}}/assets/img/using-the-logo.png){: .margin-y-2}

Maintaining the integrity of our mark

To ensure brand consistency, it is important that the logo be used appropriately. Below are examples of correct usage of the logo, as well as examples of treatments to avoid with the logo.

![]({{ site.url }}/{{site.baseurl}}/assets/img/correct-logo-usage.png){: .margin-y-2}

  • The logo will most often be black or white, but may be set in one of the brand colors if the design allows. Be sure the color is always legible, whether applied to a color or image background.

What not to do with the logo

![]({{ site.url }}/{{site.baseurl}}/assets/img/incorrect-logo-usage.png){: .margin-y-2}

The B

B is for Bixal. This core complementary brand element is a highly flexible mark designed to serve all types of design applications. The placement, size and color of the B can be modified to suit the design.

When considering whether to implement the B as a shape or as an image mask, assess the content itself:

  • The image mask treatment may be more suitable if the content is more formal—this style allows for more seamless text overlay.
  • The shape treatment may be more suitable for applications where the image selection plays a critical role in reinforcing the content or telling a story.

Guideline

Using the B

The B may be used either as a shape or as a photo mask. This flexibility reinforces its strength as a core brand element and adds visual interest to image selection.

![]({{ site.url }}/{{site.baseurl}}/assets/img/the-b-size.png){: .margin-y-2}

Insert bleed guide somewhere here{: .usa-button .bg-bixal-purple}

Color B and background image

To use the B as a shape, use the color pairing guidelines to choose a color that contrasts with the logotype and headline color.

  • The B, text box, and focal point of the image should not overlap. Create movement in the design by drawing the eye around the page between these three core elements.
  • The photo should bleed to the edge of the design area. The B should take up no more than half of the design area when implemented as a solid shape. If overlapping text is applied, be mindful of color selection and font size to ensure legibility.

![]({{ site.url }}/{{site.baseurl}}/assets/img/the-b-background-image.png){: .margin-y-2}

Image masked in B and color background

To use the B as a photo mask, crop the image such that the focal elements of the image are clearly revealed by the B mark.

  • Use the color pairing guidelines and accessibility best practices to ensure legibility of any text overlay and optimal color choice to complement the image. Do not size the B mask to be too small or to take up more than 75% of the design area. The B should help to highlight the image, rather than obscure it.

![]({{ site.url }}/{{site.baseurl}}/assets/img/image-masked-in-b.png){: .margin-y-2}

What not to do with the B

![]({{ site.url }}/{{site.baseurl}}/assets/img/incorrect-b-usage.png){: .margin-y-2}