282 lines
9.2 KiB
Markdown
282 lines
9.2 KiB
Markdown
---
|
|
title: Branding
|
|
sidebar: Handbook
|
|
showTitle: true
|
|
---
|
|
|
|
<br />
|
|
|
|
> **Note:** This page currently refers only to this website (posthog.com). It will later be updated to also include information about app.posthog.com following the rebrand.
|
|
|
|
## Resources
|
|
|
|
#### Figma: PostHog Branding
|
|
|
|
Refer to this [Figma Project](https://www.figma.com/file/8iM3Damgbl4PyHq6x8JJbu/PostHog-Branding?node-id=1%3A661) for a comprehensive overview of our colors, fonts, logos, and related resources.
|
|
|
|
#### Logos
|
|
|
|
To get access to our various logo formats, check out our [Media page](/media).
|
|
|
|
<br />
|
|
|
|
## Colors
|
|
|
|
Our three main colours are Blue, Orange, and Yellow.
|
|
|
|
|
|
##### <span style="color:#1D4AFF; font-size: 20px">■</span> Blue: #1D4AFF
|
|
|
|
##### <span style="color:#F54E00; font-size: 20px">■</span> Orange: #F54E00
|
|
|
|
##### <span style="color:#F9BD2B; font-size: 20px">■</span> Yellow: #F9BD2B
|
|
|
|
<br />
|
|
|
|
Accompanying these colours are Black and White, as well as a Dark Navy. Navy was introduced to tone down the blue against the yellow and orange, and provides a vintage feel to the page.
|
|
|
|
##### <span style="color:#000000; font-size: 20px">■</span> Black: #000000
|
|
|
|
##### <span style="color:#000000; font-size: 20px">□</span> White: #FFFFFF
|
|
|
|
##### <span style="color:#35416B; font-size: 20px">■</span> Dark Navy: #35416B
|
|
|
|
<br />
|
|
|
|
If possible, all artwork is to be made with these colours, as well as typography and social media images.
|
|
|
|
|
|
## Text
|
|
|
|
# H1
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 64px
|
|
* Line Height: 100
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
## H2
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 48px
|
|
* Line Height: 70
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
### H3
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 36px
|
|
* Line Height: 60
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
#### H4
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 30px
|
|
* Line Height: 50
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
##### H5
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 20px
|
|
* Line Height: 35
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
###### H6
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 18px
|
|
* Line Height: 30
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
#### Normal Text
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 16px
|
|
* Line Height: 25
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
#### Small Text
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 16px
|
|
* Line Height: 20
|
|
* Color: Black
|
|
* Opacity: 30%
|
|
|
|
#### Note
|
|
|
|
If the text is secondary and you think it is less important feel free to put the opacity down to 60%. This will turn it to a dark gray color. This way, the user's eyes are brought to the darker text first and will read the lighter text if they need to.
|
|
|
|
The color of text should always be black - with the occasional lowered opacity to 60% when necessary.
|
|
|
|
## Numbers
|
|
|
|
For numbers you have two options, the first being *statement* and the second being *subtle*.
|
|
|
|
#### Statement Numbers
|
|
|
|
Statement numbers tend to be used on the landing page or pages where the product is being explained. Usually accompanied by visuals and a small amount of text.
|
|
|
|
**Specifications**
|
|
|
|
Statement No. Gosha Sans, bold, size 64px, colour - Blue (#1D4AFF), Orange (#F54E00), Yellow (#F9BD2B) alternating, opacity 100%.
|
|
|
|
#### Subtle Numbers
|
|
|
|
Subtle numbers are seen within docs and blogs, usually employed to give instructions or list things.
|
|
|
|
**Specifications**
|
|
|
|
Subtle No. Helvetica Neue, regular, size 20px, colour Yellow (#F9BD2B), opacity 100%
|
|
|
|
## Layout
|
|
|
|
When creating layouts on Figma, always start with the 'Desktop' Frame (1440 W x 1024 H).
|
|
|
|
Then create a grid with the following specifications:
|
|
- Rows: 14 | Stretch | Gutter: 10 | Color: 2%
|
|
- Columns: 24 | Stretch | Gutter: 10 | Color: 2%
|
|
|
|
This will give you the basis of PostHog's visual structure.
|
|
|
|
## Logos
|
|
|
|
The logo consists of both a symbol and type next to each other, but they can be used separately if need be. It is advisable for the website and product to keep the logo elements together. However, this isn't as important for other instances like swag or social media posts.
|
|
|
|
When putting the logo over color, type and symbol should all be white. Copies of this are available on the branding page on [Figma](https://www.figma.com/file/8iM3Damgbl4PyHq6x8JJbu/PostHog-Branding?node-id=1%3A661) for you to copy or download. If for whatever reason you need to make the logo all black, that is also fine, but only with a grey or white background.
|
|
|
|
## Icons
|
|
|
|
Under any H2 text there should be a divider. The divider helps separate the subtitle from the body text underneath. This icon is a long, thin rectangle with rounded edges.
|
|
|
|
**Dimensions:** 120 x 10px with a 10 corner radius.
|
|
|
|
On the landing page the dividers alternate between the three PostHog colours, Blue (#1D4AFF), Orange (#F54E00) and Yellow (#F9BD2B). However, on any other pages they are always Orange (#F54E00).
|
|
|
|
These dividers should be 35px below H2 text, and any body copy text below should be 35px from the divider.
|
|
|
|
## Background Textures and Color
|
|
|
|
To stop the website from looking dull we have employed the use of color and texture to give it some depth.
|
|
|
|
The three main colors are Orange (#F54E00) and Yellow (#F9BD2B), with a bit of Navy (#35416B).
|
|
|
|
Color blocks can be any size, but they must not fill more than one third of the screen. They must have a curved radius of 100 and usually have illustrations or icons over the top.
|
|
|
|
On top of the color blocks (or on its own) you could also use the halftone grey panel on opacity 20%. This gives the page some texture without distracting the USER from the text.
|
|
|
|
## Menus and Sidebars
|
|
|
|
Most of the menus on PostHog will be in tones of grey with pops of color for clicked pages. The most common menu featured on the bottom of the website page holds 5 sections for users to navigate the website. This menu is Mid Grey (#BEBEBE), and its size is 315px in height, while occupying the entire length of the screen in width.
|
|
|
|
Within the block are the 5 categories: Why PostHog, Resources, Community, Support, Company.
|
|
|
|
This uses 'Extra Large Text', as defined in the 'Fonts' section.
|
|
|
|
Underneath these 5 categories are the sub sections, which use 'Normal Text', as defined in the 'Fonts' section.
|
|
|
|
Side Menus, found on pages such as Docs, are to be a Light Grey (#F0F0F0) and 430px wide. The text and dropdown options should be fixed so that even when reading the consumer can still have quick access to other areas within the site.
|
|
|
|
The text in this sidebar should be Extra Large Text. The arrows that accompany the categories will be in Figma - they are a simple vector and the stroke needs to be 2.
|
|
|
|
When you click on a dropdown menu, the text and arrow turn Blue (#1D4AFF) to indicate that they have been clicked. The subcategories text should be Normal Text. When a subcategory is clicked this should also turn Blue, along with the Category text and arrow.
|
|
|
|
The last menu is the navigation menu that can be found in Docs. This uses Small Text.
|
|
|
|
Alongside the text on the left is a line with a small circle to indicate the part of the document you are in. Like the text, the line is black with an opacity of 30%. The stroke is 3, while the circle is 12x12px (white fill) with an inside stroke of 3 (orange).
|
|
|
|
Depending on what section of the text you are reading, the text will turn orange and the circle will be aligned with that selected text.
|
|
|
|
## Mobile Content
|
|
|
|
When transforming any desktop page to mobile please use the iPhone 8 frame on Figma.
|
|
|
|
### Headers
|
|
|
|
The header consists of the logo (206 W x 40.13 H) centered, a menu bar (36 W x 32 H) and a grey background (375 W x 110 H) in colour #F0F0F0. On the landing page the header is different, but generally the header should be consistent. The landing page header consists of the logo, (206 W x 40.13 H) centred, a menu bar (375 W x 390 H) in grey (#EDEDED) with halftone dots (This image can be found on the Figma file) (375 W x 390 H) laid over the top at 20% passthrough. This gives a subtle halftone effect.
|
|
|
|
### Text
|
|
|
|
#### H1
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 18px
|
|
* Line Height: 30
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
#### H2
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 14px
|
|
* Line Height: 20
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
#### H3
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 12px
|
|
* Line Height: 20
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
#### H4
|
|
|
|
###### Font Specifications
|
|
|
|
* Family: Gosha Sans (Regular)
|
|
* Size: 10px
|
|
* Line Height: 20
|
|
* Color: Black
|
|
* Opacity: 100%
|
|
|
|
### Numbers
|
|
|
|
Follows the same principles as the Desktop format, using Statement and Subtle numbers.
|
|
|
|
**Statement Numbers**
|
|
|
|
Gosha Sans | Regular | Size 20 | Line Height 20 | Color: Yellow, Orange, or Blue | Opacity: 100%
|
|
|
|
**Subtle Numbers**
|
|
|
|
Helvetica Neue | Bold | Size 14 | Line Height 20 | Color: Yellow | Opacity: 100%
|
|
|
|
## Shapes and Dividers
|
|
|
|
Curved rectangle backgrounds, size (203 W x 170 H), with a curved radius of 20, in either Yellow (#F9BD2B), Orange (#F96132), or Navy (#35416B). These can be overlaid with halftone dots, at 20% pass through.
|
|
|
|
Dividers on the mobile format are similar to the desktop version but smaller (70 W x 7 H) and generally orange (#F96132), except for the landing page where they alternate between the three PostHog colours.
|