> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lightspark.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Card design guidelines
> Design the front of your card, choose the back's options, and submit artwork for physical cards and digital wallets
export const TemplateDownloads = ({id}) => {
const base = '/images/cards/card-design/card-template-';
const items = [{
face: 'front',
title: 'Front template'
}, {
face: 'back',
title: 'Back template'
}];
return
;
};
export const CardSamples = () => {
const W = 1536;
const H = 969;
const R = 57;
const squircle = (w, h, r, smoothing, ox, oy) => {
const exp = 2 + smoothing * 4;
const p = 2 / exp;
const k = 22;
const pts = [];
const arc = (cx, cy, sx, sy, swap) => {
for (let i = 0; i <= k; i++) {
const t = i / k * (Math.PI / 2);
const u = swap ? Math.pow(Math.sin(t), p) : Math.pow(Math.cos(t), p);
const v = swap ? Math.pow(Math.cos(t), p) : Math.pow(Math.sin(t), p);
pts.push([ox + cx + sx * r * u, oy + cy + sy * r * v]);
}
};
arc(w - r, r, 1, -1, true);
arc(w - r, h - r, 1, 1, false);
arc(r, h - r, -1, 1, true);
arc(r, r, -1, -1, false);
let d = 'M ' + (ox + r).toFixed(2) + ' ' + oy.toFixed(2);
for (const [x, y] of pts) d += ' L ' + x.toFixed(2) + ' ' + y.toFixed(2);
return d + ' Z';
};
const cardPath = squircle(W, H, R, 0.12, 0, 0);
const mix = (a, b, t) => {
const c = (h, i) => parseInt(h.slice(1 + i * 2, 3 + i * 2), 16);
const v = i => Math.round(c(a, i) * (1 - t) + c(b, i) * t);
return 'rgb(' + v(0) + ',' + v(1) + ',' + v(2) + ')';
};
const chip = (id, face) => {
const x = 152;
const y = 324;
const w = 236;
const h = 164;
const r = w * 19.5 / 151;
const gap = 2.7;
return
{[338, 385, 432].map(py => )}
;
};
const contactless = ink => {
const h = 90;
const cy = 470 + h / 2;
const cx = 1482 - h * 0.72;
const a = Math.PI / 180 * 38;
const arc = r => 'M ' + (cx + r * Math.cos(-a)) + ' ' + (cy + r * Math.sin(-a)) + ' A ' + r + ' ' + r + ' 0 0 1 ' + (cx + r * Math.cos(a)) + ' ' + (cy + r * Math.sin(a));
return
{[0.14, 0.33, 0.52, 0.71].map(k => )}
;
};
const lockup = id => ;
const front = (id, color, ink, title) => ;
const back = (id, color, stripe, ink, title) => ;
return
{front('color', '#0b3d91', '#ffffff', 'Full-color card, front: a printed blue body with a white logo right of the chip')}
White card stock, front. Any color or artwork, printed edge to edge.
{back('color', '#0b3d91', '#1a1a1a', '#ffffff', 'Full-color card, back: the color continues, the stripe band runs to the top edge, silver foil lockup')}
White card stock, back. Your color continues; stripe band to the top edge; silver foil lockup.
{front('mono', '#111111', '#ffffff', 'Black-core card, front: black body with a white logo right of the chip')}
Black core, front. Logo in white ink or one spot color.
{back('mono', '#111111', '#242426', '#ffffff', 'Black-core card, back: white personalization and a silver foil Visa DEBIT lockup')}
Black core, back. White personalization, silver foil lockup.
;
};
export const CardBlueprint = ({face}) => {
const W = 1536;
const H = 969;
const R = 57;
const SAFE = 54;
const PX_PER_MM = 17.94;
const [unit, setUnit] = React.useState('px');
const f = px => unit === 'mm' ? (px / PX_PER_MM).toFixed(2) + ' mm' : px + ' px';
const arrow = 'url(#bp-arrow-' + face + ')';
const GAP = 10;
const OVER = 14;
const TXT = 30;
const textLen = t => t.length * TXT * 0.62 + 24;
const STEM = 50;
const dimH = (x1, x2, y, edgeY, side, note) => {
const out = y < edgeY ? -1 : 1;
const label = f(x2 - x1) + (note || '');
const gap = textLen(label);
const span = x2 - x1;
const mid = (x1 + x2) / 2;
const mode = span >= gap + 60 ? 'inline' : span >= gap ? 'beside' : 'leader';
const dir = side || (mid < W / 2 ? -1 : 1);
const from = dir > 0 ? x2 : x1;
const to = from + dir * STEM;
return
{mode === 'inline' ?
{label}
: mode === 'beside' ?
{label}
: 0 ? 'start' : 'end'}>
{label}
}
;
};
const dimV = (y1, y2, x, edgeX, side, note) => {
const out = x > edgeX ? 1 : -1;
const label = f(y2 - y1) + (note || '');
const gap = textLen(label);
const span = y2 - y1;
const mid = (y1 + y2) / 2;
const mode = span >= gap + 60 ? 'inline' : span >= gap ? 'beside' : 'leader';
const dir = side || (mid < H / 2 ? -1 : 1);
const from = dir > 0 ? y2 : y1;
const to = from + dir * STEM;
const bx = x + out * 28;
return
{mode === 'inline' ?
{label}
: mode === 'beside' ?
{label}
: 0 ? 'end' : 'start'} dominantBaseline="middle" transform={'rotate(-90 ' + x + ' ' + (to + dir * 8) + ')'}>
{label}
}
;
};
const balloon = (n, cx, cy, tx, ty) => {
const dx = tx - cx;
const dy = ty - cy;
const len = Math.sqrt(dx * dx + dy * dy) || 1;
const sx = cx + dx / len * 28;
const sy = cy + dy / len * 28;
return
{n}
;
};
const radius = rx =>
{'R ' + f(rx)}
;
const contactless = (right, top, h) => {
const cy = top + h / 2;
const cx = right - h * 0.72;
const a = Math.PI / 180 * 38;
const arc = r => 'M ' + (cx + r * Math.cos(-a)) + ' ' + (cy + r * Math.sin(-a)) + ' A ' + r + ' ' + r + ' 0 0 1 ' + (cx + r * Math.cos(a)) + ' ' + (cy + r * Math.sin(a));
return
{[0.14, 0.33, 0.52, 0.71].map(k => )}
;
};
const chip =
{[338, 385, 432].map(y => )}
;
const lockup = ;
const body = rx => ;
const hatch = ;
const zone = (x, y, w, h, kind, rx = 8) => kind === 'keepout' ? : ;
let title = '';
let key = [];
let drawing = null;
if (face === 'front') {
title = 'Front of card: overall dimensions, chip position and keep-clear zone, logo placement, and safe margin';
key = [{
n: 1,
kind: 'fixed',
label: 'Chip module, 236 × 164'
}, {
n: 2,
kind: 'keepout',
label: 'Keep-clear zone, 308 × 254'
}, {
n: 3,
kind: 'yours',
label: 'Logo, right of the chip on its mid-line'
}, {
n: 4,
kind: 'none',
label: 'Safe margin for text and logos'
}];
drawing =
{body(R)}
{zone(107, 279, 308, 254, 'keepout', 16)}
{chip}
{zone(974, 361, 410, 90, 'yours')}
Your logo
{dimH(0, W, -170, 0)}
{dimH(0, 152, -80, 0, 1)}
{dimH(1384, W, -80, 0)}
{dimH(152, 388, H + 80, H)}
{dimV(0, H, W + 170, W)}
{dimV(H - SAFE, H, W + 80, W)}
{dimV(0, 324, -80, 0)}
{dimV(324, 488, -80, 0, 1)}
{radius(R)}
{balloon(1, 261, 640, 300, 488)}
{balloon(2, 500, 250, 415, 290)}
{balloon(3, 1179, 560, 1179, 451)}
{balloon(4, 700, 800, 700, H - SAFE)}
;
} else if (face === 'back') {
title = 'Back of card: the fixed template with the magnetic stripe, account block, contactless indicator, Visa DEBIT lockup, support line, and issuer statement';
key = [{
n: 1,
kind: 'fixed',
label: 'Magnetic stripe, band to the top edge'
}, {
n: 2,
kind: 'yours',
label: 'Account block: your ink and typeface'
}, {
n: 3,
kind: 'fixed',
label: 'Contactless indicator'
}, {
n: 4,
kind: 'fixed',
label: 'Visa DEBIT lockup, silver foil'
}, {
n: 5,
kind: 'yours',
label: 'Support phone and URL'
}, {
n: 6,
kind: 'fixed',
label: 'Issuer statement'
}];
drawing =
{body(R)}
{zone(56, 476, 620, 187, 'yours')}
Cardholder name
4000 1234 5678 9010
EXP 11/27
CVV 123
{contactless(1482, 470, 90)}
{lockup}
{zone(56, 876, 620, 55, 'yours')}
{'1-800-000-0000\u00A0\u00A0\u00A0yourbrand.com/help'}
Issued by Lead Bank
{dimH(0, W, -170, 0)}
{dimH(0, 56, -80, 0)}
{dimH(1143, 1482, H + 80, H)}
{dimH(1482, W, H + 80, H, 1, ' typ.')}
{dimV(0, H, W + 170, W)}
{dimV(0, 72, W + 80, W)}
{dimV(72, 300, W + 80, W)}
{dimV(704, 915, W + 80, W)}
{dimV(0, 476, -80, 0)}
{dimV(476, 663, -80, 0)}
{balloon(1, 768, 400, 768, 300)}
{balloon(2, 800, 570, 676, 570)}
{balloon(3, 1300, 515, 1417, 515)}
{balloon(4, 980, 810, 1143, 810)}
{balloon(5, 720, 780, 460, 876)}
{balloon(6, 720, 940, 320, 923)}
;
} else {
title = 'Wallet card art: squared corners, the lower-left quadrant left empty for the wallet, and the Visa DEBIT lockup in the lower right';
key = [{
n: 1,
kind: 'yours',
label: 'Your front design'
}, {
n: 2,
kind: 'keepout',
label: 'Leave empty for the wallet\'s last 4 digits'
}, {
n: 3,
kind: 'fixed',
label: 'Visa DEBIT lockup, as on the back'
}];
drawing =
Your front design
{zone(0, H / 2, W / 2, H / 2, 'keepout', 0)}
{lockup}
{dimH(0, W, -170, 0)}
{dimH(0, W / 2, H + 80, H)}
{dimV(0, H, W + 170, W)}
{dimV(H / 2, H, -80, 0)}
R 0
{balloon(1, 1100, 200, 900, 200)}
{balloon(2, 384, 400, 384, H / 2)}
{balloon(3, 980, 810, 1143, 810)}
;
}
return
{key.map(k =>
{k.n}
{k.label}
)}
;
};
Your physical card and its digital wallet art share one design: the front
of the card. You design the front and choose a few options for the back. The
chip, the magnetic stripe, the Visa marks, and the issuer statement are fixed.
We prepare the production files and take the design through Visa's review.
Physical cards are set up with your Lightspark contact as part of card
program onboarding. The Cards API issues virtual cards; see
[Issuing cards](/cards/card-management/issuing-cards).
Start from the templates. Each is a 1536 × 969 SVG overlay with the guides
on their own layers; it opens as editable vectors in Figma, Illustrator,
Sketch, and Affinity. Keep it on a hidden or non-printing layer while you
design.
## What you choose and what is fixed
| Surface | You choose | Fixed |
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| Front | Background color or artwork, your logo and where it sits | Chip position |
| Back | Background color (usually the front's), personalization ink color and typeface, your support phone number and URL | Magnetic stripe, account block layout, contactless indicator, Visa DEBIT lockup in silver foil, "Issued by Lead Bank" statement |
| Digital wallet art (Apple Pay, Google Pay) | The card image, derived from your front by default or supplied by you; your app icon and logo; two colors | Visa DEBIT lockup placement; the image must be recognizably the same card as the physical one |
## Card body
Cards print on white card stock. Any color, gradient, or artwork prints edge
to edge on both faces in CMYK, and the card edge is white. A black-core body
is also available for black cards.
* **White stock**: the standard body. Any color or artwork on the front; the same color continues on the back. The stripe band runs to the top edge of the back. Best for brand colors, gradients, and photographic or illustrated artwork.
* **Black core**: black plastic through the card, so the edge is black. Personalization prints in white, and the logo prints in white or in one spot color (give us the Pantone number). Finishes: matte, gloss, or satin. Best for a black or one-color brand.
Both bodies carry the Visa DEBIT lockup as the Premium Visa Brand Mark: silver
hot-stamped foil on the back. Because the card carries the premium mark, Visa
does not require the dove hologram, and the card has none.
## Canvas
Work on a 1536 × 969 px artboard. It has the proportions of an ISO/IEC 7810
ID-1 card, and it is also the size Visa requires for digital wallet art, so
one file serves both.
| | Physical | On the artboard |
| ------------- | -------- | --------------- |
| Width | 85.6 mm | 1536 px |
| Height | 53.98 mm | 969 px |
| Corner radius | 3.18 mm | 57 px |
| Scale | 1 mm | 17.94 px |
Keep the artboard's corners square. The manufacturer cuts the corners;
preview them at 57 px if you want to see the result. Run backgrounds past the
card edge to give the cut bleed; the bleed amount depends on the
manufacturer's press, and we confirm it with your proof. Anything that must
stay legible (logos, text) stays inside a 54 px (3 mm) safe margin.
The [templates at the top of this page](#templates) carry every guide in
this figure as a layer.
## Front
The front carries your brand and the chip. Nothing else.
* **Chip**: the module sits at (152, 324) and measures 236 × 164 px. It is embedded after printing, so nothing prints over it. Keep the zone from x 107 to 415 and y 279 to 533 clear of logos and text; background color and artwork may run through it.
* **Logo**: the samples put it right of the chip, centered on the chip's mid-line (y 406), with its right edge 152 px from the card edge, 90 px tall. A larger mark, a centered mark, or a bleeding watermark all work if they stay out of the chip zone and legible parts stay inside the safe margin.
* **Artwork**: photographs, gradients, and patterns are fine on white stock. Supply vector artwork where you can. Raster artwork must be at least 1536 × 969 px at card size; larger is better.
Do not put on the front:
* Cardholder name, card number, expiry date, or security code. These print on the back.
* A drawn chip, hologram, or any imitation of a security feature.
* Visa marks. We place the Visa DEBIT lockup on the back from Visa's supplied artwork.
* Taglines, unless they are part of your trademarked logo.
* URLs or phone numbers. The back carries your support line.
Visa's rules also exclude, on either face:
* The name or mark of another card network, or of a company you do not own.
* Advertising or promotional language.
* Reproductions of banknotes, coins, or another payment card.
* Artwork, characters, or likenesses you do not hold the rights to.
## Back
The back is a fixed layout. Your background color or artwork continues onto
it, and you choose how the personalization prints. The blueprint carries the
positions; the back template has them as guides.
| Element | What it is | Who sets it |
| --------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------ |
| Magnetic stripe | Standard black band. The band runs to the top edge of the card. | Fixed |
| Account block | Three lines in 9 pt type: cardholder name, card number, then expiry and security code. Printed at personalization. | Layout fixed; ink and typeface yours |
| Contactless indicator | EMVCo artwork, 5 mm tall. | Fixed |
| Visa DEBIT lockup | Premium Visa Brand Mark in silver foil, with 3 mm clear space on every side kept free of text and logos. | Fixed |
| Support line | Your support phone number and URL, in fine print. | Yours |
| Issuer statement | "Issued by Lead Bank". | Fixed |
Your choices on the back:
* **Background**: the front's color or artwork, or a solid color from your palette. Keep the area under the lockup calm enough for silver foil to read.
* **Personalization ink**: white or dark, whichever contrasts with the background. The black-core body prints white only.
* **Typeface**: a sans serif, which Visa requires for a printed cardholder name, at 9 to 12 pt. The default is Suisse Intl Regular at 9 pt (57 px on the artboard; 1 pt = 6.33 px). The card number, expiry, and security code have no mandated face, and use the same one as the name.
* **Support line**: the phone number and URL your cardholders should use.
Cardholder names print as they appear on the cardholder's customer record.
We shorten names that do not fit the line and confirm the result with you
at proof.
## Color
Cards are printed, so specify colors the way a printer uses them.
* Give brand colors as Pantone numbers, or as CMYK values if your brand guide has them. Hex and RGB values are for the digital wallet art only.
* CMYK reproduces a smaller range than a screen. Saturated screen colors, especially bright orange, lime green, cyan, magenta, and violet, print duller and darker. Look up your brand color's Pantone or CMYK equivalent before you commit to it; a color that looks right in Figma can disappoint on plastic.
* On white stock, everything prints as a four-color CMYK process. For a saturated brand color that CMYK cannot reach, the black-core body prints your logo as a Pantone spot color instead, which reproduces the exact ink.
* Metallic and fluorescent colors do not print in CMYK. A metallic look comes from foil (see [Beyond the standard card](#beyond-the-standard-card)).
* Everything printed must contrast with what is behind it. This is a Visa requirement for the cardholder name and a legibility requirement for everything else.
* The Visa DEBIT lockup is always silver foil. You do not choose its color.
Print differs from screen in a few other ways that affect card artwork:
* Set black as 100% K, not a CMYK build. Builds shift toward brown or blue on press.
* Ink coverage under 10% in any channel can drop out. Avoid very light tints for anything that must be visible.
* Avoid borders or frames that follow the card edge. The cut moves slightly from card to card, and a border makes that visible.
* Dark solid colors with a matte finish show surface scratches sooner than lighter or glossier cards.
* Keep type in your artwork at 6 pt or larger and lines at 0.08 mm (0.25 pt) or thicker.
The digital proof and the printed samples are the color check. Screen previews,
including the figures on this page, are not color-accurate.
## Digital wallet art
When a cardholder adds the card to Apple Pay or Google Pay, the wallet shows
a flat image of the card. By default we produce it from your front design.
You can supply your own version instead, within the rules below; Visa and the
wallets require it to be recognizably the same card as the physical one.
The image Visa and the wallets accept is a 1536 × 969 px PNG at 72 dpi, RGB,
under 4 MB, with square corners (the wallet rounds them). The rules for what
may appear on it:
* No cardholder name, card number, expiry date, chip, hologram, or embossing cues.
* No 3D or skeuomorphic effects that imitate a physical card. The wallet renders the rounding, stacking, shadows, and on iOS the tilt itself; a baked-in shadow or highlight fights that rendering.
* The lower-left quadrant stays empty. The wallet draws the last four digits there.
* The Visa DEBIT lockup sits in the lower right. We add it.
If your logo sits right of the chip on the physical card, it lands in the
upper right of the wallet art, which is allowed. A logo that depends on the
chip for balance, or one placed in the lower left, needs an alternate
placement for the wallet; that is the usual reason to supply your own
version.
The wallets also show your brand outside the card image, in notifications,
transaction lists, and the card details screen. Visa Token Service, which
provisions the card to Apple Pay and Google Pay, takes these assets with the
card image:
* An app icon, 100 × 100 px PNG.
* Your logo, 1372 × 283 px PNG, on a transparent background.
* An overlay text color for the last four digits, white or black, whichever reads on your art.
* A card background color as a hex value. The wallet shows it while the image loads.
## Carrier and envelope
Physical cards ship in a folded carrier letter with the card attached, inside
an unbranded envelope. Card networks require that nothing on the envelope
indicates a card is inside, so the envelope is not customized. The standard
carrier is used for all programs; to discuss a custom carrier, contact your
Lightspark contact.
## What to send
Send the following to your Lightspark contact:
* Brand colors as Pantone numbers or CMYK values for print, and as hex values for the digital wallet art.
* The front design on a 1536 × 969 artboard, as the layered source file (Figma, Illustrator, or Sketch) or a PDF with vectors preserved. Keep your logo as a vector on its own layer, and include the overlay template on a hidden layer.
* Your choices for the back: background color, personalization ink, typeface, support phone number and URL.
* The body: white stock or black core, and the finish for black core.
* For the digital wallets: the app icon, the logo PNG, the overlay text color, and the card background color listed under digital wallet art.
## Review and production
We check the design against the rules on this page and send back anything that needs to change.
We prepare the print files for both faces and the digital wallet art PNG, and place the Visa marks from Visa's supplied artwork.
Visa reviews every card design before production. We submit and handle their feedback with you.
The manufacturer returns a digital proof, then printed samples for you to approve.
Approved designs go into production for your card program.
Plan for several weeks from submission to printed samples, and longer for
production stock. We give you a schedule at design review.
## Beyond the standard card
The two bodies on this page are what most programs print. Metal, custom cores
and edges, foil or spot-gloss logos, and other premium finishes are possible.
Each raises the cost of every card, adds a minimum order, and adds months of
lead time, and some change what the artwork can be. If you are considering
one, talk to your Lightspark contact before you design. The same applies to a vertical orientation or a
custom back layout.