Pip
Blog

Why Pip has one orange

Pip uses one accent colour and almost nothing else. What the orange marks, the colour setting we took out, and the one exception.

· 2 min read

Pip has one accent colour. It’s an orange, #ff4d00, and it sits on warm neutrals: an off-white page in Light, a charcoal one in Dark.

A board from Pip’s Figma file titled Colour: a row of Light greys and a row of Dark greys, each ending in the same orange swatch, with a line of small coloured dots labelled area and project colours, a dot or a pie, never an accent.
The colour board in Pip’s Figma file. Two sets of greys, one orange, and the small project colours.

It wasn’t always that way. An early build had a colour setting, a row of swatches so you could make Pip blue, green or purple, and for a while extra colours were going to be part of Pro. We took the setting out before anyone outside saw it.

What the orange marks

In Pip the orange appears in a handful of places, and each one is either the way in or a moment where something happened.

Pip’s capture panel, a dark rounded box, holding the line take the bins out thursday 7pm. The words thursday 7pm are orange, and under the line it reads Thu 8 Oct, 19:00. Pip’s capture panel in Dark, holding the line take the bins out thursday 7pm. The words thursday 7pm are orange, and under the line it reads Thu 8 Oct, 19:00.
Typing into the dot in the real app (the browser build). It follows this page into Light or Dark.

Nothing else gets it. Not the headings, not the sidebar, and not a badge counting what you haven’t done. If the orange were also the colour of every button, you’d stop seeing it within a day, and the moment Pip understood your Thursday would look the same as a menu.

Why you can’t pick your own

A colour picker looks generous, and it’s one of the first things people ask for. But a palette that changes per person has to work with every colour, so the design ends up leaning on none of them. With one orange, every screen can be checked in Light and Dark against that one value.

Part of the Tokens board in Figma: named colour swatches such as bg, ink, ring and panel, shown twice, once on a light background and once on a dark one. The swatch named or is the same orange, ff4d00, in both.
Part of the Tokens board. Every colour has a Light and a Dark value, except the orange, which stays the same.

There are no gradients either. A gradient is two colours taking turns, and Pip only has the one.

The colour itself

It sits very close to the orange engineers call international orange, used on things that need to be seen against the sky. On a calm page it does the same job at a much smaller size: a ten-pixel dot you can find without looking for it.

The small colours

A few things do carry another colour, and none of them is allowed to act as an accent. A project can have a colour of its own, but it only shows in the little pie that fills as its tasks get done. A date that has already passed turns red. Code inside a note is coloured the way code editors colour it.

The one exception

Deleting is the one action you might regret, so Delete is a quiet red. Even then the delete can be undone straight away, and deleted things wait in Recently deleted for thirty days.

The top of a note in Pip called Hallway shelf, with the actions Pin, Link a task, Focus and Delete. Only Delete is red.
A note’s actions in the real app. Delete is the only one in red.

If Pip ever gets a second accent, it will have to mean something as clear as “this can’t be taken back”. So far nothing else has.