Add files via upload
This commit is contained in:
amir houieh
GitHub
commit
9348b4fc20
|
|
@ -0,0 +1,149 @@
|
|||
# Logos
|
||||
|
||||
Last Updated: November 1, 2022 1:31 PM
|
||||
version: v0
|
||||
|
||||
# Brand Marks
|
||||
|
||||
### Choosing the right mark
|
||||
|
||||
Our mark is the primary brand element on our own properties, such as our websites and products. Here it can stand on its own. A simple bold mark can make a powerful statement. When our brand is represented in other contexts, throughout the web or in products we do not own, it is usually best to use a lockup. Finally, we have created lockups for use in small applications, where simply shrinking down will make the features illegible. Only use these lockups (the name includes the prefix ‘small’) for sizes below 40px.
|
||||
|
||||
Please do not edit, change, distort, recolor, or reconfigure the Logos mark. Our mark is the primary brand element on our own properties, such as our websites and products.
|
||||
|
||||
## Primary Mark
|
||||
|
||||
|
||||
|
||||
Logos primary mark - black
|
||||
|
||||
[marks-Logos-Large-Black.png](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/marks-Logos-Large-Black.png)
|
||||
|
||||
[marks-logos-large-black.svg](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/marks-logos-large-black.svg)
|
||||
|
||||
|
||||
|
||||
Logos primary mark - white
|
||||
|
||||
[marks-Logos-Large-White.png](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/marks-Logos-Large-White.png)
|
||||
|
||||
[marks-logos-large-white.svg](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/marks-logos-large-white.svg)
|
||||
|
||||
---
|
||||
|
||||
## Lockup - Vertical
|
||||
|
||||
When we represent our brand throughout the web or in products we do not own, it is usually best to use a lockup. These horizontal lockups are best used arranged horizontally in a line.
|
||||
|
||||
|
||||
|
||||
Logos lockup mark - vertical - black
|
||||
|
||||
[vertical_lockups-logos-large-black.svg](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/vertical_lockups-logos-large-black.svg)
|
||||
|
||||
[Vertical-Logos-Large-Black.png](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/Vertical-Logos-Large-Black.png)
|
||||
|
||||
|
||||
|
||||
Logos lockup mark - vertical - white
|
||||
|
||||
[vertical_lockups-logos-large-white.svg](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/vertical_lockups-logos-large-white.svg)
|
||||
|
||||
[Vertical-Logos-Large-White.png](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/Vertical-Logos-Large-White.png)
|
||||
|
||||
---
|
||||
|
||||
## Lockup - Horizontal
|
||||
|
||||
When we represent our brand throughout the web or in products we do not own, it is usually best to use a lockup. These horizontal lockups are best used stacked vertically.
|
||||
|
||||
|
||||
|
||||
Logos lockup mark - horizontal - black
|
||||
|
||||
[horizontal-Logos-Default-Large-Black.png](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/horizontal-Logos-Default-Large-Black.png)
|
||||
|
||||
[horizontal_lockups-logos-default-large-black.svg](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/horizontal_lockups-logos-default-large-black.svg)
|
||||
|
||||
|
||||
|
||||
Logos lockup mark - horizontal - white
|
||||
|
||||
[horizontal-Logos-Default-Large-White.png](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/horizontal-Logos-Default-Large-White.png)
|
||||
|
||||
[horizontal_lockups-logos-default-large-white.svg](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/horizontal_lockups-logos-default-large-white.svg)
|
||||
|
||||
---
|
||||
|
||||
### Clearspace
|
||||
|
||||
When placing the logo, it's important that it's given enough space from other elements on the surface it's presented on. The Clearspace is 50% of the width of the Logos mark. This Clearspace is accounted for as a margin in all our logo assets, so simply mind the edges of the image.
|
||||
|
||||
If you need to define the unit of space, the best way is to measure the bottom of any given mark to the edge of the image or the baseline of the logotype in the lockup to the bottom edge of the image. This unit is the same across all of our marks.
|
||||
|
||||
|
||||
|
||||
### Co-Branding
|
||||
|
||||
Often, our brand marks will be used as a family or in different combinations. All of our marks and lockups are designed to work together. The two major rules here are the consistency of size and the consistency of style.
|
||||
|
||||
Hierarchy is determined by the placement order, the most important being left in the case of horizontal layouts, or top in the vertical case. Vertical lockups are used in horizontal layouts and horizontal lockups in vertical layouts.
|
||||
|
||||
- All marks should be the same size
|
||||
- Priority is determined by order, not scale
|
||||
- All marks should be the same style
|
||||
- Do not mix lockups and non-lockups
|
||||
- Do not mix vertical lockups with horizontal lockups
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
# Social Assets
|
||||
|
||||
Our asset library will be more robust in the future, but the images below are branded avatars social accounts, followed by a preview of how they will look on Twitter.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Logos primary avatar
|
||||
|
||||
[twitter-avatar-logos.svg](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/twitter-avatar-logos.svg)
|
||||
|
||||
[twitter-avatar-logos.png](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/twitter-avatar-logos%201.png)
|
||||
|
||||
|
||||
|
||||
Logos primary banner
|
||||
|
||||
[Banner-Logos-Twitter-1600x800.png](Logos%205aada7bff71b4fc1a3cf4b93d99e1da3/Banner-Logos-Twitter-1600x800%201.png)
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
# Presentation Template
|
||||
|
||||
Copy and save as a new presentation with a new title if you plan to make one from the template.
|
||||
Also, make sure to check the Layout pull-down for all the placeholder goodies.
|
||||
|
||||
[Logos Presentation Template MAKE A COPY](https://docs.google.com/presentation/d/1extQeoMdbY2VZbTZH0sNKOM0AGMzpXjGsq9eG44zWjo/edit?usp=drivesdk)
|
||||
|
||||
## Typography
|
||||
|
||||
Our design system uses the Inter typeface family, under the Open Font License designed by Rasmus Andersson. [Download it here.](https://fonts.google.com/specimen/Inter?query=inter)
|
||||
|
||||
[Google Fonts: Inter](https://fonts.google.com/specimen/Inter?query=inter)
|
||||
|
||||
This face was used to design our lockups and brand print materials. Our core values lead us to respect the use of open faces and default system fonts in order to reach the best compromise of design excellence and user acceptance, so our typography guidance also includes the Arial, SF, and Courier families.
|
||||
|
||||
### Choosing Typefaces
|
||||
|
||||
What this means in practice is, there are two typography paths. The amount of design control we have determines the typeface we use. For applications where we have full control, Inter will be used.* In applications where the user has control, we design in the expected default system font, usually Arial or SF.
|
||||
|
||||
*It is always good practice to test our design in default fonts regardless.
|
||||
|
||||
For example:
|
||||
|
||||
|
||||
Loading…
Reference in New Issue