{ "_generated": "DO NOT EDIT — generated from src/data/brand.ts by scripts/generate-ai-formats.mjs (2026-08-18)", "_provenance": "Canonical copy: https://branding.spectrea.com/brand-contract.json — canon v2.15.0 (2026-08-18). If you are reading a vendored snapshot, it is stale when https://branding.spectrea.com/brand-contract.json reports a higher \"version\"; re-vendor the whole set (brand-contract.json, brand-checklist.md, brand-few-shots.md, brand-agent-rules.md, llms.txt, brand-guide.md) rather than editing this file.", "version": "2.15.0", "lastUpdated": "2026-08-18", "sourceOfTruth": "brand.ts is the canonical brand data. The app renders it; the guide (brand-guide.md), llms.txt, the PDF, and generated assets are derived mirrors. On any conflict, brand.ts wins. Capability claims are anchored to the ratified product vision; every buyer-facing capability claim is checked against the product roadmap before it ships. Execution status is tracked there, never here — this file is the brand, not the release note.", "changeProcess": [ { "step": "Propose", "owner": "Proposer", "detail": "Document the change, the reason, and the impact — with visual mockups where applicable." }, { "step": "Review", "owner": "Lead", "detail": "The relevant lead (Design or Content) reviews and may request revisions; the Brand Lead joins for brand-level changes." }, { "step": "Test", "owner": "Design", "detail": "Apply the change in a staging build and verify it across contexts: light/dark, mobile/desktop, print/digital." }, { "step": "Ratify & version", "owner": "Brand Lead", "detail": "Brand Lead approves. The change lands in src/data/brand.ts with a meta.version bump; brand decisions also get a ratificationLedger entry." }, { "step": "Regenerate & communicate", "owner": "Design + Dev", "detail": "Run npm run generate:all so the guide, contract, agent rules, assets, and PDF follow, then announce in #brand. The durable changelog is the git history of the spectrea-branding repo." } ], "identity": { "name": "Spectrea", "pronunciation": "/spek-TREE-uh/", "tagline": "We connect the dots.", "category": "Composable intelligence platform", "categoryGuard": { "exactNoun": true, "badSubstitutions": [ "composable knowledge platform", "knowledge platform", "knowledge management", "AI assistant", "automation tool" ] }, "categoryRule": "The category noun is exactly \"Composable intelligence platform\" (lowercase in running prose) — never a substitute: \"composable knowledge platform\", \"knowledge platform\", \"knowledge management\", \"AI assistant\", \"automation tool\".", "promise": "Turns scattered information into compounding intelligence", "visualMetaphor": { "hierarchy": "co-primary", "tiebreaker": "Identity and reveal surfaces (logo moments, brand story, launch) lead with the Prism; product and growth surfaces (features, onboarding, roadmap) lead with the Living Network. Neither metaphor is ever \"the secondary\".", "metaphors": [ { "name": "Prism", "role": "Identity / reveal", "description": "Raw information enters, organized insight exits. The \"reveal\" moment — hidden structure made visible." }, { "name": "Living Network", "role": "Product / growth", "description": "A web of connections that grows denser and more intelligent over time. The \"growth\" story." } ], "combined": "The prism is Spectrea's origin (the name). The network is its promise (it grows with you)." } }, "naming": { "neverNames": [ "\"SpectreAI\" (not the name)", "\"Spectre\" / \"Spectra\" (different words — not the name)", "\"spectra\" (missing the e — typo)", "\"Spectrea AI\" as the lead name (AI is not the brand)", "\"SPECTREA\" (all-caps styling)", "\"spectrea\" lowercase in headings or prose (lowercase belongs to the logo wordmark treatment only)", "\"The Spectrea\" (no article)", "Random internal caps (\"SpecTrea\")" ], "ai": { "canonicalNoun": "the assistant", "rule": "Three registers. (1) Homepage/hero narrative: \"your AI\" is sanctioned to match the hero register. (2) Product and trust surfaces: the AI is \"the assistant\" — lowercase, generic; as a first-class feature name it is \"Assistant\" (Title-Case). (3) Technical and architecture writing: \"agent\" is the umbrella term for an accountable AI actor (delegate or standing agent), per the vision taxonomy — the assistant is the delegate shape's product realization. Never \"copilot\" (generic or name), never \"Spectrea AI\" as a name.", "allowedVerbs": [ "suggests", "surfaces", "drafts" ], "forbiddenVerbs": [ "handles it for you", "takes over" ], "verbRule": "The assistant suggests, surfaces, and drafts — it never silently \"handles it for you\" or \"takes over\". Automations act within guardrails the user sets: the user decides what runs on its own and what checks with you first (ratified 2026-07-19, per the vision's governed-autonomy model). Never describe autonomy without naming its guardrail; never use approval-begging framings (\"waiting for your yes\")." }, "companyProduct": { "company": "Matchwise Pte. Ltd.", "product": "Spectrea", "rule": "Matchwise Pte. Ltd. is the legal entity — it appears only where a legal entity is required: contracts, invoices, terms, privacy notices (\"Spectrea is a product of Matchwise Pte. Ltd.\"). Spectrea is the product and brand name on every public surface. Never brand a surface \"Matchwise\"; never combine the two into one name.", "legacy": "Any earlier material using the company name as a product or brand name is superseded; Spectrea is the only product name." } }, "vocabulary": { "formula": "Plain words, real specifics, room to breathe. Tech earns its place by being checkable — shown once, where the reader looks for it.", "attentionRule": "Show the work once, where the reader looks for it. \"Earn the jargon\" governs what may enter the copy — not how often it repeats. One claim, one proof per surface: the mechanism lives one step from the claim (the next sentence, a subhead, an expandable) — never welded to every sentence. If two sentences in a row prove the same claim, cut one. The claim—dash—mechanism shape is a tool, not a rhythm.", "alwaysUse": [ "spectrum", "clarity", "whole", "see", "reveal", "illuminate", "surface", "connect", "compose", "compound", "alive", "transparent" ], "neverUse": [ "AI-powered (overused)", "next-gen", "state-of-the-art", "world-class", "breakthrough", "unprecedented", "game-changer", "revolutionary", "seamless", "cutting-edge", "synergy", "leverage (as verb)", "agentic", "AI-first", "copilot (as generic noun)", "10x", "supercharge", "effortless", "magical" ], "density": "Max two privileged words per paragraph, one \"living\" / \"alive\" per page. If a paragraph survives losing every privileged word, the prose is doing its job — if it collapses without them, rewrite.", "heroOpen": "Open on the outcome, written as a reveal — the moment of new sight. Never open with the mechanism, the pain alone, or a platitude. Ground it next with a specific the reader can check; close by equipping the next step. The gesture adapts to any surface — a problem may set up the reveal, proof may carry the grounding — but the open always lands on the outcome. Exception: graph-native jobs (exploration, visualisation), where the graph is the star and may lead.", "contextShifts": { "buyer": { "label": "On buyer surfaces", "detail": "Hero, case studies, pricing — the open lands on the outcome (heroOpen rule); proof carries the grounding: a named customer, a concrete outcome, or a peer-testable claim. Brand vocabulary decorates; it doesn't carry the opening." }, "product": { "label": "Inside the product", "detail": "Warm up one notch. Warmth comes from specificity, not exclamation points — \"Read. 12 entities, 18 connections added.\" beats \"Upload complete! 🎉\" because the first shows the system paid attention." } }, "onRamp": { "posture": "Outcome-first hero per the canonical heroOpen rule: the hero leads with the entry job and its outcome, written as a reveal. One coined whole-product frame is sanctioned (ratified 2026-07-19): \"the operating system for collective intelligence\" — distinct from generic \"AI OS\", always paired with plain language that carries the meaning. Balance doctrine (ratified 2026-07-19): avoid-list terms are not blacklisted — one may label a segment-matched surface when a plain-language claim carries the meaning in place; never expect it to carry weight with unfamiliar audiences, and never lead a cross-segment hero with it.", "heroExample": "Drop in your docs — get answers that show their sources, and a system that gets sharper every week.", "adopt": [ "permission-aware", "cited answers", "grounded answers", "knowledge graph (exploration surfaces only — the graph stays supporting-cast)" ], "avoid": [ "Work AI", "organizational memory", "AI workspace", "AI OS", "second brain", "ambient agents", "bitemporal", "ontology", "enterprise graph" ], "avoidRule": "Industry terms are not blacklisted or censored: an avoid-list term may label a segment-matched surface when a plain-language claim carries the meaning in place (e.g. \"second brain\" on the individuals page). Do not expect the term to carry weight with unfamiliar audiences; balance it, and never lead a cross-segment hero with it.", "coined": [ "per-viewer truth", "decisions in the graph", "the operating system for collective intelligence" ], "coinRule": "Coin language ONLY for the differentiators no market term names: per-viewer truth, decisions in the graph, and the whole-product frame \"the operating system for collective intelligence\" (ratified 2026-07-19; pair it with plain language — it must not carry the claim alone). Everywhere else, use the market's word where one exists (adopt list) or plain outcome language.", "osFrameExample": { "right": "See everything your organization knows in one connected view — Spectrea is the operating system for collective intelligence: the place where what your team knows connects, compounds, and answers back.", "wrong": "Spectrea: the operating system for collective intelligence.", "why": "The right version opens on the outcome and pairs the frame with plain language that carries the meaning in the same breath. The wrong version asks the frame to carry the claim alone — forbidden by the coinRule — and leads with it, against the on-ramp's outcome-first posture." } } }, "guardrails": { "compoundingClaim": "Use \"compounding intelligence\" only with its defensible mechanism named — provenance, per-viewer access, and the closed loop that feeds outcomes back in. The phrase is contested in-market (noted 2026-07-03); the mechanism, not the slogan, carries the claim.", "antiValues": [ { "never": "Never replaces human judgment", "because": "AI assists, suggests, and surfaces — but you decide. Judgment stays yours: automations act only within guardrails you set, and every AI action is recorded, attributed, and reviewable." }, { "never": "Never leaves anyone behind", "because": "If someone feels lost or excluded, we failed — not them. Every interaction must be understandable at the user's depth." }, { "never": "Never complex or bloated", "because": "Simplicity and composability are sacred. If it needs a consultant, we failed." }, { "never": "Never a black box", "because": "You can always ask \"why?\" and get an answer. Every recommendation, every connection, every automated action is inspectable." } ] }, "color": { "palette": [ { "name": "Graphite", "hex": "#212226", "role": "primary" }, { "name": "Cobalt", "hex": "#4271DF", "role": "accent" }, { "name": "Teal", "hex": "#00B6A0", "role": "accent" }, { "name": "Amber", "hex": "#E19000", "role": "accent" }, { "name": "Rose", "hex": "#F24260", "role": "accent" }, { "name": "Canvas", "hex": "#FDFDFB", "role": "background" }, { "name": "Cloud", "hex": "#F4F4F1", "role": "surface" }, { "name": "Ink", "hex": "#18181C", "role": "text" }, { "name": "Iron", "hex": "#46464B", "role": "body-emphasized" }, { "name": "Slate", "hex": "#6D6D72", "role": "body-secondary" }, { "name": "Pewter", "hex": "#97979E", "role": "muted" } ], "gradient": { "from": "#4271DF", "via": "#00B6A0", "to": "#E19000", "angle": 135 }, "gradients": { "angleDeg": 135, "primary": { "name": "Brand gradient", "stops": [ { "hex": "#4271DF", "at": 0 }, { "hex": "#00B6A0", "at": 0.5 }, { "hex": "#E19000", "at": 1 } ], "css": "linear-gradient(135deg in oklch, #4271DF, #00B6A0, #E19000)", "fallbackCss": "linear-gradient(135deg, #4271DF, #00B6A0, #E19000)", "interpolation": "OKLCH on modern browsers (Chrome 111+ / Safari 16.2+ / Firefox 117+) with the sRGB fallback on older ones — the OKLCH path keeps chroma high through the middle and avoids the muddy olive zone.", "use": "The everyday brand gradient — hero sections, accent bars, marketing headers, dividers, progress indicators." }, "adjacencyRule": "Two-colour gradients (duets) use ADJACENT spectrum pairs only. Skip pairs (Cobalt→Amber direct, Teal→Rose, Cobalt→Rose) break the continuous-spectrum metaphor and are off-brand.", "duets": { "cool": { "name": "Cool Duet", "stops": [ { "hex": "#4271DF", "at": 0 }, { "hex": "#00B6A0", "at": 1 } ], "use": "Intelligence + growth. The resting-state duet — data, technical contexts, and the static S mark. Also the lockup mark's gradient (LogotypeGradient, mark stroke only; the wordmark stays monotone) — never a general-purpose decorative gradient there." }, "balanced": { "name": "Balanced Duet", "stops": [ { "hex": "#00B6A0", "at": 0 }, { "hex": "#6FB884", "at": 0.65 }, { "hex": "#E19000", "at": 1 } ], "bridgeRule": "Must include the #6FB884 intermediate at 65% — without it, teal and amber desaturate into muddy olive.", "use": "Product/ecosystem moments." }, "warm": { "name": "Warm Duet", "stops": [ { "hex": "#E19000", "at": 0 }, { "hex": "#F24260", "at": 1 } ], "use": "Energy + urgency. Marketing, launches, attention moments." } }, "fullSpectrumWithRose": { "name": "Full spectrum with Rose", "stops": [ { "hex": "#4271DF", "at": 0 }, { "hex": "#00B6A0", "at": 0.33 }, { "hex": "#E19000", "at": 0.66 }, { "hex": "#F24260", "at": 1 } ], "use": "All four spectrum colours — peak brand expression only (landing-page heroes, launch moments). Use sparingly; reserving it keeps its impact." }, "useFor": [ "Logo mark background", "Hero section accent bars", "Marketing page headers", "Loading progress bars", "Slide deck title dividers", "Social media profile accents" ], "neverFor": [ "Buttons (use solid Cobalt)", "Text colour (unreadable)", "Body backgrounds (overwhelming)", "Borders or outlines (too busy)", "Small icons or badges", "Repeated elements (it stops being special)" ] }, "system": { "neutrals": { "intro": "A subtle warm tint layered under the spectrum — closes the gap between cold Tailwind grays and the warm accents. Seven tokens, perceptually-uniform in OKLCH L-space from surface to primary text.", "ladderNote": "The seven tokens form an OKLCH-even ladder (ΔL ≈ 0.14 through the body range, with tighter pairs at each end: Canvas↔Cloud and Graphite↔Ink). Slate and Iron exist because the body-text hierarchy needs three working tiers (quiet / body / emphasized) and the old five-token palette had a single ~0.43-wide L gap between Pewter and Graphite with nothing in between.", "tokens": [ { "name": "Canvas", "roleLabel": "Background" }, { "name": "Cloud", "roleLabel": "Elevated surface" }, { "name": "Pewter", "roleLabel": "Whisper muted" }, { "name": "Slate", "roleLabel": "Body secondary" }, { "name": "Iron", "roleLabel": "Emphasized body" }, { "name": "Graphite", "roleLabel": "Dark UI surface" }, { "name": "Ink", "roleLabel": "Primary text / dark bg" } ] }, "accents": [ { "name": "Cobalt", "roleLabel": "Hero / primary", "meaning": "Intelligence, trust, focus. One primary action per section." }, { "name": "Teal", "roleLabel": "Positive / growth", "meaning": "Success, growth, connected status." }, { "name": "Amber", "roleLabel": "Attention", "meaning": "Warnings, pending, confidence." }, { "name": "Rose", "roleLabel": "Urgency / action", "meaning": "Errors, destructive actions, critical alerts." } ], "textHierarchy": [ { "tier": "Primary", "token": "Ink", "use": "Headings, stat values, body emphasis, logo wordmark" }, { "tier": "Emphasized body", "token": "Iron", "use": "Table headers, field labels, key body sentences" }, { "tier": "Body secondary", "token": "Slate", "use": "Descriptions, helper text, card sub-labels, secondary prose" }, { "tier": "Whisper muted", "token": "Pewter", "use": "Supplementary labels only — governed by the Pewter matrix (accessibility.pewterMatrix)" } ], "tailwindMapping": { "note": "The app uses Tailwind utility classes; the Warm Blend tokens are exported into the @theme so the brand names are first-class utilities.", "rows": [ { "tailwind": "text-stone-900, text-stone-800", "token": "text-ink", "note": "primary" }, { "tailwind": "text-stone-700, text-stone-600", "token": "text-iron", "note": "emphasized body" }, { "tailwind": "text-stone-500", "token": "text-slate", "note": "body secondary" }, { "tailwind": "text-stone-400, text-stone-300", "token": "text-pewter", "note": "whisper — never for informational text" }, { "tailwind": "bg-stone-50, bg-stone-100", "token": "bg-cloud", "note": "elevated surface" }, { "tailwind": "bg-stone-800", "token": "bg-ink", "note": "active dark fill (Tier 2 Structural)" }, { "tailwind": "border-stone-*", "token": "keep as-is", "note": "Tailwind stones are the sanctioned border family" }, { "tailwind": "bg-stone-200, bg-stone-300", "token": "keep as-is", "note": "hover / active / press backgrounds, skeleton placeholders" } ] }, "ratio": { "light": [ { "pct": 60, "token": "Canvas", "what": "page background" }, { "pct": 20, "token": "Cloud", "what": "elevated surfaces: cards, sidebars, dropdowns" }, { "pct": 10, "token": "Ink + Pewter", "what": "text and UI" }, { "pct": 10, "token": "Spectrum accents", "what": "semantic moments only" } ], "darkRule": "Same 60/20/10/10 discipline, inverted: 60% Ink · 20% Graphite · 10% Cloud + Mist · 10% spectrum (semantic only). The canvas still dominates; colour still earns its place." }, "tiers": [ { "tier": 1, "name": "Responsive", "carrier": "Cobalt", "rule": "Action-oriented elements — things that trigger an operation. Temporary and reactive: present during hover, press, then settles. Primary buttons, links, CTAs, hovered icons. Focus indication is not a Cobalt job — the dedicated focus ring (brandTokens.focusRing) is accessibility chrome outside the tiers." }, { "tier": 2, "name": "Structural", "carrier": "Ink", "rule": "Persistent state and navigation. Active nav item, selected tab, toggled-on icon, current breadcrumb. Ink keeps the canvas calm while Cobalt stays reserved for action." }, { "tier": 3, "name": "Semantic", "carrier": "spectrum + Pewter", "rule": "The system communicating status. Info (Cobalt), success (Teal), warning (Amber), error (Rose). Never decorative — every appearance carries meaning." } ], "lightDefault": "Spectrea defaults to light. Canvas is the 60% page ground because the Warm Blend system exists to make the spectrum feel inhabited against a warm-tinted white — not to produce a dark-first interface. Marketing, product, and PDF surfaces all ship light-default. Dark is a parallel mode, not the primary register.", "darkRoles": { "intro": "On dark surfaces the role mapping inverts — existing tokens carry more of the weight, with two additions for hierarchy.", "rows": [ { "role": "Page background", "light": "Canvas", "dark": "Ink", "darkModeKey": "bg", "cssVar": "--dark-canvas" }, { "role": "Elevated surface", "light": "Cloud", "dark": "Graphite", "darkModeKey": "surface", "cssVar": "--dark-cloud" }, { "role": "Primary text", "light": "Ink", "dark": "Cloud", "darkModeKey": "text", "cssVar": "--dark-ink" }, { "role": "Muted text", "light": "Pewter", "dark": "Mist", "darkModeKey": "muted", "cssVar": "--dark-mist", "isNew": true }, { "role": "Border / divider", "light": "stone-200", "dark": "Fog", "darkModeKey": "border", "cssVar": "--dark-fog", "isNew": true } ], "whyTwoTokens": "Pewter passes for body text on Ink, but muted text needs to sit above the body hierarchy on dark — Mist is Pewter brightened so secondary still feels secondary without fighting primary text. Fog gives separation without a visible line — lighter than Ink, darker than Graphite, so cards feel edged rather than drawn." }, "accentsOnDark": "Accents carry over unchanged — the brand should read as itself on either surface. Three of four accents pass WCAG AA for normal text on Ink; Cobalt is UI-only at this contrast — for coloured text on Ink use Cobalt Lift." }, "darkMode": { "bg": "#18181C", "surface": "#212226", "text": "#F4F4F1", "muted": "#B0B0B6", "border": "#2E2F35" }, "washes": { "light": [ { "name": "Cobalt Wash", "hex": "#EDF0F8", "accent": "Cobalt", "textOn": "#1E3A8A", "use": "Info alert background, selected row" }, { "name": "Teal Mist", "hex": "#E6F5F3", "accent": "Teal", "textOn": "#0D5E56", "use": "Success toast, positive trend card" }, { "name": "Amber Stone", "hex": "#F5F0E6", "accent": "Amber", "textOn": "#7C4D04", "use": "Warning alert, highlighted callout" }, { "name": "Rose Blush", "hex": "#FDF0F2", "accent": "Rose", "textOn": "#9F1239", "use": "Error message, destructive confirmation" } ], "darkTextRule": "Text on a dark wash is Cloud #F4F4F1; text on a light wash uses that wash's textOn value (or Ink) — never the raw accent.", "dark": [ { "name": "Cobalt Deep", "hex": "#1B2440", "accent": "Cobalt", "use": "Info alert background, selected row (dark)" }, { "name": "Teal Deep", "hex": "#0E2E2A", "accent": "Teal", "use": "Success toast, positive trend card (dark)" }, { "name": "Amber Deep", "hex": "#2E2410", "accent": "Amber", "use": "Warning alert, highlighted callout (dark)" }, { "name": "Rose Deep", "hex": "#2E1218", "accent": "Rose", "use": "Error message, destructive confirmation (dark)" } ] }, "lifts": [ { "name": "Cobalt Lift", "hex": "#7A9AEF", "use": "Inline links inside dark long-form text blocks" }, { "name": "Teal Lift", "hex": "#3DD3BF", "use": "Coloured body copy on dark surfaces" }, { "name": "Amber Lift", "hex": "#F2AE40", "use": "Coloured body copy on dark surfaces" }, { "name": "Rose Lift", "hex": "#F97587", "use": "Coloured body copy on dark surfaces" } ], "accentText": [ { "name": "Teal text", "hex": "#007D6E", "use": "Success/correct headings, privileged-word chips, positive labels on light surfaces (4.58–5.05:1; APCA Lc 68–74)" }, { "name": "Rose text", "hex": "#BA3249", "use": "Error/incorrect headings and labels on light surfaces (5.24–5.77:1) — names the tone the guide already shipped" } ] }, "typography": { "heading": { "family": "Albert Sans", "fallback": "sans-serif", "css": "'Albert Sans', sans-serif", "weights": { "semibold": 600, "bold": 700 }, "defaultWeight": 600, "usage": "Page titles, section headings, card titles, nav labels, stat values. The brand's typographic signature — distinctive letterforms make Spectrea recognizable." }, "body": { "family": "Lexend", "fallback": "'Inter', sans-serif", "css": "'Lexend', 'Inter', sans-serif", "weights": { "light": 300, "regular": 400, "medium": 500, "semibold": 600 }, "defaultWeight": 400, "usage": "Body text, UI labels, descriptions, form labels, tooltips, buttons. 300 for oversized display numerals, 400 for body, 500 for emphasis (buttons, nav, labels), 600 for overlines and section labels. Optimized for reading fluency — reduces visual crowding in dense knowledge interfaces." }, "mono": { "family": "JetBrains Mono", "fallback": "monospace", "css": "'JetBrains Mono', monospace", "weights": { "regular": 400 }, "defaultWeight": 400, "usage": "Code snippets, type labels, trace details, data values, confidence scores, technical identifiers." }, "minSizes": "Body and prose: 16 px preferred, 14 px minimum. Captions and secondary labels: 12 px minimum. 10 px is permitted only for uppercase-tracked overlines, numeric badges, and metadata chips where the letter-spacing and weight restore legibility. Below 10 px is specimen-only (mini-preview UI illustrating another system at small scale) and must never appear in shipped production surfaces.", "scale": [ { "name": "Display", "px": 48, "lineHeight": 1.1, "weight": 600, "use": "Hero headlines, landing-page titles" }, { "name": "H1", "px": 36, "lineHeight": 1.2, "weight": 600, "use": "Page titles" }, { "name": "H2", "px": 30, "lineHeight": 1.25, "weight": 600, "use": "Major section headings" }, { "name": "H3", "px": 24, "lineHeight": 1.3, "weight": 600, "use": "Sub-section headings, card titles" }, { "name": "H4", "px": 20, "lineHeight": 1.4, "weight": 600, "use": "Minor headings, dialog titles" }, { "name": "H5", "px": 18, "lineHeight": 1.4, "weight": 600, "use": "Sidebar section titles" }, { "name": "Body LG", "px": 18, "lineHeight": 1.6, "weight": 400, "use": "Lead paragraphs" }, { "name": "Body", "px": 16, "lineHeight": 1.6, "weight": 400, "use": "Default body text" }, { "name": "Body SM", "px": 14, "lineHeight": 1.5, "weight": 400, "use": "Secondary text, table cells, form inputs" }, { "name": "Caption", "px": 12, "lineHeight": 1.5, "weight": 500, "use": "Labels, timestamps, helper text" }, { "name": "Overline", "px": 12, "lineHeight": 1.5, "weight": 600, "use": "Section labels (uppercase + 0.05em tracking)" }, { "name": "Code", "px": 14, "lineHeight": 1.5, "weight": 400, "use": "Inline code, data values, type labels (JetBrains Mono)" }, { "name": "Code SM", "px": 12, "lineHeight": 1.5, "weight": 400, "use": "Trace details, technical metadata (JetBrains Mono)" } ], "responsive": { "note": "Desktop (1024+) / Tablet (640–1023) / Mobile (<640)", "rows": [ { "name": "Display", "desktop": 48, "tablet": 36, "mobile": 30 }, { "name": "H1", "desktop": 36, "tablet": 30, "mobile": 24 }, { "name": "H2", "desktop": 30, "tablet": 24, "mobile": 20 }, { "name": "H3", "desktop": 24, "tablet": 20, "mobile": 18 } ], "unchanged": "Body / Body SM: unchanged across breakpoints." } }, "tokens": { "radii": [ { "token": "sm", "px": 4, "tailwind": "rounded", "use": "Tags, badges, inline code" }, { "token": "md", "px": 6, "tailwind": "rounded-md", "use": "Compact buttons, small controls" }, { "token": "lg", "px": 8, "tailwind": "rounded-lg", "use": "Buttons, inputs, dropdowns" }, { "token": "xl", "px": 12, "tailwind": "rounded-xl", "use": "Cards, panels, modals (default container)" }, { "token": "2xl", "px": 16, "tailwind": "rounded-2xl", "use": "Hero sections, large feature cards" }, { "token": "full", "px": 9999, "tailwind": "rounded-full", "use": "Avatars, spectrum tags, toggles" } ], "spacing": { "baseUnit": 4, "rule": "Every spacing value is a multiple of 4 px. Fine inline elements (badges, compact controls) may use 2 px increments (6 px, 10 px); never arbitrary values like 5 px, 7 px, or 15 px.", "scale": [ { "token": "2xs", "px": 4, "tailwind": "p-1", "use": "Tight inline, icon gaps" }, { "token": "xs", "px": 8, "tailwind": "p-2", "use": "Input / badge padding, compact gaps" }, { "token": "sm", "px": 12, "tailwind": "p-3", "use": "Compact card padding, list-item gaps" }, { "token": "md", "px": 16, "tailwind": "p-4", "use": "Default content gap, section padding" }, { "token": "lg", "px": 20, "tailwind": "p-5", "use": "Default card padding, modal padding" }, { "token": "xl", "px": 24, "tailwind": "p-6", "use": "Section spacing, form-field gaps" }, { "token": "2xl", "px": 32, "tailwind": "p-8", "use": "Major section breaks" }, { "token": "3xl", "px": 48, "tailwind": "p-12", "use": "Page top padding, hero spacing" } ] }, "elevation": [ { "level": "Base", "zIndex": 0, "shadow": "none", "use": "Page content, cards, sections" }, { "level": "Raised", "zIndex": 10, "shadow": "shadow-sm", "use": "Sticky headers, toolbars" }, { "level": "Dropdown", "zIndex": 20, "shadow": "shadow-md", "use": "Dropdowns, popovers, tooltips" }, { "level": "Modal", "zIndex": 30, "shadow": "shadow-lg", "use": "Modals, dialogs, slide-overs" }, { "level": "Overlay", "zIndex": 40, "shadow": "shadow-xl", "use": "Modal backdrops, full-screen overlays" }, { "level": "Toast", "zIndex": 50, "shadow": "shadow-lg", "use": "Notifications, toasts" } ], "motion": { "durationsMs": { "micro": 100, "standard": 150, "comfortable": 200, "deliberate": 300, "arrival": 400, "formation": 300, "spectrumSweep": 600 }, "easings": { "easeOut": { "css": "cubic-bezier(0, 0, 0.2, 1)", "use": "Default — things entering or settling" }, "easeInOut": { "css": "cubic-bezier(0.4, 0, 0.2, 1)", "use": "Back-and-forth movements, continuous animations" }, "elasticSettle": { "css": "cubic-bezier(0.34, 1.56, 0.64, 1)", "use": "Arrival primitive — scale-in with soft elastic settle" }, "never": "linear (feels mechanical) or ease-in alone (feels like something is wrong)" } }, "buttonStates": { "light": { "cobalt": { "base": "#4271DF", "hover": "#3A63C4", "active": "#3255A7" }, "rose": { "base": "#F24260", "hover": "#D63B55", "active": "#BA3249" }, "teal": { "base": "#00B6A0", "hover": "#009E8A", "active": "#008775" }, "amber": { "base": "#E19000", "hover": "#C58200", "active": "#A86E00" }, "secondary": { "bg": "#F4F4F1", "text": "#18181C" } }, "dark": { "rule": "On dark surfaces the button lifts toward the light: hover and active fills lighten, and the label flips from White to Ink #18181C while the fill is lightened. Base states keep white text. Ink-on-lightened-fill contrast, verified 2026-07-04 (cobalt re-lightened 2026-08-08, D40 — the old hover #5C87E5 read APCA Lc 40.5, below the 45 spot line; the new ladder puts every dark transient state at APCA parity): cobalt hover 5.94 / active 7.86, rose hover 5.92 / active 7.50, teal hover 8.40 / active 9.63, amber hover 8.34 / active 9.72 — all ≥ 4.5:1 (AA, normal text).", "cobalt": { "base": "#4271DF", "hover": "#6E93EC", "active": "#8FACF0" }, "rose": { "base": "#F24260", "hover": "#F56579", "active": "#F78892" }, "teal": { "base": "#00B6A0", "hover": "#20C8B2", "active": "#40D4C3" }, "amber": { "base": "#E19000", "hover": "#ECA41E", "active": "#F2B63C" }, "transientText": "#18181C", "secondary": { "bg": "#2E2F35", "hover": "#3A3A40", "text": "#F4F4F1" } } }, "focusRing": { "light": "#A86E00", "dark": "rgba(225, 144, 0, 0.7)", "note": "Amber \"attention\" ring. Light surfaces: Amber active #A86E00 (4.21:1 on Canvas, 3.89:1 on Cloud). Dark surfaces: alpha-tinted Amber #E19000 (4.00:1 blended on Ink). Every pairing clears the 3:1 UI floor.", "width": "2px solid", "offset": "2px", "rule": "One ring for every focusable — buttons, links, inputs, selects, textareas, and custom controls (.btn-focus / .btn-focus-dark, chosen by rendered surface). The ring is dedicated accessibility chrome — an ephemeral attention-is-here signal outside the colour tiers, never a validation status or decorative accent. Borders never change on focus; validation borders stay visible beneath the ring." } }, "components": { "buttons": { "types": [ { "name": "Primary", "tier": "Hierarchy", "palette": "Cobalt", "stateKey": "cobalt", "label": "White", "role": "The hero action. One per section." }, { "name": "Secondary", "tier": "Hierarchy", "stateKey": "secondary", "role": "Supporting actions.", "treatment": "Cloud-family fill, Ink-family text (light); Graphite-tint fill, Cloud text (dark)." }, { "name": "Ghost", "tier": "Hierarchy", "role": "Tertiary actions.", "treatment": "2 px stone-300 border, transparent fill; label Slate (light) / stone-300 (dark)." }, { "name": "Destructive", "tier": "Semantic", "palette": "Rose", "stateKey": "rose", "label": "White", "role": "Irreversible actions." }, { "name": "Confirm", "tier": "Semantic", "palette": "Teal", "stateKey": "teal", "label": "White", "role": "Verify, approve, connect.", "detail": "For actions that affirm, verify, or establish positive connections. The outcome is constructive.", "examples": [ "Verify", "Approve", "Connect", "Mark as Trusted" ] }, { "name": "Caution", "tier": "Semantic", "palette": "Amber", "stateKey": "amber", "label": "White", "role": "Override, merge, proceed.", "detail": "For actions that acknowledge a warning or override a safeguard. Reversible but consequential.", "examples": [ "Override", "Merge", "Proceed Anyway", "Dismiss Warning" ] } ], "rule": "One Primary button per section maximum. Confirm and Caution are reserved for specific semantic contexts — never as general-purpose actions.", "sizes": [ { "name": "Compact", "heightPx": 32, "padding": "px-3 py-1.5", "fontSizePx": 12, "radiusToken": "md", "use": "Toolbars, tables, dense UI" }, { "name": "Default", "heightPx": 36, "padding": "px-4 py-2", "fontSizePx": 14, "radiusToken": "lg", "use": "Most contexts" }, { "name": "Large", "heightPx": 48, "padding": "px-6 py-3", "fontSizePx": 16, "radiusToken": "lg", "use": "Standalone CTAs" } ], "font": "Lexend Medium 500", "disabled": "opacity-40, cursor-not-allowed", "lightHoverRule": "Hover and active darken along the hand-picked ladder — buttons recede into the surface on press." }, "forms": { "heights": { "defaultPx": 36, "compactPx": 32 }, "border": "1 px solid stone-200", "radiusToken": "lg", "padding": "px-3 py-2", "font": "Lexend Regular 400, 14 px", "placeholder": "Pewter", "focus": "Canonical focus ring (brandTokens.focusRing) — 2 px Amber ring at 2 px offset, outside the border. The border itself never changes on focus; validation borders stay visible beneath the ring.", "error": "Rose border", "disabledBg": "Cloud" }, "cards": { "border": "1 px solid stone-200", "hoverBorder": "stone-300", "radiusToken": "xl", "paddingToken": "lg", "background": "Canvas", "surfaceNote": "Cards sit on the Cloud surface — the Canvas-vs-Cloud contrast gives them \"home.\"", "elevated": "shadow-md — floating elements only; hover may lift to shadow-lg", "gapToken": "md", "titleFont": "Albert Sans 600 (the heading font)" }, "layout": { "sidebar": { "widthPx": 256, "note": "Fixed width; collapsible on mobile" }, "topBar": { "height": "40–48 px", "note": "Search + user menu" }, "contentArea": { "background": "Cloud", "note": "Fluid, scrollable" }, "breakpoints": [ { "name": "Mobile", "range": "<640 px", "cols": 1, "use": "Stacked cards, full-width forms" }, { "name": "Tablet", "range": "640–1023 px", "cols": 2, "use": "Side-by-side cards, split views" }, { "name": "Desktop", "range": "1024–1279 px", "cols": 3, "use": "Dashboard grids, item listings" }, { "name": "Wide", "range": "1280 px+", "cols": 4, "use": "Dense dashboards, data tables" } ], "gridGapToken": "md", "contentWidths": [ { "label": "Max content width", "value": "768 px (max-w-3xl)", "use": "Reading-focused pages: docs, settings, forms" }, { "label": "Max dashboard width", "value": "Full width", "use": "Dashboards and data views use all available space" }, { "label": "Max prose width", "value": "65ch (max-w-prose)", "use": "Long-form text blocks within any page" } ], "elevationRule": "Z-index values increment by 10 to leave room for intermediate layers. Never use arbitrary z-index values outside this scale.", "responsiveRules": [ { "rule": "Sidebar collapses to overlay on mobile", "detail": "Below 1024 px, the sidebar becomes a slide-over panel triggered by the menu button." }, { "rule": "Grids collapse to single column", "detail": "Below 640 px, all multi-column grids stack vertically. Cards go full-width." }, { "rule": "Tables scroll horizontally", "detail": "Don't hide columns. Wrap the table in a horizontal scroll container with a fade edge." }, { "rule": "Touch targets: 44 px minimum", "detail": "Buttons, links, and interactive elements must be at least 44x44 px on touch devices." }, { "rule": "Modals become full-screen on mobile", "detail": "Below 640 px, modals take the full viewport. No side margins, full-height content." }, { "rule": "Heading sizes scale down at breakpoints", "detail": "Body text stays at 16 px minimum. Headings reduce proportionally — see Typography for the full responsive scaling table." } ] } }, "logoConstraints": { "dotCount": 10, "trailingDots": 2, "dotRadius": 3.9607, "strokeWidth": 9.0531, "container": "Circle when contained — never a squircle.", "primaryDotColor": "#A3A3A3", "lockupForms": 2, "wordmarkTailRule": "The S-mark-replaces-S treatment (lowercase \"pectrea\" tail) exists only inside the canonical Logotype / LogotypeGradient components. Everywhere else the wordmark is sentence-case \"Spectrea\" with the mark as a companion glyph.", "clearSpace": "0.5× the mark height on all sides.", "watermarkMaxOpacity": 0.2, "coBrand": "Use the ink variants (#3 mark / #4 lockup). Match the partner mark by optical height — scale so perceived heights are equal, not bounding boxes — and align on the marks' vertical centres.", "smallSizes": "No micro-construction (ratified 2026-08-06, decision 11): the standard mark scales down unchanged at every size. Below ~24px the trailing dots read as part of the stroke; that plain-S reading is accepted." }, "logoLockup": { "wordmarkWeight": 600, "trackingEm": 0.02, "strokeEm": 0.113, "markInkHeightEm": 0.714, "markTextInkGapEm": 0.131, "dotToStrokeRatio": "7:8" }, "logoMarkGeometry": { "viewBox": 64, "continuity": "G1", "frame": { "ML": 11, "MT": 3, "q": "58/714" }, "segs": [ [ [ 44.965, 14.19 ], [ 39.3, 3.346 ], [ 16.635, 4.294 ], [ 16.532, 18.686 ] ], [ [ 16.532, 18.686 ], [ 16.412, 35.427 ], [ 46.367, 26.756 ], [ 46.301, 44.482 ] ], [ [ 46.301, 44.482 ], [ 46.245, 59.74 ], [ 26, 58.5 ], [ 14.3, 50.3 ] ] ], "dotRule": "10 dots at i/9 arc fractions; stroke length = (7/9)·total − strokeWidth/2 + dotRadius·0.75 + 1.5, so dots 1-8 form the stroke and dots 9-10 stay visible (\"about to connect\").", "inkExtents": { "left": 10.339, "right": 50.828, "top": 2.338, "bottom": 59.54 }, "placement": { "inkBottomVsBaselineEm": 0.007, "penAdvanceEm": 0.0643 } }, "logoAnimation": { "loopSeconds": 3, "phases": { "drawEnd": 0.57, "holdEnd": 0.6, "dissolveEnd": 0.97 }, "trailingFadeFraction": 0.15, "easing": "Quadratic phase ease — the draw eases out, the dissolve eases in. The logo's own spec, not one of the UI easing tokens.", "reducedMotion": "Under prefers-reduced-motion the loop does not run: the completed mark holds as a static frame.", "use": "Loading states, hero moments, splash. Never inline UI — too prominent." }, "accessibility": { "floor": "WCAG 2.2 AA", "measurement": "Conformance floor: WCAG 2.x relative-luminance ratios (4.5:1 normal text; 3:1 large text and UI) — the metric automated checkers enforce and the level the brand publicly claims. Perceptual adjudicator: APCA-W3 Lc (the WCAG 3 draft model; ≥45 spot text, ≥60 fluent, ≥75 body) — consulted whenever the 2.x formula and trained eyes disagree, because 2.x under-credits light text on saturated mid-tone fills and over-credits dark-on-vivid. Exception grants record both metrics. OKLab/OKLCH lightness deltas may inform design exploration but are not conformance measures.", "contrast": { "normalText": "4.5:1", "largeTextAndUI": "3:1" }, "exceptionRegistry": { "rule": "Each entry names the exception, its measured values under both metrics (see accessibility.measurement), its rationale, and its usage bounds. A sub-floor usage not listed here is a defect, not a style. (The Amber focus-ring candidate was resolved 2026-08-07 as a fix, not an exception — see brandTokens.focusRing.)", "entries": [ { "name": "semantic-button-labels-white", "ratified": "2026-08-07", "exception": "White #FFFFFF labels on semantic button base fills sit below the WCAG 2.x AA text floor on Rose, Teal, and Amber.", "measured": { "wcag2x": "White on Cobalt 4.51:1 (AA), Rose 3.67:1, Teal 2.56:1, Amber 2.56:1; light-mode hover/active improve to 3.20–7.02:1; dark transient states flip to Ink and pass 5.92–9.72:1.", "apca": "White Lc on Cobalt 76.4, Rose 68.4, Teal 54.6, Amber 54.9 (hover/active 64.2–88.9) vs Ink Lc 31.7/39.6/53.0/52.7 — white beats or ties Ink on every fill, and every white pairing clears the APCA spot-text minimum (45) at base state." }, "rationale": "The WCAG 2.x formula under-credits light text on saturated mid-tone fills and over-credits dark-on-vivid: the nominally compliant Ink-on-Rose swap (4.82:1) would measure APCA Lc 39.6 — perceptually worse than the white it replaced (68.4). White labels are perceptually equal-or-better everywhere and keep one consistent label rule across the semantic set.", "bounds": "Semantic action buttons only: short labels, ≥14px Lexend Medium (500), reinforced by action context per the colour-alone rule. Covers light- and dark-surface base states (dark transient states still flip to Ink). Never body text, links, or long-form copy." } ] }, "wcag22Criteria": [ "Focus appearance: a visible focus indicator on every interactive element — the Amber focus ring (2 px solid, 2 px offset; Amber active #A86E00 on light surfaces, alpha-tinted Amber on dark) is the standard treatment.", "Target size: interactive targets at least 24×24 px, or the equivalent spacing exception.", "Dragging alternatives: any drag interaction (graph manipulation included) has a single-pointer, non-dragging alternative." ], "rules": [ "Body text minimum 16 px; never lower for primary content.", "Never rely on colour alone — pair colour coding with icons, patterns, or labels.", "Layout must not break at 200% browser text-zoom." ], "pewterMatrix": { "principle": "Pewter (#97979E, 2.85:1) is a whisper, not a readable tier. Anything that must be read on its own steps up to Slate or Iron.", "allowed": [ "Overlines", "Timestamps", "Meta chips", "Placeholder text", "Captions whose adjacent context already makes the content obvious" ], "denied": "Any informational text — body copy, labels carrying meaning, values, errors, anything a reader must be able to read on its own." } }, "graphViz": { "semantics": { "nodeDefault": "Neutral — structure is quiet (Slate/Pewter strokes, Canvas/Cloud fills on light; inverted on dark). Colour is reserved for meaning.", "nodeHover": "Cobalt — Tier 1 responsive: present during hover, then settles.", "nodeFocus": "Canonical focus ring (brandTokens.focusRing) — the same ring every focusable carries; not a Cobalt state.", "nodeSelected": "Ink — Tier 2 structural: persistent selection state (Cloud on dark).", "edgeDefault": "Neutral (Pewter). A newly formed connection may animate with the Formation motion primitive — spectrum gradient along the stroke, settling to resting neutral.", "confidence": "Amber carries confidence/attention. Confidence values render in JetBrains Mono and are never conveyed by colour alone.", "status": "Tier 3 semantic: success/connected = Teal · warning/pending = Amber · error/conflict = Rose · info = Cobalt.", "stale": "Pewter whisper plus a non-colour cue (icon or label) — never colour alone." }, "note": "Foundation only. The operational graph-rendering spec is a product design deliverable, not a brand-guide deliverable." }, "illustration": { "doctrine": "One invariant DNA block plus one register sentence per job. The DNA is the identity and never varies; the register is the context dial, chosen per job and never enforced across jobs. Measurements report, they never gate — a scorer rewards crude flat images, so a person looks at every render before it is claimed or shipped.", "dnaPrompt": "Generate this image directly.\n\n[SUBJECT]\n[REGISTER]\n\nFlat editorial illustration in the style of Linear.app and Stripe brand art, slightly warmed.\nFilled shapes only. No outlines, no strokes, no line art.\n\nColours: cobalt blue #4271DF, teal #00B6A0, amber #E19000, rose #F24260, warm off-white background #FAF8F2. One colour dominates; the others support as pale tints. Never all four at full strength.\n\nWarmth comes from palette and light, not from crowding. No grey filler shapes.\nMix soft rounded forms with clean geometric ones.\nIf people appear, their faces are blank or one dot per eye.\n\n[TEXT]\nNo isometric view, no 3D, no photorealism, no houseplants.\n\n[ASPECT].", "promptSlots": { "SUBJECT": "One sentence naming the scene. A subject that must contain no people says so — figures are not part of the DNA.", "REGISTER": "One sentence from registers below, or one derived per registerDerivation.", "TEXT": "Marketing and editorial subjects: \"No text.\" Product subjects: \"Render the interface accurately, with the text it genuinely needs. Never lorem, never gibberish.\"", "ASPECT": "The aspect ratio, e.g. \"16:9\", \"1:1\", \"1200x630\"." }, "promptNote": "Length is load-bearing. The ~2,900-character predecessor lost generator attention; compacting to ~750 characters was the single change that moved every measured metric. Adding rules to this block costs attention on the rules already in it — a new constraint belongs in a register sentence, not here.", "registers": [ { "id": "hero", "job": "Draws attention; rewards a look", "sentence": "A detailed, balanced scene with warm light — rich enough to reward a second look, composed enough to breathe." }, { "id": "spot", "job": "Sits beside content; must not compete with it", "sentence": "Simple and direct: a few large deliberate shapes and one large calm empty area." }, { "id": "docs", "job": "Explains; carries order and motion", "sentence": "A clear single idea in motion — order emerging, mid density, nothing decorative." }, { "id": "product", "job": "Shows the actual software", "sentence": "Render the product accurately; named source documents sit beside the answer." }, { "id": "social", "job": "Reads at thumbnail size", "sentence": "Bold and immediate at small size; two equal subjects may share the lead colour." } ], "registerDerivation": "These five are named presets, not a closed list. A register is one sentence positioning a job on five axes: density, composition, light, text, and subjects. A context with no register gets a sentence composed on those axes; if the context recurs, name the sentence, make its best render the exemplar, and add it here. The DNA never moves — only the sentence does.", "ranges": [ { "axis": "Temperature", "range": "Cool-leaning (Cobalt-led and spare on the warm ground) to golden-hour (warm light over a dense warm scene). The ground is ALWAYS warm off-white — temperature varies in the shapes and the light, never the ground.", "default": "Gentle warmth: warm light present, not golden.", "outOfRange": "A cool white or grey ground; blue-grey washes; heat with no cool counterweight.", "judgedBy": "eye", "note": "No ratio scores this axis: warm-share-of-colour is blind to quantity and ranked a spare image above a dense golden one. Perceived warmth is warm coverage combined with light and density." }, { "axis": "Density", "range": "Largest open area from ~12% (richest) to ~76% (sparest).", "default": "Set by register — a hero carries detail, a spot carries few large shapes. An unregistered job sits mid.", "outOfRange": "Below ~12%: nothing breathes. The retired anchor sat at 5%.", "judgedBy": "eye", "note": "Density is FELT in shape count and detail, and open-ground percentage tracks it only loosely. In the shipped exemplars the hero measures MORE open ground than the spot (34.7% against 25.1%) while looking plainly denser — a detailed desk with a lamp, books and a poster against a few large shapes and a quiet half-frame. Two samples are not a range; they are enough to show the number cannot define the register. Read it as a drift signal." }, { "axis": "Abstraction", "range": "Accurate product scenes to pure geometric abstraction.", "default": "Simplified representational — a real scene built from flat shapes.", "outOfRange": "Photorealism at one end; literal banned metaphors (networks, nodes, prisms) and decoration with no job at the other.", "judgedBy": "eye" }, { "axis": "Depth", "range": "Vector has no range: strictly flat. Raster runs from pure flat through layered flat (overlap occlusion) to believable perspective where the subject itself needs it.", "default": "Layered flat, at most one darker tonal step.", "outOfRange": "Isometric projection as a style; slab-edge stacks; gloss; rendered 3D.", "judgedBy": "eye" }, { "axis": "Saturation", "range": "One primary at full strength leads; a second may reach full strength in small accents; three only where shapes themselves are the subject.", "default": "Exactly one primary at full strength.", "outOfRange": "Four primaries at full strength — the retired anchor.", "judgedBy": "report" }, { "axis": "Figures", "range": "None, one, or two equals (social register only).", "default": "Zero or one. Faces are always blank or one dot per eye.", "outOfRange": "Crowds, detailed facial features, mascots.", "judgedBy": "eye" } ], "media": { "raster": "Owns warmth, light and human presence. It cannot hit an exact brand hex — across every raster measured, the closest Cobalt landed at colour distance 33 — so its palette rule is a stated tolerance, never an exactness claim. Depth is permitted while it stays illustration.", "vector": "Owns exact palette, strict flatness and product accuracy: the author types the hex. Tints are lighter SOLID hexes, never fill-opacity — a translucent fill over a coloured ground composites to a colour in no palette (Amber at 60% over Teal reads olive, and a hue-family checker passes it).", "choosing": "Warmth, mood, human presence, marketing scenes → raster. Exact brand colour, schematic product, in-guide primitives, anything that must be edited later → vector." }, "reference": { "doctrine": "A reference image is a CONTENT channel, not a style channel: its pull scales with how compatible its content is with the prompt. The prompt sets the level; the reference narrows variance toward itself.", "modes": [ { "id": "none", "when": "A new composition — the default", "effect": "The register sentence alone sets the level, and nothing bleeds in." }, { "id": "cross-subject", "when": "A batch that must feel like one campaign", "effect": "Style steadies and variance narrows; expect motifs from the reference to echo, which inside one campaign reads as cohesion." }, { "id": "same-subject", "when": "A variant of an image that already exists", "effect": "The render collapses onto the reference — three of three draws reproduced it object-for-object. Cloning is the feature here and a defect everywhere else." } ] }, "checklist": { "stance": "Report, never gate.", "reports": [ "largest open ground area", "neutral grey filler share", "primaries at full saturation", "hero lead ratio", "top colours by area, named" ], "why": "A crude flat image scores perfectly while being incoherent, and a render that broke the warm-ground rule scored best of its round. Numbers describe an image so drift is visible over time; they never decide whether it ships. Every render is opened and looked at before any claim is made about it." }, "antiPatterns": [ { "never": "Mascots or character cartoons", "because": "Spectrea is a mentor, not a pet." }, { "never": "Stock photography", "because": "Warmth comes from the palette and the light in generated scenes, not from stock imagery." }, { "never": "Outlines or line art", "because": "Every shape is filled. A stroke that survives a trace is a defect, not a style." }, { "never": "Off-palette gradients and neon", "because": "The palette is the identity; a colour outside it is a different brand." }, { "never": "Bauhaus limb-figures", "because": "The retired SpectreaFigure illustrated the opposite of the product's composability promise." } ] }, "internalCanon": { "rule": "Fields listed here render only to internal/ artefacts. Adding a field is a ledger decision; generators must consult this registry, and a public artefact carrying an internal field is a build defect.", "consumerRule": "The internal-tier fields named with this rule are absent from every public artefact by design, not by omission. If you are working from a vendored snapshot, do not reconstruct them from an older snapshot, a cached copy, or memory, and never author replacements freehand — trust, security, and compliance wording is counsel-gated. When a surface genuinely needs one, request the internal brand hand-off (the internal/ artefacts, delivered locally) instead of inventing it.", "fields": [ "trustCopy", "brand.positioning.fullShapeClaim", "brand.differentiatorGuardrail", "brand.antiBrands", "brand.audienceMechanics", "ratificationLedger" ] }, "executiveVoice": { "rule": "Founder and executive surfaces — bylines, talks, investor letters, interviews, personal social — use the same voice formula in the first person. Speak as a practitioner who builds and uses the product: concrete observations, shown work, named trade-offs. No corporate we-speak, no vision without evidence.", "example": { "correct": "I kept watching decisions we'd already settled get re-argued three months later, because nobody could find why we'd decided. That's the problem Spectrea started from.", "incorrect": "We're thrilled to announce the next chapter in our journey to revolutionize how the world works with knowledge.", "why": "The right version is a practitioner's observation — first person, specific, checkable. The wrong version is corporate we-speak built on a neverUse word." } }, "originStance": { "status": "decided-silence", "rule": "The brand stays silent on origin — no origin claims, no locality framing (\"engineered in Singapore\" or similar), on any brand or marketing surface. Do not originate origin copy. Scope (clarified 2026-08-13): this governs brand and marketing surfaces; the historical archive in docs/ and legal instruments are out of scope — the legal entity is public record regardless, and silence was never secrecy. Decided by Darren 2026-07-03; revisit only if a GTM cycle produces buyer evidence that the signal earns something." }, "retired": { "note": "Values canon no longer holds, recorded so downstream drift is machine-detectable. Seeded only with retirements that escaped downstream or plausibly could; grows when a real migration happens, not by back-filling history.", "values": [ { "id": "guide-url-github-pages", "retired": "matchwise.github.io/spectrea-branding", "replacedBy": "branding.spectrea.com", "since": "2026-08-07", "decision": "v2.5.0 hand-off (custom domain)", "scope": "absolute" }, { "id": "tone-spectrum-citation", "retired": "toneSpectrum", "replacedBy": "toneExamples (tone field)", "since": "2026-08-08", "decision": "20 (v2.5.4)", "scope": "absolute" }, { "id": "mark-path-pre-k3", "retired": "M 44 12", "replacedBy": "K3′ markGeometry (logo.markGeometry)", "since": "2026-08-07", "decision": "6 (v2.5.0)", "scope": "absolute" }, { "id": "focus-ring-universal-rgba", "retired": "rgba(225, 144, 0, 0.7)", "replacedBy": "#A86E00 (light) / rgba(225, 144, 0, 0.7) (dark)", "since": "2026-08-07", "decision": "16 (v2.5.1), scope rule decision 34 (v2.10.0)", "scope": "contextual", "stillValidAs": "The dark-theme focus ring. Only its use as the LIGHT-theme ring was retired, and no string match can tell the two apart." }, { "id": "teal-active-as-text", "retired": "#008775", "replacedBy": "#007D6E (brandTokens.accentText.teal)", "since": "2026-08-08", "decision": "accessibility cluster (v2.5.7, accentText Option A)", "scope": "contextual", "stillValidAs": "teal.active — a button-state FILL. Only its use as text colour was retired." } ] } }