Coinflow — Presentation

Coinflow

A concept rebrand from logo to shipped code: mark and wordmark, type system, background and illustration libraries, design tokens, landing and product pages, and a merchant dashboard designed and built as a live Next.js app.

DESIGNED & BUILT by Spence Hoellen

Best experienced on desktop.

Coinflow poster mockup: “Make payments your Growth Engine”, set in Acid Grotesk over a mono plate with the Coinflow lockup at the foot.

View logo pack

The rebuilt Coinflow dashboard. Sidebar: Coinflow lockup; MERCHANT ID #spenceh; Search; OPERATE — Home, Payments, Payouts, Exceptions 6; MANAGE — Reports, Developers, Settings. Header: "Good morning, Spence", "Monday, 25 August". Tabs: Overview, Payments, Payouts, Customers. GROSS VOLUME $2,847,392.18, up $314,208.52 (12.4%) against 26 Jun – 25 Jul. NET VOLUME $2,731,447.02 after $115,945.16 in processing fees. ACCEPTANCE RATE 97.8%. ACTIVE CUSTOMERS 18,432. An onboarding card headed "Make the most of Coinflow", with a progress bar flanked by "4 of 6 complete" and "66%", over a "Finish setup" button. A NEEDS ATTENTION card headed "Six items need your response", listing Disputes 3, Information requests 1 and ACH returns 2, over a "Review all" button. NEXT PAYOUT $412,880.44. The panel is transcribed in full in the text that follows.

The rebuilt Coinflow dashboard. Sidebar: Coinflow lockup; MERCHANT ID #spenceh; Search ⌘K; OPERATE — Home, Payments, Payouts, Exceptions 6; MANAGE — Reports, Developers, Settings. Header: Good morning, Spence. Monday, 25 August. Tabs: Overview, Payments, Payouts, Customers. Controls: 26 Jul – 25 Aug, Export, Local time. GROSS VOLUME $2,847,392.18, up $314,208.52 (12.4%) vs. 26 Jun – 25 Jul; ranges 1D, 1W, 1M, 3M, YTD, ALL. NET VOLUME $2,731,447.02 — After $115,945.16 in processing fees. ACCEPTANCE RATE 97.8% — Down 0.4 pts — 3DS friction on EU cards. ACTIVE CUSTOMERS 18,432 — 1,204 first-time buyers this period. RECENT PURCHASES: Maya Rodríguez, maya.r@northwind.io, Visa ·· 4412, 25 Aug 09:14, Settled, $1,249.00; Devon Okafor, devon@larkfield.co, USDC · Base, 25 Aug 08:52, Settled, $18,400.00; Anders Krogh, SEPA · IBAN, Pending, $6,780.50. ONBOARDING — Make the most of Coinflow. 4 of 6 complete, 66%. Finish setup. NEEDS ATTENTION — Six items need your response: Disputes, 2 respond by Thursday, 3; Information requests, Underwriting: Kopano, 1; ACH returns, R01: insufficient funds, 2; Review all. NEXT PAYOUT $412,880.44 — Batching — Arrives tomorrow · 09:00 ET.

Visit deployed app

Visit Github

Dashboard detail: the Coinflow lockup, merchant ID #spenceh, search, and the Operate navigation — Home, Payments, Payouts, Exceptions (6).

Dashboard detail: the gross volume chart, active customers, the onboarding card and the Needs Attention card listing Disputes, Information requests and ACH returns.

Coinflow landing page mockup. Headline: “Settle every transaction instantly.” Body: “Pay-ins in 170+ countries, payouts, and FX for marketplaces, gaming, payroll, and remittances. Others take 5 business days.” Navigation: Products, Solutions, Customers, Resources, Developers, ISV Launchpad, Log in, Try Coinflow. Buttons: Start in the sandbox, Talk to us.

Visit deployed app

M02

Current: defocused flow

Flow-illustration DNA blurred into directional streaked light. Use: campaign and event backdrops with motion.

Current: defocused flow

Flow-illustration DNA blurred into directional streaked light. Use: campaign and event backdrops with motion.

D04

Parting: shafts

One broad shaft enters from off-frame with two fainter companions. Light is added here, not revealed. Use: dark covers and announcements.

Parting: shafts

One broad shaft enters from off-frame with two fainter companions. Light is added here, not revealed. Use: dark covers and announcements.

C03

Daybook: rose breath

The bright plate: a rose breath climbs through open pearl and dissolves. Use: high-key backgrounds behind dense text and data.

Daybook: rose breath

The bright plate: a rose breath climbs through open pearl and dissolves. Use: high-key backgrounds behind dense text and data.

Visit background library

F01

Confluence

Separate pay-in streams agreeing into one settled flow; ink gathers where they concur. Use: pay-in and settlement stories, hero dividers.

Confluence

Separate pay-in streams agreeing into one settled flow; ink gathers where they concur. Use: pay-in and settlement stories, hero dividers.

