This page currently refers only to this website (posthog.com). It will later be updated to also include information about app.posthog.com.
If you're looking for the PostHog logo, you came to the right place. Please keep the logo intact. SVG is always preferred as it will infinitely scale with no quality loss.
|Preview||Name||Vector||PNG||PNG w/ padding*|
|Standard logo||SVG||PNG | PNG @2x||PNG | PNG @2x|
|Dark logo||SVG||PNG | PNG @2x||PNG | PNG @2x|
|Light logo||SVG||PNG | PNG @2x||PNG | PNG @2x|
|Logomark||SVG||PNG | PNG @2x||PNG | PNG @2x|
*PNGs with padding are useful when uploading the logo to a third-party service where there is limited control over padding/margin around the logo.
The @2x version of PNGs are designed for hi-dpi (or "Retina") screens. When using the logo in third party services that support uploading multiple versions (standard and hi-dpi), please be sure to include the @2x logo as it will appear crisper on newer devices, tablets and high resolution mobile devices.
If you have any questions or need clarification about which version to use, ask Cory, or reach out in the PostHog Users Slack and we'll be happy to help.
We use Displaay's typeface called Matter SQ. (SQ = square dots)
Building for web
On posthog.com, we use the variable font version. This allows us to specify our own font weights, which we do for paragraph text.
Context: Matter Regular's weight is
430 and the next step up is Matter Medium at
570, so we use our own weight of
475 for paragraph text.
Fonts are hosted outside of our posthog.com GitHub repo (due to licensing reasons). To protect the font files, they are restricted to loading on posthog.com and are not currently used for local development. Contributors will see the system default font load in place of Matter.
Workaround for local development
Restricted to PostHog employees, it's possible to reference the font locally to see an exact replication of what will be published on posthog.com.
- Download the webfont files from the zip above
- Extract the files and place them in
Layout.scss, comment out the
srcfor both fonts with production (Cloudfront) URLs and uncomment the relative URLs.
- Optionally use
.gitignoreto keep the files locally without inadvertently checking them in
Note: When submitting a PR, be sure to revert changes made to
Designing on desktop
We use 4 cuts of Displaay's Matter SQ typeface (SQ stands for square dots):
- Bold (titles and section headers)
- Semibold (paragraphs accompanying headers and paragraph links)
- Regular & Regular Italic (paragraph text)
Note that Regular and Regular Italic are lighter than the font-weight we use on the web, so paragraph text in Figma mockups will look noticeably thinner than how it appears on posthog.com.
When designing ads or other content with non-paragraph text, use Semibold instead of Regular.
We have a handful of licenses for desktop use of Matter. Contact Cory if you need the desktop fonts (OTFs).
|Name||Weight||Size||Letter spacing||Line height|
|Paragraphs accompanying large headers||Semibold||20px||-1%||125%|
We have two color schemes (light and dark mode), but primarily use light mode.
We use the same set of colors, and only swap out a couple hues depending on the color scheme.
Colors denoted with an asterisk (*) are the same between palettes.
|Name||Light mode||Dark mode|
|Text color (at 90% opacity)||■ ||■ |
|Background color||■ ||■ |
|Accent||■ ||■ |
|Dashed divider line||■ ||■ |
|Yellow||■ ||■ |
opacity over more colors
When possible, use opacity to modify colors. This allows us to use fewer colors in our palette, which is light years easier when working with two color schemes.
Use fully rounded buttons and centered text.
|Name||Light color scheme||Dark color scheme|
|Primary||Background: ■ |
Border: 2px ■
|Background: ■ |
Border: 2px ■
Border: 2px ■
Use filled in icons over outlined icons.