This record is managed by an account, but domain control has not been proven.
visual.md
---
bcp_version: "1.1.1"
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.