--- id: "4.11" title: "Visual identity, Fetch" dept: brand status: draft owner: Param branded: true direction: dog last_verified: '2026-10-26' sources: - "brew origin/main a559de6: public/feed-system.css:10-65, 188-191; public/index.html:1, 6" - "brand-directions/dog/system.md s1, s4" - "brand-directions/dog/brand.html b4" - "brand-directions/dog/art.html a1" - "brand-directions/dog/kit-skin.js tokens" - "brand-directions/docs2/data/dirs.json, entry dog" - "brand-directions/book/content/f.js f-4.colour, f-4.type, f-4.print, f-4.logo" - "brand-directions/BRIEF.md sections 2, 3.8" - "memory brand-directions-2026-10-25" --- # Visual identity, Fetch ## 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 | [src: brand-directions/BRIEF.md section 2] | | Dark tokens | bg #0a0a0a, card #1b1b1b, surface #232323, fg #fafafa, fg-2 #a3a3a3 | [src: brew/public/feed-system.css:10-12] | | Light tokens | bg #f6f6f6, card #ffffff, surface #f2f2f2, fg #0a0a0a | [src: brew/public/feed-system.css:44-46] | | Body font | SF Pro Text, then Inter | [src: brew/public/feed-system.css:31] | | Hand font | Caveat, for margin notes | [src: brew/public/feed-system.css:32, 262] | | Fonts loaded | Caveat and Inter from Google Fonts | [src: brew/public/index.html:6] | | Mark | brew-mark.svg as the favicon, and the home screen title still says the old name | [src: 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 | [src: 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 | [src: brand-directions/dog/system.md s1] | | Character colours | Coat #fff4dc, ink #16180f, tongue #ff9a85 for the tongue only | [src: 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 | [src: 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 | [src: brand-directions/dog/brand.html b4] | | Display type | Grandstander 600 to 700, loaded 500 to 800. Soft, slightly uneven curves with a ballpark bounce | [src: 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 | [src: brand-directions/dog/system.md s1] | | Hand type | Shantell Sans, books only, never in the product | [src: 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 | [src: 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 | [src: 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 | [src: 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 | [src: 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 | [src: 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 | [src: brand-directions/book/content/f.js f-4.logo] | ### Product tokens, from the kit skin | Token | Dark | Light | Source | |---|---|---|---| | bg | #111410 | #f6f6f2 | [src: brand-directions/dog/kit-skin.js tokens] | | surface | #191d17 | #ffffff | [src: brand-directions/dog/kit-skin.js tokens] | | surface2 | #22271f | #eeeee8 | [src: brand-directions/dog/kit-skin.js tokens] | | ink | #f3f5ee | #16180f | [src: brand-directions/dog/kit-skin.js tokens] | | muted | #a7ad9f | #5a5e54 | [src: brand-directions/dog/kit-skin.js tokens] | | line | #2d3329 | #e0e0d8 | [src: brand-directions/dog/kit-skin.js tokens] | | hero | #aee32f | #aee32f | [src: brand-directions/dog/kit-skin.js tokens] | | heroInk | #16180f | #16180f | [src: brand-directions/dog/kit-skin.js tokens] | | focus | #c6f05a | #446605 | [src: 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 1. Theme from dog/kit-skin.js only. Never hand pick a colour on a screen. 2. Text that must be green on light uses #446605. Text on green is always ink #16180f. 3. Check every new pair for contrast before shipping. Body text at least 4.5 to 1. 4. A founder photo sits untouched: no tint, no overlay in green, no Fetch on top. 5. Put a dashed wordmark slot wherever the name goes. Never type the old name or a made up name without a Sample label. 6. Load fonts with fallbacks: ```html ``` ## 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 1. 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. 2. 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. 3. When the name is picked, which face sets the wordmark? Proposal: Grandstander at 700, so the name and the headings share one voice.