The visual language behind Straddle's payment infrastructure.
Tokens, components, and patterns for account-to-account payments.
Four luminance steps from forest-black to elevated. Content emerges through calibrated brightness, not color variation.
Primary #f7f8f8
Secondary #d0d6e0
Tertiary #8a8f98
Quaternary #5c6c75
Satoshi
Payment rails
Account-to-account transfers
Straddle provides the infrastructure for programmatic ACH payments. Our API handles origination, returns, and reconciliation so you can focus on your product.
Navigation, labels, and UI controls use weight 500.
PAYMENT_STATUS
TRANSFER_TYPE
ROUTING_METHOD
The one exception to the font assignment rule. The data font as the brand mark signals developer-first infrastructure -- the wordmark lives in the same typeface as the money it moves.
Surfaces use translucent white on forest-black. Elevation increases background luminance, not shadow darkness.
JetBrains Mono with tabular-nums for column-perfect alignment. Status badges use terminal-grade precision.
| Reference | Counterparty | Type | Amount | Status | Settled |
|---|---|---|---|---|---|
| txn_9f8e7d6c | Meridian Logistics | CCD | $14,250.00 | settled | Apr 9, 2026 |
| txn_3a2b1c0d | Northwind Traders | PPD | $3,891.47 | settled | Apr 8, 2026 |
| txn_5e4f3g2h | Contoso Payments | WEB | $728.00 | pending | — |
| txn_1i0j9k8l | Fabrikam Inc | CCD | $52,100.00 | returned | Apr 7, 2026 |
| txn_7m6n5o4p | Alpine Ventures | PPD | $1,200.00 | processing | — |
Toggle the theme in the nav. Every component adapts through CSS custom properties. Dark mode uses luminance stacking; light mode uses teal-tinted shadows. Accent green shifts from neon to functional to maintain contrast.