Plum for who we are. Green for what is true.

Two tones, one meaning each, and a mark built out of the brackets a capture tool draws anyway. Every colour below is a token rather than a fixed value, so a retune moves the page with the product.

Brand

Meet the
Bracket Owl.

Four capture brackets, and the top pair doubles as the brow. The disc carries recorder state rather than the pupils, because red on plum measures 2.42:1 where a graphic needs 3:1. A whole coloured circle also reads at 16 pixels in a tray, where two red dots do not.

Plum #65184E stays a disc and never becomes a page band. Two tokens carry it: --brand-disc is the fill and never moves with the theme, while --brand is the foreground and lifts to #CE7EB6 on a dark ground, because the disc value scores 1.64:1 as text. Emerald #10B981 is the second tone, and it marks what a check in this repository holds true.

Idle#65184E
Recording#DC2626 · pulse
Paused#B45309 · still
Workinglids closed

The paused amber is #B45309 and not the lighter amber the recording pill uses. At the pill's value the silver frame falls to 2.03:1 against the disc and the brackets vanish into it, so the two ambers are measured against the two grounds they sit on.

outline48 and up
compact24 to 40
micro16 and 20

#65184Edisc
#CE7EB6foreground
#10B981accent
#C8CFD8frame
#FAFAFAmark

Theming

Six accents.
Two themes.

The window beside this is the demo rather than a picture of one. Pick an accent or flip the theme and it repaints through the same stylesheet blocks the app repaints through. The page around it stays dark, because this surface has one theme by design and the choice belongs to the product.

Six accents, blue by default
Light, dark, or whatever the system is set to
Contrast measured by a build check, not eyeballed
One palette across the app, the extension, the editor and the web

SettingsAppearance

These controls are the real thing, scoped to this window. They repaint the demo only; your saved theme and accent are set in the app and in the dashboard, and nothing here changes them.

Plum scores 1.64 to 1 on dark, so it lifts

The plum and the emerald are near complements, 318 degrees against 163, and they sit at almost the same lightness, which is why they read as a pair rather than as an argument. Every ratio below was measured against the real background rather than estimated.

--brandPlum as a foreground, for text and strokes: 11.71:1 on light. The same plum scores 1.64:1 on dark and is invisible there, so it lifts to a 65% tint of its own hue at 6.64:1.
--brand-discPlum as a disc, for the app icon, the tray and the favicon: Never moves with the theme, because a filled disc carries its own contrast. That is why the primary lockup is a badge and not an outline, and why the outline is for inline use only.
--emeraldVerified: true of the shipped code, and nothing else: 5.48:1 on light. Lifts to #10B981 on dark, 7.58:1.
--brand-onThe owl on a plum disc. Near white, not pure: 11.21:1 on plum.
--brand-silverSecondary detail on a disc. A flat tone, never a ramp: 7.45:1 on plum.

Green means checked by a machine

This product argues that it only claims what it ships. So the second brand tone is not decoration and is not a mood. It marks a statement that a build check holds true, and the check that holds it is printed beside it.

One annotation engine, mirrored byte for byte across three surfacesscripts/check-annotate.mjs

Six accents, every one contrast checked and held to its floorscripts/check-tokens.mjs

The mark clears itself everywhere, frame centred on 16,16scripts/check-mascot.mjs

The product promises in the desktop app match the code beneath themscripts/check-promises.mjs

Settings the app offers are the settings the app readsscripts/check-settings.mjs

Five checks, all of them in this repository, all of them run by pnpm test. A claim on this site that no check holds does not get a green mark.

Two drafts shipped with overlapping eyes, and looking did not catch it

The geometry is held by a check rather than by attention. Two earlier drafts of the mark shipped eye rings that overlapped each other, and neither was caught by looking at them, because the number that matters is the distance between stroke edges rather than between centres.

Two documents in this repository carry that decision and every other one behind the page above: docs/design/BRAND.md for the palette and docs/design/MASCOT.md for the mark. Each records what was deliberately not done as well as what was.

The brand tones are not accents. The six accents are yours to pick and they repaint the interface wherever you are signed in; these two do not move, which is what makes them a brand rather than a preference. The window up the page is that difference in one control: the accents change inside it, and the plum and the green do not.