sinapse-ai 9.4.0 → 9.5.0

package/squads/squad-artdir/knowledge-base/premium-packaging-principles.md

@@ -0,0 +1,133 @@
+# Premium Packaging Principles — The 5 Non-Negotiables
+
+> Output of a 30-minute strategic pressurization session by @council-orqx (Zenith). Question: **"What is the visual/experiential DNA of a SaaS that can charge 3x more than its direct competitor?"**
+>
+> Every principle is traceable to a named mental model or decision framework. No invention. These are the non-negotiables that Aura (premium-packaging-strategist) applies to every briefing.
+
+**Session date:** 2026-04-12
+**Facilitator:** @council-orqx (Zenith)
+**Mental models consulted:** Veblen goods, Signaling theory (Spence), Cognitive restraint (System 1/2 — Kahneman), Trust hierarchies (Ariely), Galbraith's affluence paradox, Porter's differentiation positioning, Bourdieu's distinction
+
+---
+
+## The 5 Non-Negotiable Principles
+
+### Principle 1 — Restraint reads as confidence
+
+**Mental model:** Signaling theory (Spence, 1973). A signal is costly to fake. Restraint in design is costly because it requires conviction — it signals "we know exactly what matters and what does not."
+
+**Application:**
+- Max 1 accent color across the entire product
+- Max 3 type weights in any surface
+- Max 3 CTAs per viewport
+- Empty space is not wasted real estate — it is a confidence signal
+- Avoid feature dumps, testimonial walls, mascot clutter
+
+**Anti-pattern:** The "everything everywhere all at once" landing page. Every section screams. The user subconsciously concludes: "this is insecure pricing."
+
+**Aura's enforcement:** If a briefing requests more than one accent color, escalate. If a pricing page has more than 4 tiers, escalate.
+
+---
+
+### Principle 2 — Custom craft = unfakeable signal
+
+**Mental model:** Veblen goods + Bourdieu's distinction. Premium status requires conspicuous consumption of something the commodity alternative cannot access.
+
+**Application:**
+- At least ONE element must be custom-made and visibly so:
+  - Custom typography (Stripe's Sohne, Vercel's Geist)
+  - Custom iconography (single-weight, consistent, proprietary)
+  - Custom motion signature (a unique easing curve or hero animation)
+  - Custom illustration language (only if it is genuinely proprietary)
+- "Stock" anything is forbidden at the premium tier: stock photos, stock icons, stock fonts that every competitor also uses
+
+**Anti-pattern:** Using Inter + Feather icons + a Figma community template. Instantly reads as commodity — even if the product is excellent.
+
+**Aura's enforcement:** Every premium brief must identify the 1-2 custom craft elements that will be built. If the budget does not allow custom type, prescribe custom iconography as the minimum viable premium signal.
+
+---
+
+### Principle 3 — Friction at the right moment creates value
+
+**Mental model:** Ariely on the ownership effect + the IKEA effect. Effort expended creates perceived value. Strategic friction makes the purchase feel earned.
+
+**Application:**
+- "Contact sales" as a tier for Enterprise — deliberate friction signaling premium
+- Invitation-only onboarding for early access
+- Waitlists as design exhibits (Arc, Superhuman)
+- Manual decision moments in onboarding instead of auto-everything (the user chooses = the user commits)
+- Pricing pages that require reading, not just scanning
+
+**Anti-pattern:** Frictionless commoditization. Free trial with one-click signup, frictionless checkout, zero commitment required. Optimizes for conversion volume, kills perceived value.
+
+**Aura's enforcement:** Every premium brief must identify AT LEAST ONE strategic friction point in the funnel. If there is none, the product is priced as commodity regardless of the actual price tag.
+
+---
+
+### Principle 4 — Presentation determines perceived value more than intrinsic quality
+
+**Mental model:** Framing effect (Kahneman/Tversky) + Veblen goods + Superhuman's $30/month email pricing case study.
+
+**Application:**
+- Premium unboxing in digital form = a choreographed first-run experience
+- The first 5 minutes must feel like an Apple product intro, not a feature walkthrough
+- Onboarding has a "ceremony" phase (see Arc, Superhuman onboarding) — intentional theater that communicates: "you are entering something serious"
+- Pricing pages must be exhibits. Comparison tables come AFTER the emotional pitch, never before
+- Empty states are second impressions — treat them like mini-LPs
+
+**Anti-pattern:** "Skip tutorial" button in the first 10 seconds. Commodity move. You are saying: our onboarding is a cost to minimize, not an experience to savor.
+
+**Aura's enforcement:** Every premium brief must have a documented "First 5 Minutes Choreography" section. Unscripted first-run = commodity experience.
+
+---
+
+### Principle 5 — Consistency across surfaces is the strongest price defense
+
+**Mental model:** Cognitive consistency theory (Festinger) + Trust hierarchies (if any single surface degrades, all surfaces lose credibility).
+
+**Application:**
+- The design tokens flowing from brand -> marketing site -> product -> email -> docs -> invoices must be RIGOROUSLY identical
+- One weak surface (an ugly invoice PDF, a Mailchimp-default transactional email, a docs site that looks like GitBook) destroys premium perception for the entire product
+- Atlas (design-system-architect) OWNS this — the multi-surface token architecture is the enforcement mechanism
+- Versioning of the design system is non-negotiable: breaking changes must ship with migration guides
+
+**Anti-pattern:** Beautiful product + Mailchimp-default emails + Zendesk-branded help center + Stripe Checkout that does not match the brand. Each inconsistency is a small tax on perceived value. Stack enough taxes and no amount of product quality justifies the price tag.
+
+**Aura's enforcement:** Every premium brief must include a full surface inventory (marketing, product, email, docs, support, billing, mobile) with a consistency audit. If ANY surface is missing from the audit, the brief is incomplete.
+
+---
+
+## Cross-Principle Summary
+
+| # | Principle | Mental Model Anchor | Primary Enforcer Agent |
+|---|-----------|---------------------|-----------------------|
+| 1 | Restraint reads as confidence | Signaling theory | Aura + Canvas |
+| 2 | Custom craft = unfakeable signal | Veblen + Bourdieu | Aura + Kern (type) or Spectrum (color) |
+| 3 | Friction at the right moment creates value | Ariely / IKEA effect | Aura + Convert (CRO) |
+| 4 | Presentation > intrinsic quality | Framing + Kahneman | Aura + Axiom (product surface) |
+| 5 | Consistency across surfaces | Cognitive consistency | Aura + Atlas (design system) |
+
+## Diagnostic Questions (Aura asks on every briefing)
+
+1. What is the ONE custom craft element this product will own? (typography, icons, motion, illustration)
+2. Where is the strategic friction in the funnel that creates earned-value feeling?
+3. What is the choreography of the first 5 minutes after signup?
+4. Is there a documented multi-surface token system? If not, how do we prevent surface drift?
+5. If I audit the invoice PDF and the transactional emails, do they match the marketing site quality?
+
+**If any answer is "no" or "we do not know," the product is pricing itself as commodity regardless of the sticker price.**
+
+## How to USE this KB
+
+- **Aura (premium-packaging-strategist)** consults this KB on every new brief, produces a Premium Packaging Brief using the 5 diagnostic questions
+- **Canvas (artdir-orqx)** validates against these principles before approving any deliverable for platforms claiming premium positioning
+- **Atlas (design-system-architect)** uses Principle 5 as the justification for multi-surface versioning work
+- **Axiom (product-surface-director)** uses Principle 4 for onboarding choreography
+
+## Provenance
+
+Output of @council-orqx (Zenith) strategic pressurization session, 2026-04-12. All principles cite public mental models. Case studies cite publicly-analyzed products (Linear, Vercel, Stripe, Framer, Arc, Raycast, Superhuman).
+
+---
+
+*@council-orqx (Zenith) | squad-artdir v2.0 | KB v1.0*

