Brand Guide
Internal · Password-protected · NoindexLogos, colours, typography, gift card templates, and download assets. Use this page when designing any ReloadCard-branded surface.
01 — Logo system
The ReloadCard logo on light surfaces
The mark is a stylised infinity loop paired with the wordmark. Four layout variants and three colour schemes.
Layout variants
Sizes
Icon detail
Filled icon — primary brand mark, gradient violet.
Outline icon — for subtle on-card branding, watermarks, print.
Clear space
02 — Logo system
The ReloadCard logo on dark surfaces
On dark backgrounds the gradient icon stays vibrant; the wordmark switches to white. The consumer wallet, docs, and admin all run dark-first.
Layout variants on black
Colour-scheme matrix
Stacked on backgrounds
03 — Colour palette
Brand colours
Brand violets
Brand gradient
background: linear-gradient(to top right, #4c1d95, #8b5cf6)Used on the website hero, the docs accent strip, and inside every gift card's minimal/gradient template. Keep the angle (45°/to top right) consistent across surfaces.
UI system colours
Defined in apps/consumer/app/globals.css and inherited by every other app. Don't hand-code these — use the CSS variable.
04 — Typography
Inter, in five weights
Inter is the primary typeface across every ReloadCard surface — wallet, docs, marketing, email, gift card render. It's the only typeface we ship.
font-family: 'Inter', system-ui, sans-serifWordmark typography
05 — Gift card branding
Card templates on light
Every physical and digital gift card carries the ReloadCard mark. The outline icon sits subtly on the front (top-right NFC pill); the full lockup is on the back. The wallet's <GiftCard> component now ships 21 templates across three tiers: 3 Standard (Free), 6 static rich (Boost), and 8 animated (Premium). Animated templates play live in the consumer wallet and freeze mid-cycle for the Apple/Google Wallet pass strip image. Print-bound CR80 cards use a CMYK-safe static fallback.
Premium animated templates
The eight Premium templates — Holographic (iridescent conic gradient), Liquid Metal (chrome flow), Aurora Animated (color-stop drift), Carbon Fiber (sheen sweep), Velvet (hover highlight), Glassmorphism (multi-layer depth), Topographic (tilt parallax), and Foil Stamp Multi — are designed to make the consumer wallet feel premium when the consumer opens the app. Animations run on GPU-friendly properties only, pause onprefers-reduced-motionand are hot-loaded only when a Premium template is selected.
Front & Back
Template gallery
06 — Gift card branding
Card templates on dark
The same templates as they appear inside the consumer wallet (wallet.reloadcard.app), which uses our dark-first surface. Card art stays identical — it's the surrounding chrome that flips.
07 — Usage
Do's & Don'ts
✓Do
- •Use the
<ReloadCardLogo />component for all logo rendering - •Maintain minimum clear space around the logo
- •Use the white variant on dark or coloured backgrounds
- •Use the stacked variant for vertical or square layouts
- •Always include the ReloadCard mark on printed cards
- •Use the outline icon for subtle, non-intrusive branding
✕Don't
- •Stretch, rotate, or skew the logo or icon
- •Change the violet-600 color on the "Card" text
- •Substitute with Lucide icons or other generic icons
- •Place the logo on busy or low-contrast backgrounds
- •Add effects like drop shadows, outlines, or glows to the logo
- •Use custom font sizes — always use the size prop
08 — Assets
Download SVG + PNG
Master files are at /branding/ in the repo; production-served copies live in apps/web/public/. Pick the variant that matches the surface contrast.
Brand Guide · Internal Use Only · 2026 · Password-protected · Noindex