--- bcp_version: "1.0" file_type: visual parent: https://registry.brandcontextprotocol.dev/mercury-62263f8d/.well-known/brand.md last_updated: 2026-09-23 --- # Visual guidance > **Public-source demonstration.** These observations come only from live mercury.com CSS, computed styles, and public product imagery checked 23 September 2026. They are implementation evidence, not a Mercury brand guide. Mercury has not reviewed or approved them. ## Authority and DAM Canonical visual assets are referenced by URL to Mercury's own distribution. They are not assets hosted by Encoded or the Registry. ```yaml asset_distribution: status: observed hosts: - name: "mercury.com Next static media" serves: "Arcadia and Arcadia Display font files, IO card texture, card chip, Mastercard hologram" - name: "DatoCMS datocms-assets.com" serves: "Credit hero photography and IO product stills on https://mercury.com/credit" rules: - "BCP records these paths so agents and demos can load the brand's live faces and images." - "Encoded does not re-host or redistribute the binaries in the BCP package or the Encoder repo." - "Paths are DAM and CDN build URLs. They may rotate when Mercury redeploys. Re-verify against live pages before republishing." - "Observed public URLs are implementation evidence for brand-audience demos, not a third-party license grant." - "Encoded Mercury /examples demos may hotlink them because the audience is the brand that already licensed the faces and imagery." ``` ## Authority and gaps ```yaml visual_authority: status: observed observed_pages: - "https://mercury.com/" - "https://mercury.com/spend-management" - "https://mercury.com/blog/introducing-mercury-spend" - "https://mercury.com/credit" observed_stylesheets: - "https://mercury.com/_next/static/css/1973f2a11f9951eb.css" - "https://mercury.com/_next/static/css/80f4b67cf119c7a3.css" - "https://mercury.com/_next/static/css/ab7eb5df801d89b4.css" - "https://mercury.com/_next/static/css/762f8a8807a5d9ff.css" - "https://mercury.com/_next/static/css/9ac2167e82b9ca7e.css" - "https://mercury.com/_next/static/css/16279424c0fa1991.css" - "https://mercury.com/_next/static/css/7fe9c4d08c60784f.css" not_confirmed: - "complete brand palette and accessibility pairings" - "font licensing or redistribution rights beyond observed public CDN delivery" - "formal logo clear-space and minimum-size rules" - "email-client support for Mercury's web fonts" - "current availability and reuse rights for campaign imagery" ``` ## Color Live CSS exposes the following variables. Variable names and values are recorded exactly. Neutral and beige roles were observed on Spend. Purple-base roles were observed on the credit page `dark-purple-theme`. ```yaml color: observed_tokens: - name: "--color-purple-magic-600" hex: "#5266EB" role: "primary call to action; Open account background on Spend and on /credit" - name: "--color-purple-magic-700" hex: "#4354C8" role: "hover state in the live token system; surface-primary-hover on dark-purple-theme" - name: "--color-purple-magic-800" hex: "#3442A6" role: "active state in the live token system; surface-primary-active on dark-purple-theme" - name: "--color-purple-base-0" hex: "#FFFFFF" role: "text on primary in dark-purple-theme" - name: "--color-purple-base-100" hex: "#F5F4FD" role: "emphasized text on the credit page dark-purple-theme" - name: "--color-purple-base-150" hex: "#EDECFB" role: "default text on the credit page dark-purple-theme" - name: "--color-purple-base-300" hex: "#C3C0DF" role: "subdued text on the credit page dark-purple-theme" - name: "--color-purple-base-800" hex: "#28253B" role: "elevated panel on the credit page dark-purple-theme" - name: "--color-purple-base-900" hex: "#1F1D2D" role: "secondary field and default surface on the credit page dark-purple-theme" - name: "--color-purple-base-950" hex: "#181623" role: "page field on the credit page dark-purple-theme" - name: "--color-neutral-base-800" hex: "#272735" role: "dark neutral ink" - name: "--color-neutral-base-950" hex: "#171721" role: "near-black surface or ink on other Mercury pages" - name: "--color-neutral-base-150" hex: "#EDEDF3" role: "soft cool ink on dark campaign fields" - name: "--color-neutral-base-50" hex: "#FBFCFD" role: "cool near-white in the live neutral scale" - name: "--color-beige-base-50" hex: "#FCFCFA" role: "soft off-white" - name: "--color-beige-base-100" hex: "#F6F5F2" role: "warm light section field" - name: "--color-beige-base-150" hex: "#EFEEE9" role: "secondary warm field" observed_image_mattes: - hex: "#B83885" evidence: "bgColor on image payload in https://mercury.com/credit HTML, not a CSS custom property" - hex: "#CF4399" evidence: "bgColor on image payload in https://mercury.com/credit HTML, not a CSS custom property" rules: - "On https://mercury.com/credit, use the dark-purple-theme field #181623, panels #28253B, and text #EDECFB." - "Use warm off-white and dark neutral fields where that page actually uses them. Do not replace the credit surface with a beige or near-black invent." - "Use #5266EB as a focused interactive accent, not an all-over neon wash." - "For the Mercury Spend campaign, a dark cinematic panel can frame the IO card or craft story; keep copy high contrast and restrained." - "Do not paint with the image matte magentas unless the live asset already carries them." - "If a gradient is required, derive it only from #5266EB, #4354C8, and #3442A6." - "Do not infer print values or additional brand colors from this web sample." ``` ## Typography Faces are loaded from Mercury's Next static media. Encoded does not host the font files. Re-verify the build-hash URLs before republishing. ```yaml typography: observed_families: display: family: "Arcadia Display" css_family: "arcadiaDisplay, 'arcadiaDisplay Fallback'" observed_weight: 480 evidence: "Computed H1 on https://mercury.com/credit (arcadia-display-3) and H1/H2 on https://mercury.com/spend-management" body_and_ui: family: "Arcadia" css_family: "arcadia, 'arcadia Fallback'" observed_weights: [360, 400, 420] evidence: "Computed body and CTA styles on https://mercury.com/credit and https://mercury.com/spend-management" editorial_display: family: "Tiempos Fine" css_family: "tiemposFine, 'tiemposFine Fallback'" observed_weight: 500 evidence: "Computed H1 style on https://mercury.com/blog/introducing-mercury-spend. Not used on https://mercury.com/credit." observed_font_files: - family: arcadia css_family: "arcadia" weight_range: "360 500" format: woff2 font_display_observed: optional url: "https://mercury.com/_next/static/media/66786c931e084141-s.p.woff2" evidence: "@font-face in https://mercury.com/_next/static/css/1973f2a11f9951eb.css" - family: Arcadia Display css_family: "arcadiaDisplay" weight_range: "320 480" format: woff2 font_display_observed: optional url: "https://mercury.com/_next/static/media/92d547acff458051-s.p.woff2" evidence: "@font-face in https://mercury.com/_next/static/css/80f4b67cf119c7a3.css" fallback_guidance: email: "Load the observed mercury.com font URLs with @font-face for in-browser demos. Keep Georgia after arcadiaDisplay, and Arial or Helvetica after arcadia, as last-resort fallbacks only." rights_note: "These URLs are observed public CDN evidence, not a Mercury license grant to third parties. Do not package or redistribute Mercury font files. Encoded's Mercury /examples demo may hotlink them because the audience is the brand that licensed the faces." rules: - "Prefer loading the observed live mercury.com font URLs via @font-face so rendering matches the brand site." - "Use the css_family names arcadiaDisplay and arcadia. Naming Arcadia without a src does not load the face." - "Do not redistribute or re-host the font binary files in the BCP package or Encoder repo." - "Paths are build-hash URLs and may change when Mercury redeploys. Re-verify against live CSS before republishing." - "Use Arcadia Display for product-marketing headlines and Arcadia for body and controls when the CDN files are available." - "The blog template uses Tiempos Fine for its H1. Do not collapse every Mercury surface into one display face. /credit does not use Tiempos." - "Keep financial disclosures comfortably legible in fallback fonts." ``` ## Components and layout ```yaml components: primary_cta: background: "#5266EB" foreground: "#FFFFFF" radius_px: 32 observed_font: "Arcadia 420" source: "Computed Open account styles. /credit uses rounded-4xl (2rem) and bg-surface-primary, which resolves to #5266EB on dark-purple-theme." secondary_cta: background: "rgba(112, 115, 147, 0.10)" foreground: "#2A2924" radius_px: 40 source: "Computed Explore spend styles on https://mercury.com/spend-management" layout: - "Use generous breathing room and a small number of decisive content blocks." - "Pair large display type with precise, compact product explanation." - "On /credit, keep the dark-purple field and let product photography carry the card." - "Use interface-like budget, policy, and activity details to make control concrete." - "Keep a visible disclosure block separated by spacing and contrast, not microscopic type." ``` ## Imagery Product photography and craft files live on Mercury's DAM and CDN. Hotlink the recorded URLs. Do not copy binaries into this package. ```yaml imagery: observed_assets: - role: credit_hero_wide url: "https://www.datocms-assets.com/115132/1754699738-2025-07-22_fem_credit-hero_16x5.webp" page: "https://mercury.com/credit" - role: credit_hero url: "https://www.datocms-assets.com/115132/1754699761-2025-07-22_fem_credit-hero_16x9.webp" page: "https://mercury.com/credit" - role: credit_hero_mobile url: "https://www.datocms-assets.com/115132/1754699784-2025-07-22_fem_credit-hero-mobile_16x9.webp" page: "https://mercury.com/credit" - role: cards_product_3_2 url: "https://www.datocms-assets.com/115132/1710945254-3_2_cards-2x.png" page: "https://mercury.com/credit" - role: cards_product_16_5 url: "https://www.datocms-assets.com/115132/1710945212-16_5_cards-2x.png" page: "https://mercury.com/credit" - role: spend_controls_3_2 url: "https://www.datocms-assets.com/115132/1710946193-3_2_controls-2x.png" page: "https://mercury.com/credit" - role: spend_controls_16_5 url: "https://www.datocms-assets.com/115132/1710946146-16_5_controls-2x.png" page: "https://mercury.com/credit" - role: permissions_3_2 url: "https://www.datocms-assets.com/115132/1710960802-3_2_permissions-2x.png" page: "https://mercury.com/credit" - role: permissions_16_5 url: "https://www.datocms-assets.com/115132/1710960769-16_5_permissions-2x.png" page: "https://mercury.com/credit" - role: subscriptions_3_2 url: "https://www.datocms-assets.com/115132/1711045494-3_2_subscriptions-2x.png" page: "https://mercury.com/credit" - role: subscriptions_16_5 url: "https://www.datocms-assets.com/115132/1711045338-16_5_subscriptions-2x.png" page: "https://mercury.com/credit" - role: receipt_matching url: "https://www.datocms-assets.com/115132/1740001929-2025-02-19_fem_receipt-matching-cards_3x2.jpg" page: "https://mercury.com/credit" - role: cashback url: "https://www.datocms-assets.com/115132/1710961167-4_5_cashback-2x.png" page: "https://mercury.com/credit" - role: credit_limit url: "https://www.datocms-assets.com/115132/1711039504-4_5_credit-limit-2x.png" page: "https://mercury.com/credit" - role: io_card_texture url: "https://mercury.com/images/spend-management/io-card-texture.666dc1c3d6ed.svg" page: "https://mercury.com/spend-management" - role: card_chip url: "https://mercury.com/images/spend-management/card-chip.9e3f6fb5139b.svg" page: "https://mercury.com/spend-management" - role: mastercard_hologram url: "https://mercury.com/_next/static/media/mastercard-hologram.e6519f87.png" page: "https://mercury.com/" rules: - "Encoded Mercury /examples demos should hotlink these observed assets so brand-audience renders match mercury.com." - "Do not copy binaries into the BCP package or Encoder repo." - "Public CDN availability is not a third-party license grant. Encoded demos for the Mercury audience may use them." - "Re-verify paths before republishing. Build hashes can change." - "Prefer these photo and SVG assets over invented CSS card shapes or neon gradients." photographic_and_art_direction: - "Product interfaces shown with real hierarchy and credible financial detail." - "Credit marketing uses the IO card photography served from DatoCMS." - "Sculptural, tactile, materially rich imagery for the IO card craft story on Spend." - "The credit page is a dark-purple field. Warm off-white is for surfaces that actually use it." forbidden_treatments: - "generic neon fintech gradients" - "crypto charts or coins unrelated to the product" - "a sentient robot holding a payment card" - "stock handshake or boardroom photography" - "fake transaction data presented as a customer result" - "logo approximation or an invented Mercury wordmark" - "a CSS blob standing in for the IO card when the recorded texture, chip, or hero photo is available" ``` ## Email rendering notes - Build with table-based structure and inline CSS for broad email-client support. - For Encoded public Mercury example pages viewed in a browser, load the observed Arcadia URLs with @font-face. Do not name the family without a src. - Keep Georgia and Arial or Helvetica only after those faces, as last-resort fallbacks. - Hotlink the observed credit and IO assets. Do not redraw them as CSS shapes. - Use a live-text CTA with the observed indigo, white label, and 32px radius. - Include plain-text-equivalent meaning for every visual block. - Do not embed font or image binaries in the Encoder repo. - Keep the fintech, Patriot Bank, and Mastercard disclosures visible in the email body. - Do not use an em dash. Follow voice.md and voice/anti-ai.md.