{ "id": "4.11", "title": "Visual identity", "department": "Brand", "department_slug": "brand", "direction": { "id": "dog", "name": "Fetch" }, "branded": true, "status": "draft", "owner": "Param", "last_verified": "2026-10-26", "holds": "Logo and wordmark slot, colour, type, photography, illustration", "urls": { "html": "https://handbook.joinsquareup.com/brand/visual-identity/dog", "markdown": "https://handbook.joinsquareup.com/brand/visual-identity/dog.md", "json": "https://handbook.joinsquareup.com/brand/visual-identity/dog.json" }, "other_directions": [ { "id": "bee", "name": "Buzz", "json": "https://handbook.joinsquareup.com/brand/visual-identity/bee.json" }, { "id": "raccoon", "name": "Scoop", "json": "https://handbook.joinsquareup.com/brand/visual-identity/raccoon.json" }, { "id": "octopus", "name": "Ocho", "json": "https://handbook.joinsquareup.com/brand/visual-identity/octopus.json" }, { "id": "cooker", "name": "Seeti", "json": "https://handbook.joinsquareup.com/brand/visual-identity/cooker.json" } ], "tldr": { "headline": "Fetch's look: tennis ball green, a quiet dark yard, photos in charge", "points": [ { "icon": "spark", "text": "One owned colour, tennis ball green #aee32f, on the main button, focus, active tab and Fetch." }, { "icon": "eye", "text": "The brand's own photos carry the colour and are never tinted or covered." }, { "icon": "book", "text": "Grandstander for display, Commissioner for every control, never Shantell Sans in the product." }, { "icon": "check", "text": "Ink on green holds 11.8 to 1, so the main button reads clearly." }, { "icon": "flag", "text": "A dashed wordmark slot stays wherever the name goes, until it is picked." } ], "stat": { "value": "11.8", "label": "contrast, ink on green" }, "decide": "Clear space round the lockup: one ear width on every side?", "mood": "building" }, "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" ], "open_questions": [ "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." ], "parts": { "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\n\n| Part | What it is | Source |\n|---|---|---|\n| Look | Dark, quiet, photographic. The brand's own pictures carry the colour | [src: brand-directions/BRIEF.md section 2] |\n| Dark tokens | bg #0a0a0a, card #1b1b1b, surface #232323, fg #fafafa, fg-2 #a3a3a3 | [src: brew/public/feed-system.css:10-12] |\n| Light tokens | bg #f6f6f6, card #ffffff, surface #f2f2f2, fg #0a0a0a | [src: brew/public/feed-system.css:44-46] |\n| Body font | SF Pro Text, then Inter | [src: brew/public/feed-system.css:31] |\n| Hand font | Caveat, for margin notes | [src: brew/public/feed-system.css:32, 262] |\n| Fonts loaded | Caveat and Inter from Google Fonts | [src: brew/public/index.html:6] |\n| Mark | brew-mark.svg as the favicon, and the home screen title still says the old name | [src: brew/public/index.html:1] |\n| 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] |\n\n### Fetch's identity, in the direction files\n\n| Part | Value | Source |\n|---|---|---|\n| 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] |\n| Character colours | Coat #fff4dc, ink #16180f, tongue #ff9a85 for the tongue only | [src: brand-directions/dog/art.html a1] |\n| 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] |\n| 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] |\n| 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] |\n| Body type | Commissioner 400 to 700, steady at 14 to 16 px, has the rupee sign | [src: brand-directions/dog/system.md s1] |\n| Hand type | Shantell Sans, books only, never in the product | [src: brand-directions/dog/system.md s1] |\n| 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] |\n| 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] |\n| 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] |\n| 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] |\n| 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] |\n| 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] |\n\n### Product tokens, from the kit skin\n\n| Token | Dark | Light | Source |\n|---|---|---|---|\n| bg | #111410 | #f6f6f2 | [src: brand-directions/dog/kit-skin.js tokens] |\n| surface | #191d17 | #ffffff | [src: brand-directions/dog/kit-skin.js tokens] |\n| surface2 | #22271f | #eeeee8 | [src: brand-directions/dog/kit-skin.js tokens] |\n| ink | #f3f5ee | #16180f | [src: brand-directions/dog/kit-skin.js tokens] |\n| muted | #a7ad9f | #5a5e54 | [src: brand-directions/dog/kit-skin.js tokens] |\n| line | #2d3329 | #e0e0d8 | [src: brand-directions/dog/kit-skin.js tokens] |\n| hero | #aee32f | #aee32f | [src: brand-directions/dog/kit-skin.js tokens] |\n| heroInk | #16180f | #16180f | [src: brand-directions/dog/kit-skin.js tokens] |\n| focus | #c6f05a | #446605 | [src: brand-directions/dog/kit-skin.js tokens] |", "Tomorrow": "| Item | Version | Tag |\n|---|---|---|\n| The product stays dark first, quiet and photographic. The brand's photos carry the colour and are never tinted | v1 | Stays |\n| Today's tokens are replaced by Fetch's product tokens above, dark and light | v1 | Changes |\n| Green #aee32f on the main button, focus, the active tab and Fetch only. Never two owned colours on a screen | v1 | New |\n| Inter, SF Pro and Caveat give way to Grandstander for display and Commissioner for every control. Shantell Sans never enters the product | v1 | Changes |\n| The five area colours stay as small tags and filters, never on Fetch, never a page colour | v1 | Stays |\n| The area faces stop being characters. One prop per area appears beside the tag only | v1 | Changes |\n| 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 |\n| App icon, favicon and avatar use char-mark.svg, and char-mark-16.svg at 16 px | v1 | New |\n| 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 |\n| 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.\n2. Text that must be green on light uses #446605. Text on green is always ink #16180f.\n3. Check every new pair for contrast before shipping. Body text at least 4.5 to 1.\n4. A founder photo sits untouched: no tint, no overlay in green, no Fetch on top.\n5. Put a dashed wordmark slot wherever the name goes. Never type the old name or a made up name without a Sample label.\n6. Load fonts with fallbacks:\n\n```html\n\n```", "Numbers": "| Metric | Definition | Where measured | Status |\n|---|---|---|---|\n| 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 |\n| Owned colour discipline | Screens where green appears outside button, focus, active tab and Fetch | Screen kit audit | Proposed, target zero |\n| 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.\n2. 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.\n3. When the name is picked, which face sets the wordmark? Proposal: Grandstander at 700, so the name and the headings share one voice." } }