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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
