--- name: bananas-brand-guidance description: Build artifacts that follow the public bananas Brand DNA. brandVersion: 0.1 schemaVersion: 1.0 --- # Build like bananas 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: Great taste, awesome design, and affordable. It's bananas! Positioning (proposal, not confirmed): For [priority audience], we are the [category] that [distinct benefit], because [proof]. Primary audience (proposal, not confirmed): [Who experiences the problem and chooses the solution.] Influencing audience (proposal, not confirmed): [Who recommends, approves, or enables the decision.] ## 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: Honest and truthful. Do not say: inflated claims, artificial urgency, and generic marketing superlatives. Voice dimensions: - Formality: 0/100 from Casual to Formal. - Volume: 87/100 from Quiet to Loud. - Expression: 21/100 from Concise to Expressive. - Complexity: 34/100 from Simple to Elaborate. - Finish: 50/100 from Rough to Polished. ## Visual system Signature rule: The name is variable. Proportion is the rule. - **Signal:** #FFCA0D — Emphasis and action - **Accent:** #1B4AF3 — Expressive highlight and secondary emphasis - **Success:** #3DED1F — Positive states, confirmation, and completed actions - **Warning:** #ED8026 — Caution, attention, and pending conditions - **Error:** #B82350 — Errors, destructive actions, and critical states - **Paper:** #FAF6CB — Background: primary canvas and light surfaces - **Ink:** #261800 — Foreground: primary text, marks, and dark surfaces - **Border:** rgba(38, 24, 0, 0.43) — Borders, dividers, and structural lines Typography: - Headings: Space Grotesk, weight 700, source https://fonts.google.com/specimen/Space+Grotesk?preview.script=Latn - Body: Inter, weight 400, source https://fonts.google.com/specimen/Inter - Utility: Space Mono, weight 400, source https://fonts.google.com/specimen/Space+Mono?preview.script=Latn Use borders at thin weight with 0rem radius. Do not default buttons to 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: Images reveal relationships; they never act as generic decoration. - **Focused Work:** [21eb2840e0203c85520b0f9b5c7ee10090e56b9410e61918b7ace9886f9c6ca3.png](./imagery/21eb2840e0203c85520b0f9b5c7ee10090e56b9410e61918b7ace9886f9c6ca3.png) — A sharp editorial character caught in a recognizable moment of concentration. - **Deliberate Pause:** [70cea2c28ef2026ed23351237ec1316a199714b806711238ad59dd4de8073977.png](./imagery/70cea2c28ef2026ed23351237ec1316a199714b806711238ad59dd4de8073977.png) — A composed character and generous field turn stillness into a confident gesture. Do: Show action, imperfection, and enough context to understand the scene. Avoid: Obvious stock imagery, staged gestures, and filters that flatten skin tones. 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: Guide, prove, and invite action across responsive screens. Rule: Responsive hierarchy by default. ### Presentations Reader job: Guide a decision through a narrative sequence. Rule: One idea per frame. ### Social media cards/posts Reader job: Create relevant attention in a compact format. Rule: One tension, one gesture. ## 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: - None recorded. Proposals must remain visibly provisional: - positioning.statement - positioning.primaryAudience - positioning.influencingAudience Missing decisions must not be invented: - essence.centralIdea - essence.role - essence.tension - essence.promise ## 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.