Color

Patepang has one color, in two strengths. Soft blue is the blue of the app icon: it says who we are, and it is never asked to carry words. Deep blue is the same blue with enough weight to read and to press.

Navy and ivory hold everything else: navy for words, ivory for the ground. Pale blue and white complete the set. Apricot stands apart on purpose and has one job.

An interface never reads a color by its name. It reads a role: the canvas, the words, the main button. Each role has a value for the light scheme and one for the dark, and a screen that uses roles follows the scheme with no further work.

The roles below are the ones the sites draw with today. The app’s theme has a role for the same job under the name in the last column.

Every pair that carries words or marks a control is measured with the WCAG 2.2 formula, in both schemes, and none is used before it passes: 4.5:1 for words, 3:1 for the focus ring.

These figures are computed from the values on this page each time the site is built, so they cannot drift from them.

Soft blue is not among them. It reaches only 2.58:1 under white and 2.37:1 on ivory, which is why it never carries words and never marks a control. Words on a soft blue field are navy (5.86:1).

These colors stand beside the blues and never replace them. In an illustration a color is a person: soft blue is always you, and the others are the people you meet.

• Forest green#1F5F4FOther people in illustrations.
• Leaf#5DA78BOther people in illustrations.
• Amber#F0C468Other people, the sun, the moon and a glow in illustrations; a warning’s words on dark grounds.
• Light blue#A9CBEAOther people and traces in illustrations; second words on the deep ground.
• Brick#A0461EMemories, where apricot has to carry words on a light ground.

The twelve pigments of the illustrations, with their pairs for dark paper, are on Illustration.

A status color says that something worked, needs a look, or went wrong. It always comes with an icon or a word, because color alone is not a message, and it is never used to decorate or to tell people apart in an interface.

Do

• Use deep blue for the one main action of a screen, for links, and for the focus ring.
• Put navy words on ivory, and ivory words on navy.
• Keep apricot for memories: the panyecek in a memory moment, and the momen illustrations.
• Read colors from roles in code, so both schemes are right at once.
• Pair every status color with an icon or a word.

Do not

• Set words, icons that must be read, or the edge of a control in soft blue.
• Use blue for a hover, a press, or a selection: those have their own quiet tones.
• Add gradients, glows, or a second decorative color.
• Use black. Words are navy; only one-ink print that cannot be blue is black or white, in full.
• Lay a color over a photo of a person.

Every value on this page is also a file: tokens.json and tokens.css.

Blue for everything was decided on 11 November 2026. The logo, the app icon and the sites already follow it. What does not yet:

• The app’s main button and brand-colored words are forest green (brand.solid #1F5F4F, and #7FCDB4 in the dark theme). They move to deep blue.
• The app’s words are a warm charcoal (#22201C) and its dark theme stands on a charcoal ground (#141513). Words move to navy; the dark ground is settled with that move.
• The app’s two-dots motif draws one forest green dot and one apricot dot. By the rules here, you are soft blue and apricot is for memories alone.
• On the sites, success and danger are close to the app’s values but not the same (--ok #1F6B4A, --bad #A03A2A).
• On the sites, the strong line (--line-strong #8792A0) reaches 2.90:1 on the canvas. Where it is the only edge of a control it needs 3:1; the app’s value for that role (#8A8378) passes.

Each is closed in its own repository, and this page is updated when it is.