[GitHub] [arrow-site] ianmcook commented on a change in pull request #194: ARROW-15684: [Website] Visual identity guidelines for Apache Arrow logo

[GitBox <gi...@apache.org>]

ianmcook commented on a change in pull request #194:
URL: https://github.com/apache/arrow-site/pull/194#discussion_r807477257



##########
File path: visual_identity.md
##########
@@ -0,0 +1,228 @@
+---
+layout: article
+title: Visual identity
+description: Visual Identity for Apache Arrow
+---
+<!--
+{% comment %}
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to you under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+{% endcomment %}
+-->
+
+
+# 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)
+- [Variations of the logo](#variations)
+- [Usage guidelines](#using-the-logo)
+- [List of logo files](#files)
+
+## 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:
+
+<img src="{{ site.baseurl }}/img/arrow-logo_horizontal_black-txt_white-bg.png" width="100%">
+
+The word "Apache" in the logotype is written in all caps [Roboto font][1], and the word "Arrow" is written in all caps [Barlow font][2] 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.
+
+<img class = "py-3" src="{{ site.baseurl }}/img/logo-spacing-horizontal.png" width="100%">
+
+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:
+
+<img class = "py-3" src="{{ site.baseurl }}/img/logo-spacing-vertical.png" width="100%">
+
+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:
+
+<div class="col-8 offset-2 py-1"><img src="{{ site.baseurl }}/img/logo-spacing-hex.png" width="100%"></div>
+
+## 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:
+
+<img class = "py-3" src="{{ site.baseurl }}/img/arrow-logo_horizontal_black-txt_white-bg.png" width="100%">
+
+Similarly, the dark theme uses white text against a black (or other dark colored) background:
+
+<img class = "py-3" src="{{ site.baseurl }}/img/arrow-logo_horizontal_white-txt_black-bg.png" width="100%">
+
+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:
+
+<div class="container justify-content-evenly center py-3">
+<div class="row">
+  <div class="col-12 col-md-6"><img src="{{ site.baseurl }}/img/arrow-logo_vertical_black-txt_white-bg.png" width="100%"></div>
+  <div class="col-12 col-md-6"><img src="{{ site.baseurl }}/img/arrow-logo_vertical_white-txt_black-bg.png" width="100%"></div>
+</div>
+</div>
+
+Similarly, two official variations of the hex sticker are provided:
+
+<div class="container justify-content-evenly center py-3">
+<div class="row">
+  <div class="col-12 col-md-6"><img src="{{ site.baseurl }}/img/arrow-logo_hex_black-txt_white-bg.png" width="100%"></div>
+  <div class="col-12 col-md-6"><img src="{{ site.baseurl }}/img/arrow-logo_hex_white-txt_black-bg.png" width="100%"></div>
+</div>
+</div>
+
+The repository also includes files for "Triple Chevron" logomark on its own
+
+<div class="container justify-content-evenly center py-3">
+<div class="row">
+  <div class="col-12 col-md-6"><img src="{{ site.baseurl }}/img/arrow-logo_chevrons_black-txt_white-bg.png" width="100%"></div>
+  <div class="col-12 col-md-6"><img src="{{ site.baseurl }}/img/arrow-logo_chevrons_white-txt_black-bg.png" width="100%"></div>
+</div>
+</div>
+
+and the "Apache Arrow" logotype on its own:
+
+<div class="container justify-content-evenly center py-3">
+<div class="row">
+  <div class="col-12 col-md-6"><img src="{{ site.baseurl }}/img/arrow-logo_text_black-txt_white-bg.png" width="100%"></div>
+  <div class="col-12 col-md-6"><img src="{{ site.baseurl }}/img/arrow-logo_text_white-txt_black-bg.png" width="100%"></div>
+</div>
+</div>
+
+## 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][3] 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:
+
+<div class="container justify-content-evenly center py-3">
+<div class="row">
+  <div class="col-12 col-md-6"><img src="{{ site.baseurl }}/img/offbrand_hex_1.png" width="100%"></div>
+  <div class="col-12 col-md-6"><img src="{{ site.baseurl }}/img/offbrand_hex_2.png" width="100%"></div>
+</div>
+</div>
+
+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 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.

Review comment:
       I think it would be good to link the first occurrence of "R-Ladies" here to https://rladies.org for the benefit of readers who might not know what R-Ladies is.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@arrow.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org