{ "$schema": "https://design-tokens.github.io/community-group/format/", "$description": "Garment Printer canonical brand tokens. Single source of truth for color, typography, spacing, logo, voice, and skin. Consumed by the Shopify theme (theme/assets/tokens.css), the brand-kit repo (Richard), the CoS agent (Jon), and any future design / marketing surface. Format: W3C Design Tokens Community Group spec.", "$extensions": { "gp": { "version": "1.0.1", "status": "FINAL — every token below is locked. No pending decisions in this document. Open Fern feedback items (category taxonomy labels, etc.) are tracked in audit/feedback-2026-06-03-fern-brianna-punch-list.md, not here.", "finalizedOn": "2026-06-05", "lastUpdated": "2026-06-08", "changelog": { "1.0.1": "Added color.slate.accent-on-dark (#9DB4D4) — canonical on-navy accent. Locked per Richard 2026-06-08 (Slack #announcements thread under v1.0.0 announcement).", "1.0.0": "Initial finalize — color / typography / spacing / layout / logo / voice / category / assets / skin all locked." }, "owner": "Wally Vu · wally@thecurative.co", "client": "Fernando 'Fern' Padilla · Garment Printer · Santa Fe Springs, CA", "consumers": [ "garment-printer/website · theme/assets/tokens.css + theme/layout/theme.liquid", "garment-printer/harness · CoS agent (Jon)", "garment-printer/brand-kit · marketing kit (Richard)", "any new client deliverable touching GP brand" ], "history": "Pre-finalize exploration archived in brief/archive/2026-06-05-pre-finalize/ — Eucalyptus Cool palette, four direction explorations (Foundry / Instrument / Precision V1+V2 / Heritage), and logo polish A/B/C/D + kerning 1-5 review docs. Do not reference those as canonical." } }, "color": { "$description": "Precision V2 Light palette. Light-mode dominant: navy chrome (header + footer) frames white content.", "navy": { "heritage": { "$value": "#1B365D", "$type": "color", "$description": "Primary accent. Links, button hover, accent rules, primary icons. 12.12:1 AAA on white.", "$extensions": { "gp": { "contrast": { "onWhite": "12.12:1 AAA" } } } }, "deep": { "$value": "#0B2545", "$type": "color", "$description": "Primary ink + primary button fill + accent-ink hover. 15.39:1 AAA on white.", "$extensions": { "gp": { "contrast": { "onWhite": "15.39:1 AAA" } } } }, "gradient": { "$value": "linear-gradient(180deg, #0B2545 0%, #1B365D 100%)", "$type": "gradient", "$description": "Signature gradient. Header chrome, footer, deck closer surfaces. Always vertical, deep → heritage top-to-bottom." } }, "slate": { "ink-mute": { "$value": "#5B6470", "$type": "color", "$description": "Body slate on white. The ONLY approved slate for text on light surfaces. 6.00:1 AA.", "$extensions": { "gp": { "contrast": { "onWhite": "6.00:1 AA" } } } }, "muted": { "$value": "#8E96A0", "$type": "color", "$description": "Dark-canvas slate. 2.99:1 on white — fails AA — must NEVER appear on white grounds. 5.16:1 AA on deep navy.", "$extensions": { "gp": { "contrast": { "onWhite": "2.99:1 FAIL", "onDeepNavy": "5.16:1 AA" }, "rule": "Dark-canvas only. Never on white." } } }, "accent-on-dark": { "$value": "#9DB4D4", "$type": "color", "$description": "On-navy accent. Cool blue tint derived from the navy hue — reads as a real accent, not just a lighter neutral. Mirrors the role color.navy.heritage plays on light grounds. 7.91:1 AAA on navy.deep. Use for accent text, highlights, callouts, and emphasis on navy / gradient surfaces. Locked v1.0.1 per Richard 2026-06-08.", "$extensions": { "gp": { "contrast": { "onDeepNavy": "7.91:1 AAA" }, "rule": "On-dark surfaces only. Never on white grounds (won't carry enough weight).", "backPocket": "A softer companion (#C4D2E6, 10.59:1 AAA on navy.deep) is available as a future 'accent-soft' if we ever want a two-tier on-dark palette. Not added now — single-token is sufficient." } } } }, "ground": { "white": { "$value": "#FFFFFF", "$type": "color", "$description": "Default content background." }, "warm": { "$value": "#F7F8FA", "$type": "color", "$description": "Off-white section background." }, "edge": { "$value": "#ECEEF1", "$type": "color", "$description": "Aluminum tint. Dividers, edge surfaces, empty-state fills." } }, "hairline": { "default": { "$value": "#D6D9DD", "$type": "color", "$description": "Aluminum hairline. Card borders, section dividers." }, "soft": { "$value": "#E8EAED", "$type": "color", "$description": "Softer hairline for nested borders." } }, "on-ink": { "$value": "#FFFFFF", "$type": "color", "$description": "Text/icon color on navy surfaces." } }, "typography": { "$description": "Funnel family — display + sans + mono variants. Loaded via Google Fonts.", "family": { "display": { "$value": "'Funnel Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", "$type": "fontFamily", "$description": "Headlines, hero copy, wordmark, section titles." }, "text": { "$value": "'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", "$type": "fontFamily", "$description": "Body, paragraphs, UI text, button labels." }, "mono": { "$value": "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace", "$type": "fontFamily", "$description": "Eyebrows, SKU labels, specs. NEVER paragraph text or customer-facing dimensional specs.", "$extensions": { "gp": { "rule": "Eyebrows + labels + SKUs only. Never customer-facing dimensional specs (e.g., '2.13:1 · 1920×900' must not appear in published copy)." } } } }, "weight": { "regular": { "$value": 400, "$type": "fontWeight" }, "medium": { "$value": 500, "$type": "fontWeight" }, "semibold": { "$value": 600, "$type": "fontWeight" }, "bold": { "$value": 700, "$type": "fontWeight" }, "extrabold": { "$value": 800, "$type": "fontWeight", "$description": "Wordmark only." } }, "lineHeight": { "tight": { "$value": 0.95, "$type": "number", "$description": "Display only." }, "snug": { "$value": 1.1, "$type": "number", "$description": "Large headings." }, "normal": { "$value": 1.2, "$type": "number", "$description": "Small headings, labels." }, "reading": { "$value": 1.55, "$type": "number", "$description": "Body text." }, "loose": { "$value": 1.65, "$type": "number", "$description": "Mono / code." } }, "tracking": { "display": { "$value": "-0.028em", "$type": "dimension" }, "heading": { "$value": "-0.025em", "$type": "dimension" }, "tight": { "$value": "-0.02em", "$type": "dimension" }, "body": { "$value": "0", "$type": "dimension" }, "caps": { "$value": "0.14em", "$type": "dimension" }, "mono": { "$value": "0", "$type": "dimension" } }, "size": { "$description": "Tier 2 — semantic typography roles. Section CSS references these, not raw families/sizes.", "display-xl": { "$value": "clamp(48px, 5vw, 80px)", "$type": "dimension", "$description": "Hero statements." }, "display-lg": { "$value": "clamp(36px, 4vw, 56px)", "$type": "dimension", "$description": "Marketing headlines." }, "heading-xl": { "$value": "clamp(28px, 3vw, 40px)", "$type": "dimension", "$description": "Section titles." }, "heading-lg": { "$value": "clamp(22px, 2.5vw, 32px)", "$type": "dimension", "$description": "Card heads." }, "heading-md": { "$value": "20px", "$type": "dimension" }, "heading-sm": { "$value": "18px", "$type": "dimension" }, "body-lg": { "$value": "18px", "$type": "dimension" }, "body-md": { "$value": "16px", "$type": "dimension" }, "body-sm": { "$value": "14px", "$type": "dimension" }, "body-xs": { "$value": "12.5px", "$type": "dimension" }, "label-lg": { "$value": "14px", "$type": "dimension" }, "label-md": { "$value": "12px", "$type": "dimension" }, "label-sm": { "$value": "10.5px", "$type": "dimension" }, "mono-md": { "$value": "13px", "$type": "dimension" }, "mono-sm": { "$value": "11px", "$type": "dimension" } }, "rule": { "smallSlateWeight": { "$value": "600", "$type": "fontWeight", "$description": "Anywhere slate.ink-mute (#5B6470) sits at body-sm (14px) or smaller, use semibold weight (600). Compensates for slate's lower visual weight on white grounds — gives the gray enough presence without changing the hue." } } }, "spacing": { "$description": "8px base scale. Tier 1 primitive — Tier 2 layout roles compose from these.", "b1": { "$value": "8px", "$type": "dimension" }, "b2": { "$value": "16px", "$type": "dimension" }, "b3": { "$value": "24px", "$type": "dimension" }, "b4": { "$value": "32px", "$type": "dimension" }, "b5": { "$value": "40px", "$type": "dimension" }, "b6": { "$value": "56px", "$type": "dimension" }, "b7": { "$value": "72px", "$type": "dimension" }, "b8": { "$value": "96px", "$type": "dimension" }, "b9": { "$value": "128px", "$type": "dimension" } }, "layout": { "pageMax": { "$value": "1280px", "$type": "dimension", "$description": "Content max-width." }, "pagePad": { "$value": "40px", "$type": "dimension", "$description": "Horizontal page padding." }, "gutter": { "$value": "24px", "$type": "dimension", "$description": "Grid gutter." } }, "logo": { "$description": "Single-stroke 'g' mark + lowercase Funnel Display 800 wordmark. Single canonical form for both.", "wordmark": { "canonicalForm": { "$value": "garmentprinter.com", "$type": "string", "$description": "Wordmark logo lockup. Single word, all lowercase, with the .com suffix." }, "family": { "$value": "{typography.family.display}", "$type": "fontFamily" }, "weight": { "$value": "{typography.weight.extrabold}", "$type": "fontWeight" }, "letterSpacing": { "$value": "0", "$type": "dimension", "$description": "Option #4 Open. Resolves the R+M merge in 'garment' without going looser than necessary." }, "color": { "onLight": { "$value": "{color.navy.deep}", "$type": "color" }, "onDark": { "$value": "{color.on-ink}", "$type": "color", "$description": "White on navy grounds." } } }, "mark": { "shape": { "$value": "single-stroke-curl", "$type": "string", "$description": "Open-curl 'g' shape with inner solid tongue. Two paths: outer stroked curl + inner filled tongue. Both currentColor." }, "viewBox": { "$value": "0 0 390.734 382.376", "$type": "string" }, "strokeWidth": { "$value": 14, "$type": "number", "$description": "Option B. +40% over baseline. Used at every scale on both light and dark backgrounds. Note: white-on-navy reads slightly bolder than dark-on-white due to optical illusion — accepted as-is rather than maintaining per-context strokes." }, "asset": { "$value": "assets/logos/gp-mark.svg", "$type": "string", "$description": "Canonical export. The Shopify theme also inlines this mark as a in theme/layout/theme.liquid for sprite-based references." } }, "domainCanonicalForm": { "$value": "garmentprinter.com", "$type": "string", "$description": "Always rendered as one word. Never 'garment printer' with a space. The .com is the disambiguator from other Garment Printer entities." } }, "voice": { "$description": "Tone, copy posture, customer framing. Applies to every customer-facing surface.", "tagline": { "$value": "Amazing apparel decorators aren't born, they're trained.", "$type": "string" }, "positioning": { "$value": "Education-heavy sales funnel for apparel decorating equipment. The workshop is the front door; the equipment is the destination.", "$type": "string" }, "rules": { "customerCentric": { "$value": "Frame benefits from the customer's POV — 'what this does for you' — not from GP's POV ('30+ years, 2 patents, 6 modes').", "$type": "string" }, "noCodeFeel": { "$value": "Never expose dimensional/aspect-ratio/spec mono labels in customer-facing surfaces. Mono is for SKUs and eyebrows only.", "$type": "string" }, "clientComms": { "$value": "Plain text. No filler. No 'milestone' framing. First names. Sign as 'Gizmo / AI Assistant, Robot Friends / On behalf of Wally Vu'.", "$type": "string" }, "competitivePosture": { "$value": "Don't anchor on supply-line counts. Anchor on local availability, Saturday hours, authorized-dealer breadth, and superstore positioning.", "$type": "string" } } }, "category": { "$description": "Top-level taxonomy. Refinement of category labels is content/IA work tracked in audit/feedback-2026-06-03-fern-brianna-punch-list.md §5 — the structure below is the current canonical state.", "equipment": { "$value": ["DTG", "DTF", "Embroidery", "UV / Specialty", "Wide-format", "Accessories", "Used Equipment"], "$type": "string" }, "supplies": { "$value": ["Inks", "Embroidery", "Heat-Transfer Vinyl", "Cutaway / Backing", "Pretreatment", "Maintenance Supplies", "Parts", "Specialty DTF"], "$type": "string" }, "removed": { "$value": ["Roland (no longer distributing)", "Worx Inks (do not stock)", "Eco-solvent (do not sell)"], "$type": "string" } }, "assets": { "$description": "Canonical asset paths within the website repo.", "logo": { "mark": { "$value": "assets/logos/gp-mark.svg", "$type": "string" } }, "vendorLogos": { "brother": { "$value": "assets/logos/brother.svg", "$type": "string" }, "mimaki": { "$value": "assets/logos/mimaki.svg", "$type": "string" }, "sts": { "$value": "assets/logos/sts.svg", "$type": "string" }, "zsk": { "$value": "assets/logos/zsk.png", "$type": "string" }, "coloreel": { "$value": "assets/logos/coloreel.png", "$type": "string" } } }, "skin": { "$description": "Light-mode dominant. Navy chrome (header/footer) frames white content. NO dark-mode content bands.", "mode": { "$value": "light-content + navy-chrome", "$type": "string" }, "chromeBackground": { "$value": "{color.navy.gradient}", "$type": "color" }, "contentBackground": { "$value": "{color.ground.white}", "$type": "color" }, "sectionAltBackground": { "$value": "{color.ground.warm}", "$type": "color" } } }