# Designing posthog.com - Handbook

The[](/teams/website.md)

[](/teams/website.md)

[

](/teams/website.md)

[Website Team

Website Team](/teams/website.md) is responsible for everything you see on posthog.com. We treat our website & docs as a product, which means we're constantly iterating on it and improving it.

Because our website has a well-defined aesthetic, we often skip the hifi design process and jump straight from wireframes into code. Having a designer who can code means we can reach the desired level of polish without *always* having to produce hifi designs, thus leading to huge time savings.

## Step 1: Wireframes \[Balsamiq\]

We often produce hi-fidelity wireframes because this allows us to closely envision a design which in turn helps us skip the hi-fi Figma process.

*Note: Balsamiq uses its own Comic Sans-style font. Don't get hung up on this!*

![image](https://user-images.githubusercontent.com/154479/221651322-56a69559-7e68-4fd8-92ac-c1068cd202eb.png)

## Step 2: Hi-fi designs \[Figma\]

Designs are scattered across a variety of unorganized Figma files, but [here's some of the most recent iteration](https://www.figma.com/design/F0MRaoGSIF0fY2WNblNQ9I/PostHog-OS?node-id=1611-242&t=iLFL3ZjuTjllv1j5-1).

If there are multiple iterations of a single page, we typically work left to right.

Any mocks in pages that appear to be faded out are considered *old* and *out of date* and can be ignored, as there is a better replacement nearby. (We sometimes want to keep them around for easy reference (and to leave a comment trail), but they're easily identifiable because their artboards are set to 50% opacity.)

Even with this loosely-documented process, things move quickly and we don't always follow this process. If you're looking for something in particular, it's worth pinging in the [#team-brand](https://posthog.slack.com/archives/C01V9AT7DK4) channel.

We're also working on creating a singular place for [product screenshots](https://www.figma.com/design/Nv3HFBfZDVLmF6M9ZiIqhm/Screenshots?node-id=17-4&t=uOmubb0vnyeVpXn4-1), which are exported in light and dark mode using [html.to.design](https://html.to.design).

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better