Marketing Site

Public surfaces for a Latin-American card-issuing & payments-infrastructure platform. Dark-first, neon-pink accent, Geist typography. Built on Next.js + Tailwind v4 + Prismic.

Colors

Pink (#ec4899) is the only true brand colour. Purple is reserved for AI/secondary surfaces. Backgrounds stay near-black; light sections are intentional and rare.

Brand

Pink 500

#ec4899

Pink 400

#f472b6

Pink 300

#f9a8d4

Purple 400 — AI

#c084fc

Purple 700

#7e22ce

Surfaces

Page

#080C21

Elevated

#12162B

Inverse

#FFFFFF

Text

Primary

#FFFFFF

Tinted

#FFE4FF

Muted

#9CA3AF

Typography

Geist for everything. Display sizes tighten line-height to 1:1 and pull letter-spacing to -3px on the 100px hero.

Role	Size	Line	Weight	Letter-spacing
Display 1	`100px`	`100px`	`600`	`-3px`
Display 2	`80px`	`80px`	`600`	`-2.5px`
H2	`65px`	`65px`	`600`	`-2px`
H3	`40px`	`48px`	`600`	`0`
H4	`24px`	`32px`	`600`	`-0.5px`
Lead	`20px`	`28px`	`400`	`0`
Body	`16px`	`20.8px`	`400`	`0`
UI / chip	`13px`	`19.5px`	`400`	`0`

Spacing & Layout

Tailwind v4 with a custom rem scale. Wrapper maxes at 1440px. Default section gap is 7.7rem.

Token	Value
Container padding (desktop)	`32px`
Container padding (mobile)	`20px`
Wrapper max-width	`1440px`
Section gap (compact)	`5.5rem`
Section gap (default)	`7.7rem`
Section gap (spacious)	`12rem`

Radius & Shadows

Two radii dominate: pills (50px) for everything interactive, 18px for cards.

Token	Value	Use
`radius-sm`	5px	Language switcher, inline controls
`radius-md`	8px	Logo tile, small icons
`radius-xl`	18px	Feature cards, card art
`radius-pill`	50px	All buttons + chips
`shadow-glow-pink`	`0 0 40px rgba(236,72,153,0.45)`	CTA hover, hero card
`shadow-card`	`0 25px 50px -12px rgba(0,0,0,0.25)`	Showcased card art

Buttons

Pink pill primary, ghost secondary. Hover lifts the brand glow.

/* Primary CTA */
background: #ec4899; color: #080C21;
border-radius: 50px; padding: 10px 22px;
font: 500 13px Geist;
:hover { background: #f472b6; box-shadow: 0 0 24px rgba(236,72,153,0.55); }

Tabs & Pills

Feature Cards

Frost background, 18px radius, 28-32px padding. Hover lifts border to brand pink and adds a subtle glow.

Custom programs

Issue credit, debit and prepaid cards with co-branded artwork.

Embedded access

Modular, API-first architecture — drop in only what you need.

Real-time controls

Visibility and control across every transaction at any scale.

3D Card Art

Hero card mockups use a pink→purple gradient with a heavy drop shadow plus the brand glow. Always slightly rotated.

•••• 4242

Navigation

Single row of 13px white links, generous vertical padding (30px). Single language switcher on the right.

Platform Issuing Processing Use Cases EN

Tailwind Reference

The paired design-system-website.json ships a tailwind block. Drop into theme.extend (or @theme for v4) and treat the recipes as required source.

theme.extend mappings

Brand	Body Font	Default Radius	Glow	Wrapper
`brand.pink #ec4899`	`Geist`	`pill (50px)`	`shadow-glowPink`	`1440px`

Component recipes

Recipe	Class pattern
`buttonPrimary`	`inline-flex items-center justify-center rounded-pill bg-brand-pink text-fg-onPink px-5 py-2.5 text-ui font-medium transition-shadow hover:bg-brand-pinkHover hover:shadow-glowPink`
`buttonGhost`	`inline-flex items-center justify-center rounded-pill bg-transparent text-fg-primary border border-border-subtle px-5 py-2.5 text-ui hover:bg-bg-frost`
`tabPill`	`rounded-pill border border-border-subtle text-fg-primary text-ui px-3.5 py-1.5`
`featureCard`	`rounded-xl bg-bg-elevated/60 border border-border-subtle p-8 hover:border-brand-pink/45 hover:shadow-glowPink/30`
`card3D`	`aspect-[1.586/1] rounded-xl bg-cardArt shadow-glowPink shadow-card`
`navLink`	`text-ui text-fg-primary px-2.5 py-7 transition-colors hover:text-brand-pink`