--- name: twyn-brand-guidance description: Build artifacts that follow the public TWYN Brand DNA. brandVersion: 1.3 schemaVersion: 1.0 --- # Build like TWYN This file is compiled from [brand-dna.json](./brand-dna.json), the canonical source. Use it for decisions and use [brand.css](./brand.css) for repeatable mechanics. Do not edit generated files directly. ## Brand context Purpose: Todos os brasileiros usam nossas tecnologias Positioning (decision): TWYN provides facial identity validation through Web and Native SDKs, combining clear user journeys with a probabilistic antifraud score that supports the customer’s decision. Primary audience (decision): Organizations integrating identity validation into digital products. Influencing audience (decision): Product, engineering, security and compliance teams evaluating identity-validation journeys. ## Priority order 1. Preserve supplied facts, constraints, qualifiers, and accessibility requirements. 2. Make the reader's job and the strongest supported message clear before styling. 3. Use the published Brand DNA assets, tokens, and primitives before inventing new ones. 4. Adapt composition to the material while preserving a recognizable brand system. ## Work from the reader's job Before composing, identify who opens the artifact, what they need to understand or decide, the strongest supported message, the evidence that earns it, and the caveat that could change it. Preserve supplied facts and distinguish observation, proposal, and missing information using the provenance in the canonical JSON. - Give each artifact one dominant idea and an obvious reading path. - Use hierarchy, alignment, and spacing before adding containers or decoration. - Keep exact evidence, units, sources, and caveats close to the claims they qualify. - Make responsive behavior part of the composition, not a cleanup step. ## Voice and copy Say: Use clear action verbs, explain limits alongside the promise, and make the next step understandable. Prefer recognizable technical terms and real examples.. Do not say: Empty superlatives, fear-based language, science-fiction metaphors, absolute fraud-prevention promises, or future features presented as available products. Voice dimensions: - Formality: 60/100 from Casual to Formal. - Volume: 25/100 from Quiet to Loud. - Expression: 25/100 from Concise to Expressive. - Complexity: 25/100 from Simple to Elaborate. - Finish: 80/100 from Rough to Polished. ## Visual system Signature rule: Technical clarity, identity in motion, and confidence without rigidity. Use generous neutral surfaces; reserve Signal for recognition and action. - **Signal:** #77CDCF — Brand recognition and primary emphasis; exact original TWYN website signal color. - **Accent:** #A75FE3 — Secondary emphasis; a mid-tone purple from the Roadmap family that complements Signal. - **Success:** #49CA59 — Positive states, confirmation, and completed actions - **Warning:** #EDB335 — Caution, attention, and pending conditions - **Error:** #D2284A — Errors, destructive actions, and critical states - **Paper:** #E9F3F0 — Background: primary canvas and light surfaces - **Ink:** #0A2431 — Foreground: primary text, marks, and dark surfaces - **Border:** rgba(10, 36, 49, 0.12) — Borders, dividers, and structural lines Typography: - Headings: Inter, weight 700, source https://fonts.google.com/specimen/Inter - Body: Inter, weight 400, source https://fonts.google.com/specimen/Inter - Utility: Anonymous Pro, weight 400, source https://fonts.google.com/specimen/Anonymous+Pro Use borders at thin weight with 2rem radius. Buttons may use pill geometry. ## Use the published CSS API Load the stylesheet once: ```html ``` Use its `--brand-*` tokens and these primitives instead of recreating common mechanics: - Layout: `.bd-page`, `.bd-shell`, `.bd-grid`, `.bd-stack`, `.bd-cluster` - Type: `.bd-display`, `.bd-title`, `.bd-heading`, `.bd-body`, `.bd-label`, `.bd-meta` - Evidence: `.bd-stat-grid`, `.bd-stat`, `.bd-table-wrap`, `.bd-table` - Surfaces and actions: `.bd-card`, `.bd-band`, `.bd-button` Page-specific CSS may define the unique composition, but it should consume the public tokens and must not override the behavior of a `.bd-*` primitive. ## Assets and imagery Logo assets: [default](./logo/default.svg), [wordmark](./logo/wordmark.svg), [icon](./logo/icon.svg), [black](./logo/black.svg), [white](./logo/white.svg). Imagery principle: Make identity technology understandable and human. Keep the proprietary ID Pattern subtle in interfaces and expressive in campaigns. - **TWYN in three dimensions:** [twyn-3d.webp](./imagery/twyn-3d.webp) — The official TWYN symbol rendered as a translucent turquoise object, with rounded volume, polished edges and a soft floating shadow. Use this reference for dimensional brand expressions while preserving the original symbol proportions. - **Fingerprint capture:** [fingerprint-capture.png](./imagery/fingerprint-capture.png) — Existing TWYN fingerprint reference. Fingerprint capture is roadmap context, not a currently available product. Do: Preserve full text contrast. Use official ID Pattern variations. Show human context with technical clarity. Avoid: Do not combine the ID Pattern with another biometric texture. Avoid generic security clichés and effects without a purpose. Iconography: Bring your own icons. Choose one source and use it consistently. Use Lucide Outline from https://lucide.dev/icons/. ## Information, data, and accessibility Data makes differences legible and decisions verifiable. - Keep value, unit, period, and source together. - Reinforce semantic color with labels or patterns. - Do not use scales that dramatize differences. Brand recognition cannot depend on excluding people. - Use at least 16px for body text and readable line lengths. - Provide visible focus, logical order, and practical touch targets. - Never make information depend on animation, color, or audio alone. - Use direct sentences, text alternatives, and non-exclusionary terms. - Never create artificial urgency. - Never hide relevant conditions. - Never imply certainty where risk exists. - Never decorate critical information at the cost of clarity. ## Use cases ### Web pages Reader job: Valide com simplicidade. Rule: Identidade sem atrito. ### Presentations Reader job: Tecnologia que conecta. Rule: Confiança em cada interação. ### Social media cards/posts Reader job: Reconheça o que é único. Rule: Sua identidade. Seu controle. ## Reject generated-design reflexes - Generic dashboard reflex — do not turn every artifact into a grid of interchangeable cards. - Decoration as evidence — do not use charts, icons, gradients, or surfaces without an informational job. - Equal-weight hierarchy — do not give every section, metric, or action the same visual emphasis. - Brand by color alone — preserve typography, composition, imagery, voice, and asset rules together. - Unsupported confidence — do not invent claims, urgency, certainty, proof, or calls to action. ## Provenance and uncertainty Confirmed evidence paths: - Migrated from TWYN src/config/brand-system.ts, messages/pt-BR.json, src/app/brand-center/page.tsx and existing public assets on 2026-09-14. - The owner approved preserving Signal exactly and fine tuning the Brand DNA palette. Website colors remain independent and require a separate explicit change. - The owner approved keeping the Brand DNA interface in English and preserving /id-pattern. - The owner requested a mid-tone purple from the Roadmap family for Accent on 2026-09-14. - The designer supplied exact palette and scale settings and requested removal of Roadmap and Roadmap Ink on 2026-09-14. Accent replaces those additional colors in Brand DNA; website colors remain independent. - The designer requested removal of the extended palette, supplied exact radius and shadow settings, and replaced Identity light field with the existing TWYN 3D symbol reference. The imagery text describes that supplied reference; it does not claim to recover an original generation prompt. Proposals must remain visibly provisional: - positioning - voice.dimensions - visual.colors[2] - visual.colors[3].role - visual.colors[4].role - visual.colorScale.lightSteps - visual.colorScale.darkSteps - visual.colorScale.saturationFlip - visual.colorScale.contrastColorMode - visual.colorScales.Success - visual.semanticColors - visual.borders.thickness - visual.borders.buttonPill - informationAndData - useCases - agentGuidance Missing decisions must not be invented: - imagery.directions[0].originalPrompt - imagery.directions[1].originalPrompt ## Inspect before delivery Check the first viewport, reading order, responsive behavior, overflow, focus visibility, image alternatives, exact facts, asset use, and whether the artifact follows its use-case rule. Run the Brand DNA eval when an HTML artifact is available.