Skip to content

Latest commit

 

History

History
229 lines (171 loc) · 15.6 KB

visual_identity.md

File metadata and controls

229 lines (171 loc) · 15.6 KB
Raw
layout title description
article
Visual identity
Visual identity for Apache Arrow

Visual Identity for Apache Arrow

As a community project, the visual identity guidelines for Apache Arrow attempt to balance the need to maintain consistent visual imagery in formal contexts, while allowing flexibility for fun and creative reuse of the Apache Arrow logo in informal contexts. On this page you can find the following resources:

Design of the logo {#design}

The Apache Arrow logo consists of the "Apache Arrow" logotype and the "Triple Chevron" logomark, arranged horizontally with the text placed to the left of the image. The standard "light theme" version of the logo uses black text and image against a white background, and the standard "dark theme" version of the logo is white against a black background. The light version looks like this:

The word "Apache" in the logotype is written in all caps Roboto font, and the word "Arrow" is written in all caps Barlow font in boldface. Both should use normal font kerning. The precise font size may depend slightly on the display context but the intent is that the word "Arrow" be approximately 3 times the height, and approximately 2.5 times the width of the word "Apache". The text should be left-justified, with the leftmost edge of the first letters in both words aligned horizontally.

The annotated image below shows the precise spacing used in the horizontal version of the Apache Arrow logo as well as the design of the Triple Chevron. Each chevron has width exactly half its height, and forms a 90-degree angle at the tip. The thickness (both vertically and horizontally) of the chevron is 20% of its height. The spacing between adjacent chevrons is 15% of the height (i.e., if height = 100, width = 50, and spacing = 15).

The horizontal midline of the word "Arrow" is aligned with horizontal midline of the chevrons, and the height of the word "Arrow" is approximately 1/3 the total height of the chevrons. Similarly the midline of the word "Apache" is aligned with the upper-inner vertex of the chevrons. The logotype and logomark are placed flush against one another, with the rightmost tip of the "W" in "Arrow" vertically aligned with the leftmost edge of the chevrons.

The horizontal layout above is the preferred variant of the Apache Arrow logo, but there will be cases where the full logo doesn't fit. There will be situations where using the "Apache Arrow" logotype alone or the "Triple Chevron" logomark alone is the most appropriate thing to do: the expectation is that people use their best judgment.

In addition to the partial (logomark-only and logotype-only) layouts, there may be cases where a vertical layout work best. The vertically oriented logo attempts to preserve the same look and feel as the horizontal version, and preserves some points of horizontal alignment between components of the logotype and logomarks:

A good example of when the vertical layout is more appropriate is in the context of hex stickers. The standard version of the hex sticker arranges the vertical within a hexagonal frame so that it has some alignment with the native symmetries of the hexagon shape:

Variations of the logo {#variations}

At the bottom of this page you can find the complete list of all logo-related files provided by the Apache Arrow project. The logo exists in a light theme and a dark theme, and these versions are usually simple inversions of one another. The light theme uses black text against a white (or other light colored) background:

Similarly, the dark theme uses white text against a black (or other dark colored) background:

The image files in this repository include both variants, and include versions with transparent backgrounds as well as opaque backgrounds. It is entirely acceptable to use the transparent background variants against backgrounds that aren't precisely white or black, as exemplified by the main page on this site.

Horizontal and vertical versions of all variants are included:

Similarly, two official variations of the hex sticker are provided:

The repository also includes files for "Triple Chevron" logomark on its own

and the "Apache Arrow" logotype on its own:

Using the Apache Arrow logos {#using-the-logo}

General guidelines

Usage guidelines for official logos are quite similar across many brands, and Apache Arrow is no exception. The core principle is to respect the visual integrity of the logo. Guidelines that will help you do so include:

  • Please don't visually distort the logos
  • Please reproduce at a clearly visible resolution
  • Please don't modify the text or the design of the chevrons
  • Please don't add additional text to the logotype or imagery to the chevrons

In general, the principles laid out in the Apache Foundation Style Guide for usage of the Apache logo are also appropriate for the Apache Arrow logo. If you're in a situation where you want to refer formally to the Apache Arrow project you should adhere to these guidelines pretty closely and avoid modifying the official logos.

Regarding unofficial images

That said, there are occasions where you may want to use the logo unofficially. The purpose of the visual identity guidelines as described so far is to provide guidance on what to do when you do need to refer to Apache Arrow in an official or formal way. It's not meant to prevent people from having fun creating unofficial images when appropriate.

To provide useful guidance on when unofficial images are acceptable and unacceptable, here are two examples:

The image on the left highlights the letter R and one of the chevrons in a fashion that is reminiscent of the R prompt, using colors that align with those used by the [R-Ladies][38] organization. Using this image informally as part of a presentation to an R-Ladies meetup would be consistent with the Apache Arrow guidelines, because it is thematically appropriate to the context and the image is not being presented as if it were the official Apache Arrow logo. The purple elements have been introduced to the image in a manner that leaves the visual integrity of the Apache Arrow logo intact, and in a fashion that reflects the informal context-specific use within an R-Ladies meetup.

The image on the right adds extra orange colored chevrons to the dark themed hex sticker. Again, this is clearly not part of the official Apache Arrow visual identity and should not be presented as such. For this to be appropriate, even informally, the context would need to be one in which the orange elements are meaningfully connected to the surrounding imagery (e.g., perhaps the orange chevrons continue horizontally in either direction) so that the core of the Apache Arrow logo itself remains visually coherent.

Many other context-appropriate informal variations can be imagined. For example, if Apache Arrow were being used to power a generative art system, the background fill to the logo might not be a solid color, it could be the art itself. Again, the overriding principle is that the visual integrity of the Apache Arrow logo remains intact and the modifications are appropriate to the context in which it is used.

List of provided logo files {#files}

Horizontal logos

  • [Horizontal Arrow logo, PNG format, white text, and black background][4]
  • [Horizontal Arrow logo, SVG format, white text, and black background][5]
  • [Horizontal Arrow logo, PNG format, white text, and transparent background][6]
  • [Horizontal Arrow logo, SVG format, white text, and transparent background][7]
  • [Horizontal Arrow logo, PNG format, black text, and white background][8]
  • [Horizontal Arrow logo, SVG format, black text, and white background][9]
  • [Horizontal Arrow logo, PNG format, black text, and transparent background][10]
  • [Horizontal Arrow logo, SVG format, black text, and transparent background][11]

Vertical logos

  • [Vertical Arrow logo, PNG format, white text, and black background][12]
  • [Vertical Arrow logo, SVG format, white text, and black background][13]
  • [Vertical Arrow logo, PNG format, white text, and transparent background][14]
  • [Vertical Arrow logo, SVG format, white text, and transparent background][15]
  • [Vertical Arrow logo, PNG format, black text, and white background][16]
  • [Vertical Arrow logo, SVG format, black text, and white background][17]
  • [Vertical Arrow logo, PNG format, black text, and transparent background][18]
  • [Vertical Arrow logo, SVG format, black text, and transparent background][19]

Hexagonal logos

  • [Hexagonal Arrow logo, PNG format, white text, and black background][20]
  • [Hexagonal Arrow logo, PNG format, black text, and white background][21]

Chevron-only logos

  • [Chevron-only Arrow logo, PNG format, white text, and black background][22]
  • [Chevron-only Arrow logo, SVG format, white text, and black background][23]
  • [Chevron-only Arrow logo, PNG format, white text, and transparent background][24]
  • [Chevron-only Arrow logo, SVG format, white text, and transparent background][25]
  • [Chevron-only Arrow logo, PNG format, black text, and white background][26]
  • [Chevron-only Arrow logo, SVG format, black text, and white background][27]
  • [Chevron-only Arrow logo, PNG format, black text, and transparent background][28]
  • [Chevron-only Arrow logo, SVG format, black text, and transparent background][29]

Text-only logos

  • [Text-only Arrow logo, PNG format, white text, and black background][30]
  • [Text-only Arrow logo, SVG format, white text, and black background][31]
  • [Text-only Arrow logo, PNG format, white text, and transparent background][32]
  • [Text-only Arrow logo, SVG format, white text, and transparent background][33]
  • [Text-only Arrow logo, PNG format, black text, and white background][34]
  • [Text-only Arrow logo, SVG format, black text, and white background][35]
  • [Text-only Arrow logo, PNG format, black text, and transparent background][36]
  • [Text-only Arrow logo, SVG format, black text, and transparent background][37]

[4]: {{ site.baseurl }}/img/arrow-logo_horizontal_white-txt_black-bg.png [5]: {{ site.baseurl }}/img/arrow-logo_horizontal_white-txt_black-bg.svg [6]: {{ site.baseurl }}/img/arrow-logo_horizontal_white-txt_transparent-bg.png [7]: {{ site.baseurl }}/img/arrow-logo_horizontal_white-txt_transparent-bg.svg [8]: {{ site.baseurl }}/img/arrow-logo_horizontal_black-txt_white-bg.png [9]: {{ site.baseurl }}/img/arrow-logo_horizontal_black-txt_white-bg.svg [10]: {{ site.baseurl }}/img/arrow-logo_horizontal_black-txt_transparent-bg.png [11]: {{ site.baseurl }}/img/arrow-logo_horizontal_black-txt_transparent-bg.svg [12]: {{ site.baseurl }}/img/arrow-logo_vertical_white-txt_black-bg.png [13]: {{ site.baseurl }}/img/arrow-logo_vertical_white-txt_black-bg.svg [14]: {{ site.baseurl }}/img/arrow-logo_vertical_white-txt_transparent-bg.png [15]: {{ site.baseurl }}/img/arrow-logo_vertical_white-txt_transparent-bg.svg [16]: {{ site.baseurl }}/img/arrow-logo_vertical_black-txt_white-bg.png [17]: {{ site.baseurl }}/img/arrow-logo_vertical_black-txt_white-bg.svg [18]: {{ site.baseurl }}/img/arrow-logo_vertical_black-txt_transparent-bg.png [19]: {{ site.baseurl }}/img/arrow-logo_vertical_black-txt_transparent-bg.svg [20]: {{ site.baseurl }}/img/arrow-logo_hex_white-txt_black-bg.png [21]: {{ site.baseurl }}/img/arrow-logo_hex_black-txt_white-bg.png [22]: {{ site.baseurl }}/img/arrow-logo_chevrons_white-txt_black-bg.png [23]: {{ site.baseurl }}/img/arrow-logo_chevrons_white-txt_black-bg.svg [24]: {{ site.baseurl }}/img/arrow-logo_chevrons_white-txt_transparent-bg.png [25]: {{ site.baseurl }}/img/arrow-logo_chevrons_white-txt_transparent-bg.svg [26]: {{ site.baseurl }}/img/arrow-logo_chevrons_black-txt_white-bg.png [27]: {{ site.baseurl }}/img/arrow-logo_chevrons_black-txt_white-bg.svg [28]: {{ site.baseurl }}/img/arrow-logo_chevrons_black-txt_transparent-bg.png [29]: {{ site.baseurl }}/img/arrow-logo_chevrons_black-txt_transparent-bg.svg [30]: {{ site.baseurl }}/img/arrow-logo_text_white-txt_black-bg.png [31]: {{ site.baseurl }}/img/arrow-logo_text_white-txt_black-bg.svg [32]: {{ site.baseurl }}/img/arrow-logo_text_white-txt_transparent-bg.png [33]: {{ site.baseurl }}/img/arrow-logo_text_white-txt_transparent-bg.svg [34]: {{ site.baseurl }}/img/arrow-logo_text_black-txt_white-bg.png [35]: {{ site.baseurl }}/img/arrow-logo_text_black-txt_white-bg.svg [36]: {{ site.baseurl }}/img/arrow-logo_text_black-txt_transparent-bg.png [37]: {{ site.baseurl }}/img/arrow-logo_text_black-txt_transparent-bg.svg [38]: https://rladies.org/