Cardplane Design System

Dark-first, neon-accented design system for a Latin-American card-issuing & payments-infrastructure platform. Documents the marketing site and the production product dashboard. Built on Geist + Tailwind v4 with hot-magenta as the dominant accent and selective deep-purple for AI surfaces.

Colors

Single shared palette across web + app. Neon pink (#ec4899) is the only true brand colour; a deep purple is reserved for AI/secondary surfaces. Greens appear only on positive status pills. Nearly every surface lives on the dark side — light sections are rare and intentional.

Brand

Pink 500

#ec4899

Pink 400 — hover

#f472b6

Pink 300 — soft

#f9a8d4

Purple 400 — AI

#c084fc

Purple 700 — depth

#7e22ce

Backgrounds

Page (web)

#080C21

Page (app)

#0A0F22

Rail (deepest)

#070B1B

Elevated

#12162B

Inverse

#FFFFFF

Text

Primary

#FFFFFF

Tinted

#FFE4FF

Muted

#9CA3AF

Subtle

#5b6371

Status

Approved

#22c55e

Lost (on-brand)

#ec4899

In progress

#9CA3AF

Typography

Geist (Vercel's sans) for everything UI. Geist Mono for code/IDs. Display sizes tighten line-height and letter-spacing aggressively (-3px on the 100px hero) for that compressed, cinematic title feel.

Display 1 · 100/100 · -3px · Geist 600 · #FFFFFF

Smart payments
infrastructure.

H2 · 65/65 · -2px · Geist 600

One technology, endless applications

H3 · 40/48 · Geist 600

A complete platform for issuing your card program.

Lead · 20/28 · Geist 400 · muted

Launch credit, debit and prepaid cards with an API-first platform built to scale.

Body · 16/20.8 · Geist 400 · #9CA3AF

A modular, API-first, cloud-native platform for launching, operating, and managing card businesses across the Americas. Built for fintechs that need to move fast without compromising compliance.

UI · 13/19.5 · Geist 400 — buttons, nav, links

Issuer Processing · BIN Sponsorship · Risk Management · Use Cases

Role	Size	Line	Weight	Letter-spacing
Display 1 (hero h1)	`100px`	`100px`	`600`	`-3px`
Display 2	`80px`	`80px`	`600`	`-2.5px`
H2	`65px`	`65px`	`600`	`-2px`
H3	`40px`	`48px`	`600`	`0`
H4 / Card title	`24px`	`32px`	`600`	`-0.5px`
Lead	`20px`	`28px`	`400`	`0`
Body	`16px`	`20.8px`	`400`	`0`
Body small / table	`14px`	`20px`	`400`	`0`
UI / nav / chip	`13px`	`19.5px`	`400`	`0`
Label	`12px`	`16px`	`500`	`0`
Micro	`10px`	`14px`	`500`	`0`

Spacing & Layout

Tailwind v4 with a custom rem scale (1rem = 10px on the marketing site, default 16px on the dashboard). Wrapper maxes at 1440px. Sections breathe — vertical rhythm runs from 5.5rem (compact) to 12rem (spacious) on desktop.

Token	Px (default)	Use
`--space-1`	4px	Inline icon gap, dot padding
`--space-2`	8px	Tight inline gap
`--space-3`	12px	Card-internal small gap
`--space-4`	16px	Default inline padding
`--space-6`	24px	Card padding, grid gap
`--space-8`	32px	Component padding (feature card)
`--space-12`	48px	Section internal padding
`--space-20`	80px	Compact section gap
`--space-32`	128px	Default section gap

Layout constants

Wrapper max-width	`1440px`
Container padding (desktop)	`32px`
Container padding (mobile)	`20px`
App icon-rail width	`64px`
App topbar height	`72px`
KPI card min-height	`168px`

Radius & Shadows

Two radii do almost all the work: 50px (pills — every CTA, every chip, every status badge) and 18px (cards). A single drop shadow plus the signature pink glow handle elevation.

Radius scale

Token	Value	Use
`--radius-xs`	2px	Hairline tags
`--radius-sm`	5px	Language switcher, inline controls
`--radius-md`	8px	Small icons, code blocks
`--radius-lg`	10px	Inputs, search bar, logo tile
`--radius-xl`	18px	Feature cards, KPI cards, card art
`--radius-2xl`	32px	Hero containers
`--radius-pill`	50px	All buttons, chips, status pills

Shadows

Token	Value	Use
`--shadow-card`	`0 25px 50px -12px rgba(0,0,0,0.25)`	Heavy drop on showcased card art
`--shadow-glow-pink`	`0 0 40px rgba(236,72,153,0.45), 0 0 80px rgba(236,72,153,0.18)`	Brand glow — CTAs on hover, hero card
`--shadow-glow-purple`	`0 0 40px rgba(192,132,252,0.35)`	AI chip / secondary glow

Motion

Restrained — sections fade-in-up on scroll, buttons add a glow on hover, cards lift their border colour. Everything resolves under 350ms.

Token	Value	Use
`fade-in-up`	`fade-in-up .35s ease-out both`	Section reveals on scroll
`transition-default`	`all 200ms ease`	Buttons, nav links
`transition-glow`	`box-shadow 300ms ease, transform 200ms ease`	CTA hover

Buttons

Primary CTAs are solid pink pills with dark text — the only way to start a flow. Ghost buttons border-only. No square buttons exist anywhere in the system.

Primary

Ghost

/* Primary CTA */
background:    #ec4899;
color:         #080C21;
border-radius: 50px;
padding:       10px 22px;
font:          500 13px/19.5px Geist;

/* Hover lifts a pink halo */
:hover { background: #f472b6; box-shadow: 0 0 24px rgba(236,72,153,0.55); }

Tabs & Pills

Selector pills used heavily in nav and category switchers. Active state inverts to solid pink.

Feature Cards

Soft frost over the elevated background, 18px radius, 32px padding. Hover bumps the 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 linear gradient with a heavy drop shadow plus the brand glow. Always rotated slightly in 3D for depth.

•••• 4242

Navigation

Top nav is a single row of 13px white links with generous vertical padding (30px) and a single language switcher on the right.

Platform Issuing Processing Use Cases Company EN

Shell & Icon Rail

Fixed 64px rail on the left with a logo tile up top, grouped icons in the middle, user avatar at the bottom. Active item gets a 3px pink bar at the left edge.

Rail width	`64px`
Rail background	`#070B1B`
Inactive icon	`#5b6371`
Active icon	`#FFFFFF` + 3px `#ec4899` bar
Hover	`color: #ec4899`
Logo tile	40×40 / radius 10px / pink→purple gradient

KPI Cards

Three-up grid above the transactions table. Frost surface (white @ 2%), 18px radius, 168px min-height. Headline metric in 40px Geist 500 with a tabular-nums treatment so digits don't jiggle.

Average spending

$ 80.53+10%

Tokenization

Chargebacks info

1 in progress – $ 77.45 2 won – $ 50.23 1 lost – $ 120.05

Data Table

No striping. Hairline row dividers in white @ 5%. Header in 14px muted, sentence case. Cells in 16px primary white. Date cells get a 12px time sub-line. Amounts are right-aligned and tabular.

Date	Type	Origin	Merchant	Amount	State
17/09/202506:12:59	Purchase	Domestic	New Balance	$120.05	Approved
14/09/202515:20:45	Withdrawal	Domestic	BC Bank	$50.10	Approved
01/09/202509:15:30	Reversal	Domestic	Zara	$39.99	Lost

Status & Type Pills

Status pills carry a 6px leading dot. Type pills (Purchase / Withdrawal) are border-only with muted text. Note: lost status uses pink instead of red — staying on-brand.

Approved In progress Won Lost Purchase Withdrawal Reversal

AI Assistant Chip

Pinned top-right of every dashboard view. Purple gradient — the only spot purple is dominant over pink. Always pill-shaped, always with the sparkle glyph.

Cardplane AI

Full Dashboard Mock

A condensed reproduction of the live operations view — icon rail, search topbar, KPI row, transaction table.

📈

▦

◐

◇

⚙