Wallet balance card
Account balance, action rail and asset list are typical Coinbase product patterns.
This Coinbase preview uses the corrected pattern: white finance canvas, Coinbase Blue as the sole strong tension, pill-shaped CTAs, asset tables, portfolio dashboard, buy/sell flows and dark institutional product surfaces.
Coinbase displays market data precisely and restrainedly: clear asset rows, small icons, green/red semantics only as text colour and almost no decoration.
The mobile flow composition replaces generic cards: amount input, asset picker, wallet status and a clear blue CTA.
Cash balance $2,250.00
Account balance, action rail and asset list are typical Coinbase product patterns.
Primary actions stay pill-shaped and consistently Coinbase Blue.
Status chips feel plain, small and trust-building.
Coinbase feels like a financial product: identity, limits, secure connection and status logic are all visible.
White surfaces, minimal shadows, clear hairlines and data rows build trust instead of crypto overload.
Coinbase uses dark editorial heroes for institutional product mockups, APIs and wallet infrastructure. The look stays minimal, not neon.
A very controlled palette: Coinbase Blue, pure white, hard ink, calm greys and trading semantics only for price changes.
#0052ff#003ecc#0a0b0d#5b616e#ffffff#f7f7f7#eef0f3#dee1e6#16181c#05b169#cf202f#f4b000CoinbaseDisplay-style headlines at weight 400. Body, navigation and buttons stay CoinbaseSans-style, neutral and precise.
80 / 400 / 1.052 / 400 / 1.018 / 600 / 1.3316 / 400 / 1.5Buttons, badges, forms, radius, elevation and spacing remain visible as a package, but in Coinbase-style UI states.
Copy-paste-ready variables for another agent or frontend prototype.
:root {
--coinbase-primary: #0052ff;
--coinbase-primary-active: #003ecc;
--coinbase-ink: #0a0b0d;
--coinbase-body: #5b616e;
--coinbase-muted: #7c828a;
--coinbase-canvas: #ffffff;
--coinbase-surface-soft: #f7f7f7;
--coinbase-surface-strong: #eef0f3;
--coinbase-hairline: #dee1e6;
--coinbase-surface-dark: #0a0b0d;
--coinbase-surface-dark-elevated: #16181c;
--coinbase-up: #05b169;
--coinbase-down: #cf202f;
--coinbase-yellow: #f4b000;
--coinbase-radius-pill: 100px;
--coinbase-radius-xl: 24px;
--coinbase-section: 96px;
}