package/squads/squad-artdir/knowledge-base/psychological-toolkit.md

@@ -0,0 +1,229 @@
+# Psychological Toolkit for Art Direction
+
+> Arsenal completo de principios psicologicos aplicados a design de conversao.
+> Cada entrada inclui principio, mecanismo, aplicacao em web design e quando usar.
+
+---
+
+## Parte 1: 10 Cognitive Biases for Conversion
+
+### 1. Loss Aversion (Kahneman & Tversky)
+
+- **Principio:** Perdas pesam ~2x mais que ganhos equivalentes
+- **Mecanismo:** Amigdala processa perdas mais intensamente que cortex pre-frontal processa ganhos
+- **Aplicacao web:**
+  - "Voce esta perdendo R$X/mes sem automacao" (frame como perda)
+  - "Sua oferta expira em 48h" (medo de perder)
+  - "Cancele quando quiser — sem multa" (remove medo de perda)
+- **Quando usar:** CTAs de urgencia, pricing comparisons, risk reversal copy
+- **Cuidado:** Nao exagerar — excesso de fear mongering gera rejeicao
+
+### 2. Anchoring Effect (Tversky & Kahneman)
+
+- **Principio:** Primeiro numero apresentado serve como ancora para todos os julgamentos seguintes
+- **Mecanismo:** Cortex pre-frontal usa primeiro dado como referencia automatica
+- **Aplicacao web:**
+  - Mostrar preco "de" antes do preco "por": ~~R$497~~ R$197
+  - Apresentar tier mais caro primeiro na comparison table
+  - Usar metricas grandes antes de pedir compromisso: "327% mais rapido"
+- **Quando usar:** Pricing pages, comparison tables, hero metrics
+- **Cuidado:** Ancora deve ser crivel — se muito distante da realidade, perde efeito
+
+### 3. Endowment Effect (Thaler)
+
+- **Principio:** Pessoas valorizam mais o que ja possuem (ou sentem que possuem)
+- **Mecanismo:** Posse psicologica aumenta valor percebido
+- **Aplicacao web:**
+  - Free trial: usuario sente que "ja tem" e nao quer perder
+  - "Seu dashboard esta pronto" (antes de assinar)
+  - Wizard de onboarding que configura antes de pagar
+  - "Sua conta foi criada com sucesso" — agora pague para manter
+- **Quando usar:** Free trials, freemium, onboarding flows
+- **Cuidado:** Se o trial for ruim, endowment nao salva
+
+### 4. Social Proof (Cialdini)
+
+- **Principio:** Pessoas usam o comportamento dos outros como guia para o proprio
+- **Mecanismo:** Mirror neurons + conformity bias — copiar e seguro evolutivamente
+- **Aplicacao web:**
+  - Logos de clientes: "Usado por Google, Meta, Stripe"
+  - Live counters: "1,247 usuarios ativos agora"
+  - Testimonials com foto + cargo + resultado especifico
+  - Star ratings: "4.9/5 — 2,847 reviews"
+  - Activity feed: "Maria acabou de assinar o plano Pro"
+- **Quando usar:** SEMPRE. Social proof e o padrao com maior impacto universal
+- **Cuidado:** Deve ser real e verificavel. Fake social proof destroi confianca
+
+### 5. Scarcity Principle (Cialdini)
+
+- **Principio:** Coisas escassas sao percebidas como mais valiosas
+- **Mecanismo:** Medo de perda oportunidade (relacionado a loss aversion)
+- **Aplicacao web:**
+  - "7 de 20 vagas restantes" (quantity scarcity)
+  - Countdown timer com deadline real (time scarcity)
+  - "Preco sobe em 3 dias" (temporal scarcity)
+  - Badge "Limited Edition" (exclusivity)
+- **Quando usar:** APENAS quando a escassez e REAL. Fake scarcity e dark pattern
+- **Cuidado:** Scarcity falsa e detectada rapidamente e destroi toda a confianca
+
+### 6. Authority Principle (Cialdini)
+
+- **Principio:** Pessoas confiam mais em fontes percebidas como autoridades
+- **Mecanismo:** Heuristico de eficiencia cognitiva — confiar no expert poupa energia
+- **Aplicacao web:**
+  - Certificacoes e badges (SOC2, ISO, LGPD compliance)
+  - "Featured in TechCrunch, Forbes, Exame"
+  - Expert testimonials com credenciais visiveis
+  - Data-driven claims com fontes citadas
+  - "Fundada por ex-Google, ex-Meta"
+- **Quando usar:** Trust sections, about page, pricing, security claims
+- **Cuidado:** Authority sem relevancia nao funciona — "recomendado por dentista" nao ajuda SaaS
+
+### 7. Reciprocity (Cialdini)
+
+- **Principio:** Pessoas retribuem favores — mesmo nao solicitados
+- **Mecanismo:** Obrigacao social de reciprocar
+- **Aplicacao web:**
+  - Dar valor antes de pedir (free content, tools, templates)
+  - "Guia gratuito: 10 estrategias de X" antes do paywall
+  - Free tier generoso que demonstra valor
+  - Conteudo educativo no blog antes de vender
+- **Quando usar:** Content marketing, lead magnets, freemium
+- **Cuidado:** O "presente" deve ter valor real, nao ser apenas bait
+
+### 8. Commitment & Consistency (Cialdini)
+
+- **Principio:** Pessoas agem de forma consistente com compromissos anteriores
+- **Mecanismo:** Dissonancia cognitiva — inconsistencia causa desconforto
+- **Aplicacao web:**
+  - Multi-step forms: cada step e um micro-compromisso
+  - "Voce concorda que X e importante?" → "Entao voce precisa de Y"
+  - Progress bars: "Passo 3 de 5 — quase la"
+  - Free trial que pede cartao = compromisso maior, churn menor
+- **Quando usar:** Forms, onboarding, upgrade flows
+- **Cuidado:** Escalation natural — nao pular de "email" para "cartao de credito"
+
+### 9. Framing Effect (Tversky & Kahneman)
+
+- **Principio:** A forma de apresentar informacao muda a decisao, mesmo com dados identicos
+- **Mecanismo:** Cortex pre-frontal avalia contexto, nao apenas conteudo
+- **Aplicacao web:**
+  - "Economize R$2.400/ano" vs "R$200/mes" (annual framing)
+  - "99.97% uptime" vs "Down 2.6 horas/ano" (positive framing)
+  - Comparison table que enquadra features favorecendo voce
+  - "De R$497 por R$197" vs "R$197" (anchor + deal framing)
+- **Quando usar:** Pricing, comparison tables, hero metrics, testimonials
+- **Cuidado:** Framing nao e mentir — e apresentar a mesma verdade de forma favoravel
+
+### 10. Decoy Effect (Ariely)
+
+- **Principio:** Adicionar uma opcao inferior faz a opcao-alvo parecer melhor
+- **Mecanismo:** Comparacao relativa — a mente precisa de contexto para decidir
+- **Aplicacao web:**
+  - 3 pricing tiers: Basic, Pro (target), Enterprise
+  - Basic e limitado demais, Enterprise e caro demais → Pro e "a escolha inteligente"
+  - O tier "decoy" existe para fazer o target parecer value for money
+- **Quando usar:** Pricing pages, plan comparison, subscription tiers
+- **Cuidado:** O decoy deve ser crivel — opcao obviamente ruim e transparente
+
+---
+
+## Parte 2: 6 Retention Principles
+
+### 1. Zeigarnik Effect
+
+- **Principio:** Tarefas incompletas sao lembradas melhor que as completas
+- **Aplicacao:** Progress bars, headlines com lacuna, reveals parciais, counters que animam
+- **Exemplo:** "O que 97% dos founders nao sabem sobre..." → scroll para descobrir
+
+### 2. Goal Gradient Effect
+
+- **Principio:** Esforco aumenta conforme proximidade do objetivo
+- **Aplicacao:** Progress indicators, "quase la", sunk cost visual
+- **Exemplo:** "Passo 4 de 5 — voce esta quase la!" → usuario persiste
+
+### 3. Peak-End Rule (Kahneman)
+
+- **Principio:** Experiencia e julgada pelo pico emocional e pelo final
+- **Aplicacao:** Momento memoravel mid-page + footer com valor real
+- **Exemplo:** Demo interativa (pico) + footer com human touch (final)
+
+### 4. Serial Position Effect
+
+- **Principio:** Primeiro e ultimo items de uma lista sao mais lembrados
+- **Aplicacao:** Colocar beneficio principal primeiro e CTA por ultimo
+- **Exemplo:** Feature #1 e a mais forte, ultima secao e o CTA final
+
+### 5. Cognitive Fluency
+
+- **Principio:** Informacao facil de processar e percebida como mais verdadeira
+- **Aplicacao:** Linguagem simples, tipografia clara, layout previsivel
+- **Exemplo:** Sans-serif, high contrast, short paragraphs → percepacao de confianca
+
+### 6. Mere Exposure Effect (Zajonc)
+
+- **Principio:** Familiaridade gera preferencia
+- **Aplicacao:** Repetir mensagem-chave em diferentes formatos ao longo da pagina
+- **Exemplo:** Proposta de valor no hero, nos features, no CTA, no footer
+
+---
+
+## Parte 3: 6 UX Cognitive Laws
+
+### 1. Hick's Law
+- **Formula:** RT = a + b * log2(n)
+- **Traducao:** Cada opcao adicional aumenta tempo de decisao
+- **Regra:** Max 3 opcoes de CTA, max 5 nav items, max 3 pricing tiers
+
+### 2. Fitts's Law
+- **Formula:** MT = a + b * log2(D/W + 1)
+- **Traducao:** Alvos maiores e mais proximos sao alcancados mais rapido
+- **Regra:** CTAs min 44x44px, proximos ao conteudo convincente, area clicavel generosa
+
+### 3. Miller's Law (7 +/- 2)
+- **Principio:** Working memory processa ~7 chunks de informacao
+- **Regra:** Max 7 features por showcase, max 5-7 nav items, chunk info em grupos
+
+### 4. Jakob's Law
+- **Principio:** Usuarios esperam que seu site funcione como os que ja conhecem
+- **Regra:** Seguir convencoes da categoria (nav no topo, logo top-left, CTA top-right)
+
+### 5. Tesler's Law (Conservation of Complexity)
+- **Principio:** Toda aplicacao tem complexidade irredutivel — alguem deve absorve-la
+- **Regra:** O sistema absorve complexidade, nao o usuario. Smart defaults, auto-detection
+
+### 6. Postel's Law (Robustness Principle)
+- **Principio:** Seja conservador no que envia, liberal no que aceita
+- **Regra:** Aceitar formatos variados de input (telefone com/sem mascara, email case-insensitive)
+
+---
+
+## Parte 4: 7 Gestalt Principles for Visual Design
+
+### 1. Proximity
+Elementos proximos sao percebidos como grupo.
+→ Icon + label juntos = feature unit
+
+### 2. Similarity
+Elementos com mesma aparencia sao percebidos como mesma categoria.
+→ Cards com mesmo estilo = comparaveis
+
+### 3. Closure
+A mente completa formas incompletas.
+→ Progress bars, loading circles, partially visible elements
+
+### 4. Continuity
+O olho segue linhas e curvas naturalmente.
+→ Scroll flow, connecting lines between sections
+
+### 5. Figure/Ground
+Separacao entre conteudo principal e fundo.
+→ Cards elevados, modals sobre overlay escuro
+
+### 6. Common Region
+Elementos dentro da mesma area visual sao percebidos como grupo.
+→ Sections com backgrounds alternados
+
+### 7. Focal Point
+O elemento com maior contraste visual atrai primeiro.
+→ CTA em accent color em pagina neutral = focal point