Visit illustration library

Swift

Prose, headings, and every numeral in the system

Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

$ , . % + - ( )

Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

$ , . % + - ( )

Swift

Prose, headings, and every numeral in the system

Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

$ , . % + - ( )

Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

$ , . % + - ( )

Reference sheet: Chicago Tribune “Bears bring it home”, Chicago Daily News “So long, Chicago”, and a modern Chicago Tribune front page.

Acid Grotesk

Interface furniture only: nav, buttons, labels, table headers, form fields, tooltips

Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

$ , . % + - ( )

Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

$ , . % + - ( )

Acid Grotesk

Interface furniture only: nav, buttons, labels, table headers, form fields, tooltips

Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

$ , . % + - ( )

Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

$ , . % + - ( )

The future of payments, delivered today.

Launch fast. Settle instantly.

The future of payments, delivered today.

Launch fast. Settle instantly.

Design tokens — Color tokens. A swatch table of the system's thirty colour custom properties in five groups: ink, surfaces, rules and borders, chart, and component colour. Each row pairs a swatch with its property name and value. The panel is transcribed in full in the text that follows.

Design tokens — Color tokens. 30 values in five groups. Shape and families are declared in the same file and appear in the theming map. INK: --ink #000; --paper #fff; --inverse #fff; --muted rgba(0, 0, 0, 0.6); --subtle rgba(0, 0, 0, 0.44). SURFACES: --chrome #faf9f7; --solid #f1f1f1; --select #e5e5e5. RULES & BORDERS: --rule rgba(0, 0, 0, 0.12); --rule-soft rgba(0, 0, 0, 0.07); --avatar-border #d9d7d8. CHART: --bar-weekday #2b2b2b; --bar-weekend #5d5d5d; --chart-grid rgba(0, 0, 0, 0.055); --chart-baseline #d1d1d1; --chart-axis rgba(0, 0, 0, 0.44); --delta-strong #2b2b2b. COMPONENT COLOR: --icon-active #030303; --icon-sidebar #5a5957; --icon-rail #646464; --icon-chevron #8a8a8a; --avatar-bg #b9b9b9; --search-placeholder #888785; --merchant-label #81807e; --merchant-value #020200; --onboarding-label #c3c2be; --attn-label #5b5b5b; --attn-sub #646464; --cta-on-dark #fbfbfb; --seg-idle #5d5d5d. One border system: cards rule with --rule, interior dividers with --rule-soft. 30 color tokens · src/styles/tokens.css

Design tokens — Type scale. A specimen sheet of the system's thirteen type tokens, seven set in Swift and six in Acid Grotesk. Each token's specification line — its name, size in rem and px, line-height, and tracking where one is set — sits above the specimen, which is shown at true size. The panel is transcribed in full in the text that follows.

Design tokens — Type scale. 13 semantic tokens ship as @utility classes, each carrying its own size and leading. Shown at true size: the design grid and this deck are both 1728 wide, so 1rem is 16px in both. SWIFT · 7 TOKENS. t-fig-hero · 3.375rem · 54px · lh 1 · ls -0.03em · tabular-nums, set as “$248,190.22”. t-title-plate · 1.9375rem · 31px · lh 1.1935 · ls -0.015em, set as “Good morning, Rae”. t-h3 · 1.875rem · 30px · lh 1.25 · ls -0.01em, set as “Attention needed”. t-title-attn · 1.4375rem · 23px · lh 1.2 · ls -0.01em, set as “Exceptions”. t-h4 · 1.375rem · 22px · lh 1.26 · ls -0.01em, set as “Settlement”. t-fig-sm · 1.375rem · 22px · lh 1.26 · ls -0.01em · tabular-nums, set as “$12,480.65”. t-fig-table · 0.875rem · 14px · lh 1.5 · tabular-nums, set as “1,204.00”. ACID GROTESK · 6 TOKENS. t-body · 0.9375rem · 15px · lh 1.5 · ls -0.01em, set as “Every transaction settles the moment it happens.”. t-cap · 0.875rem · 14px · lh 1.4, set as “Last 30 days”. t-cta · 0.875rem · 14px · lh 1, set as “Finish setup”. t-sm · 0.8125rem · 13px · lh 1.5 · ls -0.01em, set as “Pay-ins, payouts, and FX”. t-nav · 0.8125rem · 13px · lh 1.5, set as “Transactions”. t-label · 0.75rem · 12px · lh 1.5 · ls 0.04em · uppercase, set as “ONBOARDING”. Only the serif tokens name a family; the rest inherit var(--sans) from body. 13 type tokens · src/app/globals.css

