dashbook
Brand / Card

Card.

The Dash.fi credit card art configurator. Generates Mastercard MDES-compliant assets for tokenization (Apple Pay, Google Pay, Samsung Pay). Pick a variant, tweak the design live, download all four MDES slots in SVG and PNG.

Variant

Single canonical Dash.fi card. Mastercard composites the brand mark + PAN per-token at render time — one design serves every BIN.

The Dash.fi card — facelift design language. Jade-deep base (#123B39) with a subtle jade highlight, cream wordmark, jade app icon with cream glyph. Single source of truth for every BIN — Mastercard composites the brand mark + PAN at render time.

Preview

What the card LOOKS like in Apple Pay / Google Pay after Mastercard composites their brand mark on top. Updates live with the controls below.

Card · 1536 × 969 · #123B39
App icon · 100 × 100

The MDES bundle ships all 4 upload slots (SVG + PNG) plus a README with submission steps and naming conventions — one click instead of eight.

Customize

Edits are live but not persisted. Copy the values into `src/lib/chrome/card-sources.ts` to save as a new preset.

MDES asset slots

Each slot uploads separately to the Mastercard MDES portal. Dimensions are fixed — these are the exact pixel sizes the MC upload form requires.

background
1536 × 969
app icon
100 × 100
cobrand logo
1372 × 283
issuer logo
1372 × 283
MDES submission checklist

Upload all four assets in this order. Each asset name field accepts up to 30 characters.

  1. Card Background (1536 × 969, SVG or PNG) — suggested name: dashfi-card-bg-jade
  2. App Icon (100 × 100, PNG) — suggested name: dashfi-app-icon-jade
  3. Cobrand Logo (1372 × 283, SVG or PNG) — suggested name: dashfi-cobrand
  4. Issuer Logo (1372 × 283, SVG or PNG) — transparent placeholder; suggested name: dashfi-issuer-hide

Configure the colour fields separately in MC's UI: Card Background #123B39, PAN #FFFFFF, Card Description #EBEDE4.

Do & Don't

Common pitfalls when prepping MDES uploads.

Do

Upload all four MDES slots per BIN — Card Background, App Icon, Cobrand Logo, Issuer Logo. Missing any slot fails the MC submission.

Do

Match the colour fields you configure separately in MC (Background #2C3FB2, PAN #FFFFFF, Description #EBEDE4) to the values bundled in your design.

Do

Use the 1×1 transparent issuer slot to hide the issuer mark. Dash.fi designs bake the issuer indication into the background.

Don't

Don't ship card artwork that occupies the bottom-right corner — Mastercard composites their network mark there at render time and will obscure custom art.

Don't

Don't include the PAN in your uploaded assets. Mastercard renders the masked PAN themselves from the tokenized card data.

Don't

Don't use raster-only assets when SVG works — SVG re-colours cleanly across MDES updates and stays well under the 1MB upload limit.

Programmatic access

Same assets exposed via Dashbook's MCP server and HTTP API. See /use/dev to connect.

  • MCP tool: marketing_get_card_art({ variant, slot, format }) returns the SVG inline + URL.
  • HTTP API: /api/card/<variant>/<slot>. Slot names: background, app-icon, cobrand-logo, issuer-logo, preview. Returns SVG with Content-Type: image/svg+xml, 24h cache, CORS open.