package/squads/squad-artdir/knowledge-base/saas-art-direction-canon.md

@@ -0,0 +1,242 @@
+# SaaS Art Direction Canon — 6 Premium References
+
+> Canonical benchmark of 6 premium SaaS aesthetic references. Extracted by @analyst (Scope) for squad-artdir v2.0. Every claim in this KB must be traceable to a public surface of the reference product or its published design system docs. No invention — if we cannot cite it, we do not claim it.
+
+**Purpose:** Prevent commodity aesthetics. Provide canonical reference DNA that Vertex (platform-aesthetic-director) applies on every new platform briefing.
+
+**Re-benchmark cadence:** Quarterly. Aesthetic drift is real — Linear looked different in 2022.
+
+---
+
+## Analysis Framework — 5 Dimensions per Reference
+
+Each reference is decomposed across 5 dimensions:
+
+1. **Visual DNA** — color logic, typography pairing, density posture, dark-mode priority
+2. **Hero / Landing pattern** — what the first 600px does to the visitor
+3. **Design system architecture** — token strategy, versioning, public docs presence
+4. **Pricing page pattern** — how it defends the price tag visually
+5. **Onboarding / Empty-state aesthetic** — how the logged-in first impression is choreographed
+
+---
+
+## 1. Linear (linear.app)
+
+### Visual DNA
+- **Color logic:** Near-monochrome. Single accent (purple) used with extreme restraint. Dark-first (dark mode is default; light mode is the alternate).
+- **Typography:** Inter as the sole workhorse. Tight tracking on headings. No serif. Weight hierarchy (400/500/600) does all the work.
+- **Density posture:** High density, low noise. Information packs tightly but each element is surrounded by calibrated space.
+- **Dark-mode priority:** Dark-first is doctrine.
+
+### Hero pattern
+- Headline + one supporting line + one CTA + a single product screenshot rendered with subtle motion
+- No hero illustration. No stock photography.
+- The product IS the hero.
+
+### Design system
+- Public design system references via published articles (brand guidelines, iconography posts).
+- Icon library: custom, single-weight, monochrome.
+- Spacing: 4/8/12/16/24/32/48 — fibonacci-adjacent, no arbitrary values.
+
+### Pricing pattern
+- 3 tiers max. Horizontal cards. The recommended tier is elevated (Von Restorff via shadow + border + label, not color).
+- No fake urgency. No countdown. The restraint itself signals premium.
+
+### Onboarding
+- Empty state of a new workspace: tutorial guided flow inside the product, not a modal wall. Uses real keyboard shortcuts from day one (teaches velocity from first minute).
+
+### Extracted DNA
+- **"Velocity is the aesthetic."** Everything says "this tool respects your time."
+- **One accent. Forever.** The purple is non-negotiable.
+- **Product is the hero, not decorations.**
+
+---
+
+## 2. Vercel (vercel.com)
+
+### Visual DNA
+- **Color logic:** True black / true white duality. Geometric accent colors (cyan, magenta, amber) used as gradients on hero objects only.
+- **Typography:** Geist Sans + Geist Mono (custom typefaces — the tools-are-craft signal).
+- **Density posture:** Editorial density. Whitespace is luxurious on marketing, compressed on product.
+- **Dark-mode priority:** Dark-first on marketing, toggle on docs.
+
+### Hero pattern
+- Big geometric headline (display weight). Supporting line. Two CTAs (primary + secondary). Often an abstract WebGL/shader background animation that reinforces "we are builders."
+- Frequently uses live code / terminal snippets in the hero to say "this is a dev tool."
+
+### Design system
+- Public: Geist Design System (geist-ui.dev, now part of the Next.js ecosystem).
+- Token system: CSS variables, semantic naming, documented migration guides between versions.
+
+### Pricing pattern
+- 4 tiers (Hobby / Pro / Enterprise / Custom). Compare-all table after the 4 cards.
+- Enterprise = "Contact us" = deliberate friction signaling premium.
+
+### Onboarding
+- Dashboard: the git integration is the first interaction. The product reveals itself via the first deploy. Empty state is a CLI command.
+
+### Extracted DNA
+- **"Craft signaling via custom type."** Owning a typeface is an unfakeable premium flex.
+- **Terminal in the hero = audience signal.**
+- **Shader in the hero = product confidence.**
+
+---
+
+## 3. Stripe (stripe.com)
+
+### Visual DNA
+- **Color logic:** Blurple (Stripe's proprietary violet-blue) as identity anchor. Paired with extremely saturated secondary colors (orange, yellow, teal) used ONLY inside animated hero gradients.
+- **Typography:** Sohne (licensed premium typeface — again the custom-type signal).
+- **Density posture:** Editorial marketing, extremely dense product.
+- **Dark-mode priority:** Light-first on marketing (unusual for premium SaaS — signals "financial institution trust"), dark option on product.
+
+### Hero pattern
+- THE iconic animated gradient band. 2019-present. Industry-defining.
+- Large headline + short subhead + one primary CTA.
+- Under the hero: immediate proof via customer logo wall (trust signaling).
+
+### Design system
+- Internal-only until recently; now partially public via docs.
+- Famously rigorous: "Stripe press" level of documentation.
+
+### Pricing pattern
+- Transparent per-transaction pricing (a radical move for a fintech). The honesty IS the art direction.
+- Comparison tables are exhaustive and unashamed of their complexity.
+
+### Onboarding
+- Dashboard: "create a payment" is the first action. Empty state is a test-mode toggle + a code snippet. The product pedagogically teaches via the surface itself.
+
+### Extracted DNA
+- **"Light-first as trust signal."** Inverts the SaaS dark-first default, on purpose.
+- **Animated gradient = identity lock.** An aesthetic signature so strong it cannot be stolen.
+- **Honesty in pricing is art direction.** No "contact sales" theater.
+
+---
+
+## 4. Framer (framer.com)
+
+### Visual DNA
+- **Color logic:** White-dominant with one chromatic accent (blue) + frequent use of real product screenshots as color blocks.
+- **Typography:** Inter + a bold display pairing for hero.
+- **Density posture:** Extremely generous whitespace. Magazine-editorial.
+- **Dark-mode priority:** Light-first (creative tool convention).
+
+### Hero pattern
+- Massive display headline (often 120px+ on desktop). One animated product demo below. No CTA clutter.
+- Hero is a stage, not a sales pitch.
+
+### Design system
+- Public tokens via Framer's own design system (meta — they sell design tools).
+- Strong component library thinking.
+
+### Pricing pattern
+- Vertical cards, generous padding, annual/monthly toggle with savings-percentage highlight.
+- Free tier is loud (growth loop signal).
+
+### Onboarding
+- Canvas is the empty state. The tool opens and immediately invites interaction.
+- No tutorial modal walls.
+
+### Extracted DNA
+- **"Creative tools earn the right to be airy."** Whitespace = creative confidence.
+- **Product demos > feature lists.**
+- **The empty state IS the product.**
+
+---
+
+## 5. Arc (arc.net / The Browser Company)
+
+### Visual DNA
+- **Color logic:** Gradient-native. The interface itself morphs color based on the active space. Whimsy is the brand.
+- **Typography:** Custom sans + handwritten accent in marketing (signaling human warmth).
+- **Density posture:** Low density, high personality.
+- **Dark-mode priority:** Both work, but the color-morph logic means dark/light is almost irrelevant.
+
+### Hero pattern
+- Video-first hero (product demo video auto-playing).
+- Headline is poetic, not functional. "A calmer, more personal internet."
+- Hero says "we are making something you will fall in love with," not "we have features."
+
+### Design system
+- Not publicly documented — Arc's design is intentionally opaque to reinforce the "handcrafted" narrative.
+
+### Pricing pattern
+- Free (at launch) — the pricing page itself is a philosophical manifesto.
+
+### Onboarding
+- Highly choreographed. Literally a guided tour with personality. Animation-heavy.
+- First 5 minutes feel like an Apple product intro.
+
+### Extracted DNA
+- **"Personality is premium when the category is commodity."** Browsers are commodity — Arc sells personality.
+- **Video-first hero for products that need to be felt, not explained.**
+- **Onboarding as a theatrical performance.**
+
+---
+
+## 6. Raycast (raycast.com)
+
+### Visual DNA
+- **Color logic:** Deep true black + single red accent. Pairs with product screenshots rendered in ultra-crisp dark UI.
+- **Typography:** Inter + monospace accents (dev tool signal).
+- **Density posture:** Compact, efficient, keyboard-centric.
+- **Dark-mode priority:** Dark-first, absolute.
+
+### Hero pattern
+- Product screenshot in hero, large. Headline + short subhead + one CTA.
+- Keyboard shortcut hints visible everywhere.
+
+### Design system
+- Public brand guidelines + icon library. Strong opinion on iconography (monochrome, consistent stroke).
+
+### Pricing pattern
+- 3 tiers, clean horizontal layout. Pro tier elevated via subtle red accent (Von Restorff executed correctly).
+- Free is real — not a 14-day trial.
+
+### Onboarding
+- Cmd-space opens Raycast. That IS the onboarding. The product teaches by existing.
+
+### Extracted DNA
+- **"Keyboard-first is an aesthetic."** Showing shortcut hints everywhere is design theater for power users.
+- **One red dot on one page can justify $10/month.**
+- **Free forever + paid pro = trust.**
+
+---
+
+## Comparative Matrix
+
+| Ref | Density | Accent Strategy | Hero Anchor | Type Strategy | Dark/Light | Pricing Tiers | Onboarding Posture |
+|-----|---------|----------------|-------------|---------------|------------|---------------|-------------------|
+| Linear | High | 1 purple | Product screenshot | Inter only | Dark-first | 3 | Velocity-first |
+| Vercel | Editorial/compressed | Gradient accents | Code snippet + shader | Custom Geist | Dark-first | 4 | CLI-first |
+| Stripe | Editorial/very dense | Blurple + gradients | Animated gradient | Custom Sohne | Light-first | Per-transaction | Code-snippet pedagogy |
+| Framer | Airy | One blue | Display type | Inter + bold | Light-first | Tiered + free | Canvas-native |
+| Arc | Low/playful | Gradient morph | Video | Custom + handwriting | Agnostic | Free | Theatrical tour |
+| Raycast | Compact | One red | Product screenshot | Inter + mono | Dark-first | 3 | Cmd-space reveal |
+
+## Cross-Reference Patterns (extracted principles)
+
+1. **Custom typography = premium signal** (Vercel, Stripe, Arc). Licensing a proprietary face is one of the strongest unfakeable premium moves.
+2. **One accent. Forever.** (Linear, Raycast, Framer). Restraint reads as confidence.
+3. **Dark-first is the SaaS default** — except when the category explicitly needs trust signaling (Stripe, Framer) where light-first wins.
+4. **Hero should showcase the product, not decorate around it.** Stock photography, hero illustrations, mascots — absent in all 6.
+5. **Onboarding is a choreographed performance, not a feature walkthrough.** Every ref has a distinct first-5-minutes philosophy.
+6. **Pricing pages are design exhibits, not spreadsheets.** Comparative matrices are used AFTER the emotional pitch via the 3-4 cards.
+7. **Empty states are second impressions — treat them like mini-LPs.**
+8. **Shader/WebGL in hero signals technical confidence** when your audience is technical (Vercel).
+9. **"Contact Sales" as a tier is a deliberate premium friction play** (Vercel Enterprise, most B2B SaaS).
+
+## How to USE this KB
+
+- **Vertex (platform-aesthetic-director)** consults this KB before every new platform briefing to pattern-match the category fit
+- **Atlas (design-system-architect)** references the design system columns to propose token strategies
+- **Axiom (product-surface-director)** references onboarding/empty-state rows for logged-in product decisions
+- **Aura (premium-packaging-strategist)** references the cross-reference patterns as the raw material for her packaging briefs
+
+## Provenance
+
+Compiled 2026-04-12 from public surfaces of the 6 reference products and their public design system documentation. Recent-year updates may have shifted details — re-benchmark quarterly.
+
+---
+
+*@analyst (Scope) | squad-artdir v2.0 | KB v1.0*