The Tendd language, on one stand
The chosen direction is Petrol & Paper: precise, trustworthy, unfussy. A calm light canvas, one deep petrol accent spent only where it earns attention, and real brand logos so a charge is recognized, not decoded. Every token below carries the attribute it traces to. The base mechanism is Monzo, minus its coral; the clarity row is Apple Wallet; the category chip is Copilot, on light.
The language, alive
Before the specification, the product speaking in this language. Same structure, copy, and states as the grey Home wireframe, now in Petrol & Paper. This is what Step 5 will apply to the real screen.
You're paying for 14 subscriptions
$192.90
a month, for what you have signed up for
Read-only. Tendd cannot move your money.
Netflix went up by $2.50, now $17.99 a month.
See what changed →Palette
Restrained: a true-white canvas, a cool whisper surface, near-black ink, and one deep petrol accent. Each color carries the attribute it serves. The accent is spent only on the primary action, the current selection, and the trust line, never as decoration.
Semantic, kept calm
No alarm-red. Tone is set by state, per voice.md: an error is honest not loud, a price change informs without shouting, a win is quiet.
Contrast (WCAG AA)
| Foreground | Background | Ratio | Verdict |
|---|---|---|---|
| ink #141b1d | bg #ffffff | 17.2 : 1 | AAA |
| muted #5a686c | bg #ffffff | 5.8 : 1 | AA |
| muted #5a686c | surface #eef3f4 | 5.2 : 1 | AA |
| petrol #1c6a76 | bg #ffffff | 6.2 : 1 | AA |
| white #ffffff | petrol #1c6a76 (button) | 6.2 : 1 | AA |
| amber #9a6a12 | amber tint #f6efe0 | 5.0 : 1 | AA |
| status #4f5e62 | gray tint #e9eeef | 5.1 : 1 | AA |
Typography
One family, Inter. A product UI does not need a display pairing; weight and size carry the hierarchy, and a neutral grotesk disappears into the task. The total is the one moment given real size, per A3.
Form
Crisper corners than the warm direction, so the product reads precise rather than playful. One soft shadow only. A steady spacing scale.
card 10px
control 6px
badge 999px
chip
Logos
The content layer is real brand logos, inline SVG, not stock photos. This is Mechanism 3, the transaction clarity layer: a real logo plus a real name answers "what am I paying for?" directly, so a charge is recognized (A4), not decoded. Where a brand mark is unavailable, a clean monogram tile in the same style stands in, never a grey placeholder.
Brand set to ship (Step 5), inline SVG: Netflix, Disney+, Amazon Prime, Hulu, Adobe Creative Cloud, ChatGPT, iCloud+, Notion, Spotify, Apple Music, Peloton, Strava, The New York Times, The Economist. The monogram tile (for example "Pe" for Peloton) is the fallback when no brand mark exists, in the same petrol-on-surface style.
Icons
Solar, linear weight, inline SVG (not a CDN script), one consistent 24px rounded stroke. Coverage: the four tab-bar tabs, the trust shield, and the small utility set for metadata, actions, and states.
Components
Three live components carry most of the product. Each is shown in the language, with the states a product needs. The same subscription card here is the one on Home and inside Subscription Detail, so the same card reads as the same product across screens.
1. Primary action
Petrol fill, white text, 10px radius. The accent is spent here. Secondary is a quiet ghost. Disabled drops to a desaturated petrol, still clearly the same control.
2. Subscription card (the row)
The most reused component: real logo, real name, amount, next date, a soft category chip (A4), and a quiet status tag. Active is neutral gray; a trial is a calm petrol tint, never red.
3. Form field
Used in Add a subscription. Petrol focus ring, calm helper text, no red validation shouting. Label above, helper below.
We'll match it to a logo and category for you.