Design tokens — The theming map. One value, three surfaces: a custom property becomes a Tailwind utility and a shadcn semantic name without ever being restated. The chain reads: TOKENS.CSS, --rule: rgba(0, 0, 0, 0.12); then @THEME INLINE, --color-rule: var(--rule); then TAILWIND UTILITY, border-rule bg-rule; then SHADCN ALIAS, --color-border: var(--rule);. SRC/STYLES/TOKENS.CSS — :ROOT. :root { ink: --ink: #000; --paper: #fff; --inverse: #fff (text/controls sitting on artwork or dark surfaces); --muted: rgba(0, 0, 0, 0.6); --subtle: rgba(0, 0, 0, 0.44). rules & borders — one border system: cards rule with --rule, interior dividers with --rule-soft (the comp carried three border greys; unified 2026-08-25 at the owner’s direction): --rule: rgba(0, 0, 0, 0.12); --rule-soft: rgba(0, 0, 0, 0.07); --avatar-border: #d9d7d8. shape: --r-control: 1px; --r-frame: 2px. type families (set by next/font in the layout): --serif: var(--font-swift), Georgia, ‘Times New Roman’, serif; --sans: var(--font-acid), ‘Helvetica Neue’, Arial, sans-serif; }. SRC/APP/GLOBALS.CSS — @THEME INLINE. @theme inline { ink: --color-ink: var(--ink); --color-paper: var(--paper); --color-inverse: var(--inverse); --color-muted: var(--muted); --color-subtle: var(--subtle). rules & borders: --color-rule: var(--rule); --color-rule-soft: var(--rule-soft); --color-avatar-border: var(--avatar-border). shadcn semantic aliases to Coinflow tokens (no new palette): --color-background: var(--paper); --color-foreground: var(--ink); --color-border: var(--rule); --color-muted-foreground: var(--muted); --color-popover: var(--paper); --color-popover-foreground: var(--ink); --color-accent: var(--solid); --color-accent-foreground: var(--ink); --radius: var(--r-control); }. SRC/APP/GLOBALS.CSS — @LAYER BASE, @UTILITY. Root scaling: the dashboard is composed on a 1728px grid. 1rem = 16px at 1728; below that the root font-size tracks the viewport (16/1728 = 0.9259vw) so the whole composition scales linearly — at a 1321px viewport it renders pixel-identical to the reference frame. Capped at 16px above 1728. Tailwind’s rem-based spacing inherits this fluid scaling by design — do not convert to px. @layer base { html { font-size: clamp(9.5px, 0.92593vw, 16px); Preflight sets 1.5; the composition was built against browser-normal line-heights wherever a component doesn’t set its own; line-height: normal; } } @utility t-fig-hero { font-family: var(--serif); font-weight: 700; font-size: 3.375rem (54, measured against the comp’s figure); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }. src/components/StatRow.tsx · className=‘border-[0.0625rem] border-rule bg-paper py-5’. The utility in use. Hairlines are 0.0625rem, so they thin with the composition.

Coinflow Launchpad landing page mockup. Headline: “Payment infrastructure built to grow with you.” Body: “Launchpad is Coinflow’s accelerator for small ISVs. Embedded payments are becoming the defining revenue advantage for software companies - we give you the stack, pricing, and hands-on support to capture it from day one.” Navigation: Products, Solutions, Customers, Resources, Developers, ISV Launchpad, Log in, Try Coinflow. Buttons: Apply for Launchpad, How it works. The art panel carries the display word Launchpad with an ISV badge.

Coinflow billboard mounted above a Chicago elevated-rail streetscape. The panel carries the Coinflow lockup, the line "Nobody ever asked to wait five days...", the URL coinflow.cash, and the body copy "One integration for pay-ins, payouts, and FX. Every transaction settles the moment it happens, in more than 170 countries." Two figures sit beside it: 170 — Countries Covered, and 0 — Days To settle.

Coinflow Wallet card mockup. A dark header reads Coinflow Wallet with the account CF 4821 0093 W and a Withdraw button; below it a panel set on the C04 Interchange colour plate carries the Coinflow mark, the total balance $183,854.00, and the label Total Balance.

Coinflow Wallet card mockup. Card header: Coinflow Wallet. Account: CF 4821 0093 W. Action: Withdraw. Card panel over the C04 Interchange colour plate, carrying the Coinflow mark, the figure $183,854.00, and the label Total Balance.

Close-up render of the Coinflow mark debossed into the corner of a brushed metal card, its fluted ridges catching warm light against a pale ground.

Tools used

Stack

React

TypeScript

Next.js

Tailwind CSS v4

shadcn/ui

Radix UI

cmdk

CVA

Vitest

Vercel

Git

Design System

Design tokens

CSS variables

@theme inline

@utility

Figma

Figma Plugin API

Framer

Swift

Acid Grotesk

Geist

Workflow

Claude Code

MCP

Figma MCP

Framer agent

design-loop (Custom skill)

perfection-loop (Custom skill)

Subagent critics

Custom Figma plugins

Pixel-diff harness

Foundations

Python

NumPy

Pillow

fontTools

Headless Chrome

Playwright

SVG

Canvas 2D

FFmpeg

Bash

Thank you for making it this far.

Email me!

Shoot me a text!