Payment Cards
A template + swappable skin: a data layer — number, holder, expiry — rides over any of 16 background faces on a bottom scrim so it stays legible. 311×200 at 18px radius (ISO card ratio). Pick a swatch below to change the background; the face cross-fades, a soft sheen sweeps across, and the card tilts to your pointer.
Interactive card try it
Tap any background to apply it. The face cross-fades smoothly and a light sheen sweeps the surface; hover to tilt the card in 3D.
6037 9975 9598 3090
Card holder
Julio Santos
Exp09/24
16 backgrounds · click to swap
Background Library (16)
All 16 card faces exported from Figma. Any can be dropped into the card's skin slot.
Specification
| Property | Value | Notes |
|---|---|---|
| Size | 311 × 200 px | ISO/IEC 7810 ratio 1.586:1 — scales via aspect-ratio |
| Radius | 18–20px | card corner |
| Padding | 22–24px | content inset |
| Number | Inter Medium 22px | white, letter-spacing .06em, text-shadow for legibility |
| Scrim | bottom gradient | keeps data readable over any skin |
| Backgrounds | 16 skins | swappable pattern layer (Figma “Paste your Pattern here”) |
| Motion | .55s fade · 5.5s sheen | cross-fade, looping sheen, pointer tilt |