Browse all of Kata

Celebration — the promotion certificate

Source docs/design/patterns/celebration.mdMarkdown

The one moment the app is allowed to be loud about a person.

Part of the Konjo design language. The laws in the spine apply here unless this chapter contradicts them.

Before you write a word of consequence copy, read product-facts.md. Who is alerted, what becomes permanent, who can read it afterwards and whether it can be undone are decided there — and where they are not, that is a blocker rather than something to phrase well.

Reserved for what a human conferred: a promotion, a passed test, a coach's sign-off. A streak is stated; a rank is celebrated.

The form is a certificate, and the conferring instructor is the subject. Not a full-screen takeover, not a badge-unlock burst — a record you would keep.

RANK CONFERRED                     eyebrow, gold
1 Brown Stripe                     display 34/800
────────────────────────────────
Conferred by    Sensei Marcus Reyes
Dojo            Blue Heron Martial Arts
Date            Nov 8, 2026
Time at rank    14 months
────────────────────────────────
[ See what's next ]                one filled primary, ink
Share with your dojo               one text link

This is a deliberate exception to the badge-grid mechanic. Streaks and counts are game-shaped because they are the app's own bookkeeping; a rank is not. In martial arts a rank is conferred by a person, not unlocked by a system, and a design that says "unlocked!" quietly takes the credit away from the sensei who gave it. Naming them is the whole point of the screen.

Gold is the one place a contrast failure would have been unforgivable, and it was there. gold.text was #B8860B on gold.fill, computing to 2.96:1 — the achievement moment, the thing the brand cares most about, was the least readable screen in the app. It now ships #8A6300, and gold.text on gold.fill is 4.95:1 light / 7.25:1 dark. Do not reintroduce the old value; the checker will reject it.

The gradient exemption and the one animation allowed past 400ms both live here, and both are opt-out under reduce-motion.


About the reference image

reference/konjo/promotion-certificate-target.jpg shows the composition, and its button, alignment and date format are all wrong — a full-width pill, centred in a void, with a long-form date. The deviations are listed in SOURCES.md. Take the layout from the image and the rules from here; where they disagree, the rules win.

This is worth stating because an artefact is more persuasive than a paragraph. A blind test of the promotion form found that the generated form target hands you a finished consequence sentence, and the tempting move is to copy it forward — which is invention laundered through a reference, and harder to catch than invention in prose.