A p that holds a coin.
The p is one stem and one ring. The ring holds a gold coin, and the coin is a Prefkey. Every shop on the network gets its own colour. The coin is the one thing that never changes.
Construction.
| Part | Size |
|---|---|
| Stem width | 1 unit |
| Ring thickness | 1 unit |
| Ring outer diameter | 3.43 units |
| Coin diameter | 1.48 units |
| Coin rim | 10% of coin radius |
| Coin face | Plain. Nothing on it. |
| Below 32px | Plain gold coin, no rim (favicon) |
| Total height | 4.57 units |
| Clear space | One coin on every side |
| Smallest size | 16px on screen, 6mm in print |
The coin fills the ring exactly. It has a thin rim in a slightly deeper gold, which is what makes it a coin rather than a dot. Its face is plain: no symbol, letter or figure. Below 32px the coin is drawn plain gold with no rim.
Empty until a Prefkey lands.
The ring is a slot. It is empty when no Prefkey is in play and full when one is. The coin turns once as it falls into the p, then settles with one small bounce. That drop runs on the paid screen and the merchant’s sale alert. The only other motion is the coin spinning inside the Pay button while a payment processes. When it settles, a single glint crosses the coin’s face, once. That is the brand’s only shine, and it only happens in motion. The logo in the nav, footer and on a shop’s page never moves and never shines.
See the dropInk, paper and one coin.
Prefstore has no hue of its own. That is deliberate: the colour on a shop’s page belongs to the shop.
Text, the p, dark grounds, Prefstore’s own buttons.
Page ground.
Cards and receipts.
The coin. Only where a Prefkey is involved.
The coin’s rim. Only on the coin.
Secondary text.
Prefkey notice ground.
#1F7A4D and #B3261E. States only.
| Pair | Contrast | Use |
|---|---|---|
| Ink on Paper | 17.1 : 1 | All text |
| Mute on Paper | 5.5 : 1 | Secondary text |
| Gold on Ink | 10.7 : 1 | The coin; short gold words on dark |
| Gold on Paper | 1.6 : 1 | Shapes only. Never text or thin lines. |
| Gold Ink on Gold Tint | 6.5 : 1 | Prefkey figures on light |
The colour is theirs. The coin is ours.
Each shop sets one colour. Their header, Pay button, paid screen and tile take it. The p turns white or ink, whichever contrasts more. The rule is one function: Prefstore.inkOn(hex) in JavaScript, ink_on($hex) in PHP.
Five rules.
The coin is always gold, with its rim
Nothing on its face: no symbol, letter or figure. Never recolour it. Static coins have no highlight; the shine belongs to the one glint in the coin drop.
Empty or full
No half-filled rings, no progress states. The drop is the only in-between.
Gold means Prefkey
If no Prefkey is involved, there is no gold on the screen apart from the mark.
The shop leads
On a shop’s page, Prefstore is one 32px tile and one line in the footer.
Don’t give Prefstore a colour
No house blue, no gradients. Ink, paper and the coin.
Don’t borrow Prefway’s look
No Midnight, no Vermilion, no game art. The gold coin is the only thing the two brands share.
Talk like the person behind the counter.
| Say | Not |
|---|---|
| Your $10 Prefkey works here on orders of $30 or more. | Unlock $10 off! *Terms apply |
| Paid. See you at the counter. | Success! Your transaction has been processed. |
| That card was declined. Nothing was charged. | Oops! Something went wrong. |
| Ready around 6:15. | Hurry, order in the next 4:59! |
What’s in the kit.
| Folder | What |
|---|---|
| logos/svg, logos/png | Wordmark, mark (full and empty), app icons, favicon, coin, merchant tile template, share image |
| assets/css | tokens.css, fonts.css, prefstore.css |
| tokens/ | tokens.json and a Tailwind v4 theme file |
| animations/ | Lottie: coin drop (ink and white) and coin spin. See Components for use. |
| pages/ | Home, shop page, checkout, paid |
| typography.html | Type system and the font buying list |
| components.html | Every component with its markup |