Answer
Fetch owns one colour, tennis ball green #aee32f, on a quiet dark product where the brand's own photos carry the colour, with Grandstander and Commissioner as type and a dashed wordmark slot until the product is named.
Today
The live product, before any direction
| Part | What it is | Source |
|---|---|---|
| Look | Dark, quiet, photographic. The brand's own pictures carry the colour | brand-directions/BRIEF.md section 2 |
| Dark tokens | bg #0a0a0a, card #1b1b1b, surface #232323, fg #fafafa, fg-2 #a3a3a3 | brew/public/feed-system.css:10-12 |
| Light tokens | bg #f6f6f6, card #ffffff, surface #f2f2f2, fg #0a0a0a | brew/public/feed-system.css:44-46 |
| Body font | SF Pro Text, then Inter | brew/public/feed-system.css:31 |
| Hand font | Caveat, for margin notes | brew/public/feed-system.css:32, 262 |
| Fonts loaded | Caveat and Inter from Google Fonts | brew/public/index.html:6 |
| Mark | brew-mark.svg as the favicon, and the home screen title still says the old name | brew/public/index.html:1 |
| Area faces | Creative teal #2bb39b blob, performance blue #4a90f0 hexagon, storefront orange #f28a3c rounded square, visibility purple #9a6bf0 diamond, CRM green #16a37f | brew/public/feed-system.css:188-191; brand-directions/BRIEF.md section 2 |
Fetch's identity, in the direction files
| Part | Value | Source |
|---|---|---|
| Owned colour | Tennis ball green #aee32f, for the main button, focus, the active tab and Fetch. Never a card fill, never text on light | brand-directions/dog/system.md s1 |
| Character colours | Coat #fff4dc, ink #16180f, tongue #ff9a85 for the tongue only | brand-directions/dog/art.html a1 |
| Book colours | Paper #fffdf6, night yard #0d130c, kraft #f8f4e6, deep green #446605 for links on light, green deep #5f8a12 | brand-directions/dog/system.md s1 |
| Contrast | Ink on green 11.8 to 1, ink on dark 16.9 to 1, muted on dark surface 7.4 to 1, deep green on light 6.2 to 1 | brand-directions/dog/brand.html b4 |
| Display type | Grandstander 600 to 700, loaded 500 to 800. Soft, slightly uneven curves with a ballpark bounce | brand-directions/dog/system.md s1; brand-directions/dog/kit-skin.js fonts |
| Body type | Commissioner 400 to 700, steady at 14 to 16 px, has the rupee sign | brand-directions/dog/system.md s1 |
| Hand type | Shantell Sans, books only, never in the product | brand-directions/dog/system.md s1 |
| Scale | Display 50, 32, 23. Body 16, 14, 12. One display weight per surface. Prices in the body face | brand-directions/dog/system.md s1 |
| Radius and depth | 18 px, small 11 px. Shadow 0 8px 24px at 30 percent on dark, 10 percent on light | brand-directions/dog/kit-skin.js tokens |
| Motifs | The felt plate, a green disc 8 px right and 6 px down behind Fetch, 20 percent on dark and 38 percent on light, books only. The throw arc, a dashed curve 2 on 13 with round caps, the only divider. The grass line, two tufts, never more | brand-directions/dog/system.md s1; brand-directions/dog/brand.html b4 |
| Layout | Pages are a yard, not a grid of cards: one big drawing, one strong line, then the detail. Fetch sits at the edge looking in | brand-directions/dog/brand.html b4 |
| Mark | Fetch's head: two green ears, the scruff, the tongue out. Carries its own ink outline on light and dark | brand-directions/dog/brand.html b4 |
| Wordmark | A dashed slot wherever the product name goes. The lockup puts the head left of the wordmark. Clear space is not set | brand-directions/book/content/f.js f-4.logo |
Product tokens, from the kit skin
| Token | Dark | Light | Source |
|---|---|---|---|
| bg | #111410 | #f6f6f2 | brand-directions/dog/kit-skin.js tokens |
| surface | #191d17 | #ffffff | brand-directions/dog/kit-skin.js tokens |
| surface2 | #22271f | #eeeee8 | brand-directions/dog/kit-skin.js tokens |
| ink | #f3f5ee | #16180f | brand-directions/dog/kit-skin.js tokens |
| muted | #a7ad9f | #5a5e54 | brand-directions/dog/kit-skin.js tokens |
| line | #2d3329 | #e0e0d8 | brand-directions/dog/kit-skin.js tokens |
| hero | #aee32f | #aee32f | brand-directions/dog/kit-skin.js tokens |
| heroInk | #16180f | #16180f | brand-directions/dog/kit-skin.js tokens |
| focus | #c6f05a | #446605 | brand-directions/dog/kit-skin.js tokens |
Tomorrow
| Item | Version | Tag |
|---|---|---|
| The product stays dark first, quiet and photographic. The brand's photos carry the colour and are never tinted | v1 | Stays |
| Today's tokens are replaced by Fetch's product tokens above, dark and light | v1 | Changes |
| Green #aee32f on the main button, focus, the active tab and Fetch only. Never two owned colours on a screen | v1 | New |
| Inter, SF Pro and Caveat give way to Grandstander for display and Commissioner for every control. Shantell Sans never enters the product | v1 | Changes |
| The five area colours stay as small tags and filters, never on Fetch, never a page colour | v1 | Stays |
| The area faces stop being characters. One prop per area appears beside the tag only | v1 | Changes |
| brew-mark.svg and the old home screen title give way to Fetch's head and the wordmark slot, then the chosen name | v1 | Goes |
| App icon, favicon and avatar use char-mark.svg, and char-mark-16.svg at 16 px | v1 | New |
| The felt plate, throw arc and grass line stay in books, site and marketing. The product uses the throw arc as a divider at most | v1 | New |
| A doer prop and a reporter prop join the illustration set, same outline and colours | v2 and v3 | New |
How we do it
- Theme from dog/kit-skin.js only. Never hand pick a colour on a screen.
- Text that must be green on light uses #446605. Text on green is always ink #16180f.
- Check every new pair for contrast before shipping. Body text at least 4.5 to 1.
- A founder photo sits untouched: no tint, no overlay in green, no Fetch on top.
- Put a dashed wordmark slot wherever the name goes. Never type the old name or a made up name without a Sample label.
- Load fonts with fallbacks:
<link href="https://fonts.googleapis.com/css2?family=Grandstander:wght@500..800&family=Commissioner:wght@400..700&display=swap" rel="stylesheet">
Numbers
| Metric | Definition | Where measured | Status |
|---|---|---|---|
| Contrast pass rate | Share of text and colour pairs on product screens at or above 4.5 to 1 | Screen kit audit in both themes | Proposed |
| Owned colour discipline | Screens where green appears outside button, focus, active tab and Fetch | Screen kit audit | Proposed, target zero |
| Old name strings | Visible strings with the old product name left in the front end | A grep of brew public | Proposed |
Open
- What is the clear space around the lockup? Proposal: one ear width on every side, matching how the other directions set it by a body part.
- Should the product light theme use the kraft book colours or the neutral kit light set? Proposal: keep the neutral kit set in the product and kraft for books and marketing, as the system file says.
- When the name is picked, which face sets the wordmark? Proposal: Grandstander at 700, so the name and the headings share one voice.