<!-- https://getkonjo.com/design/patterns/celebration · source: docs/design/patterns/celebration.md -->

# Celebration — the promotion certificate

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

> Part of the [Konjo design language](../konjo-design-language.md). The laws in the spine apply here unless this chapter contradicts them.

> **Before you write a word of consequence copy**, read
> [product-facts.md](../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](progress.md). 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`](../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](../reference/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.
