A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
2radius steps
11pxspacing base
Crypto Com, in one page
Crypto.com's iOS app is a premium, dark, navy-tinted financial super-app. Where Binance feels like a bare trading terminal and Coinbase feels like a friendly consumer wallet, Crypto.com positions itself as *aspirational fintech*: a deep near-black canvas with a distinct cool-blue undertone (#03060F → #0B1426, never neutral gray), generous rounding, and a metallic Visa card that is treated as the hero object of the entire product. The atmosphere is "private bank meets crypto exchange" — luxe, calm, and money-confident. The app spans buy/sell, the Crypto.com Visa card, Earn, staking CRO, Pay, NFT, and DeFi, but the home screen always foregrounds two things: your total balance and your Visa card.
The brand uses two distinct blues. Crypto.com Brand Navy (#002D74, lightening to #103F68) is the deep institutional blue used in hero gradients, promotional banners, and the logo lockup — it signals "the brand." Electric Accent Blue (#1199FA) is the interactive color — primary CTAs, links, the active tab, selected states, the floating center "Trade" action. This navy/accent pairing is core to the identity: deep navy is decorative and brand-bearing; electric blue is functional and clickable. Market data is carried by semantic green (#00C08B) and red (#F6485D), which never invert.
The Visa card is the single most recognizable element. It renders as a metallic, weighty rectangle with a brushed-metal gradient that differs per tier — Midnight Blue (1% cashback), Ruby Steel (2%), Royal/Jade Green (3%), Icy White / Frosted Rose Gold (also 3%), and Obsidian (5%, the flagship). The card always shows a metal chip, a masked PAN in monospace, the cardholder name, the embossed tier name in a refined gold/metal color, and the italic VISA wordmark bottom-right. Reproductions must keep the card glossy, heavy, and gradient-driven — it is the brand's status symbol.
Typography is a clean geometric humanist sans for all UI (Crypto.com uses a custom-tuned grotesque close to Manrope), paired with a monospace (Roboto Mono) for every monetary figure — balances, prices, PAN, APR, cashback percentages — so columns and the card number align with tabular figures. Headlines are heavy (700–800) and tight; body is regular; numbers are mono semibold.
Key Characteristics:
- Deep navy-tinted dark canvas (
#03060F→#0B1426) — cool blue undertone, not neutral gray - Two blues: Brand Navy (
#002D74/#103F68) for hero/brand; Electric Accent (#1199FA) for interaction - The metallic Visa card is the hero object — tiered brushed-metal gradients, gold embossing, italic VISA
- Card tiers map to cashback: Midnight Blue 1% → Ruby Steel 2% → Jade Green 3% → Obsidian 5%
- Total-balance hero in monospace at the top of Home, with today's P&L
- Pill-shaped CTAs (fully rounded), generous 18–24pt card radii — luxe, not terminal-tight
- Quick-action circle row: Deposit / Send / Trade / Earn
- Watchlist / Prices list: coin icon + symbol + name + mono price + colored % change
- Earn / Stake CRO: APR rows, term selectors, allocation rings
- Bottom tab bar (5) with an emphasized floating-circle center "Trade" action
- Market semantics green
#00C08B/ red#F6485D— never inverted
Do's and don'ts
Do
- Use the navy-tinted canvas
#03060F/#0B1426— cool blue undertone, never neutral gray - Treat the metallic Visa card as the hero — tier gradients, gold embossing, italic VISA, heavy shadow
- Keep two blues distinct: Brand Navy
#002D74/#103F68for hero/banners, Accent#1199FAfor interaction - Use fully-rounded pill buttons and 18–24pt card radii — premium, not terminal-tight
- Set all money (balance, price, APR, %, PAN) in Roboto Mono with tabular figures
- Keep green
#00C08B= up/buy and red#F6485D= down/sell — never inverted - Give the center Trade tab a floating accent circle with an accent-tinted glow
- Map card tiers to cashback (Midnight 1% → Ruby 2% → Jade 3% → Obsidian 5%)
- Show the total-balance hero with today's P&L at the top of Home
- Fill large navy surfaces only for the promo/brand banner
Don't
- Don't use a neutral gray dark theme — the canvas must carry a cool navy cast
- Don't render the Visa card flat or with a single solid color — it must be a brushed-metal gradient with gloss and shadow
- Don't use Brand Navy
#002D74for clickable CTAs (use Accent#1199FA); don't use Accent for the hero gradient - Don't use sharp/small radii on cards or buttons — buttons are pills, cards are 14–18pt
- Don't render prices/APR in a proportional sans — alignment and the card number break
- Don't invert market colors in light mode (green stays up, red stays down)
- Don't omit the floating center Trade action — it's a navigation signature
- Don't put the embossed tier name in plain white — it's a gold/metal color (
#C8A24A) - Don't fill the whole screen with deep navy — navy is decorative, used in banners/gradients only
- Don't bold gains while leaving losses regular — color carries the sign
- Don't drop the heavy shadow on the card — its physical weight is the brand
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Crypto Com design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Crypto.com Brand Navy: #002d74
- Electric Accent Blue: #1199fa
- Brand Navy: #002d74
- Brand Navy 2: #103f68
- Accent Blue: #1199fa
- Accent Pressed: #0b7ad1
- Accent Tint: #1199fa
- Up / Buy Green: #00c08b
- Down / Sell Red: #f6485d
- Card Gold: #c8a24a
Type:
- families: UI Sans, Manrope, Numeric Mono, Roboto Mono
- scale: 10, 12, 13, 14, 15, 16, 18, 22, 30
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 12, 18
- elevation: Shadow: `rgba(0,0,0,0.8) 0 14px 30px -14px` — the card "floats" with weight | Don't drop the heavy shadow on the card — its physical weight is the brand
Spacing: 11, 13, 20
Rules:
- Use the navy-tinted canvas `#03060F` / `#0B1426` — cool blue undertone, never neutral gray
- Treat the metallic Visa card as the hero — tier gradients, gold embossing, italic VISA, heavy shadow
- Keep two blues distinct: Brand Navy `#002D74`/`#103F68` for hero/banners, Accent `#1199FA` for interaction
- Use fully-rounded pill buttons and 18–24pt card radii — premium, not terminal-tight
- Set all money (balance, price, APR, %, PAN) in Roboto Mono with tabular figures
- Keep green `#00C08B` = up/buy and red `#F6485D` = down/sell — never inverted
Avoid:
- Don't use a neutral gray dark theme — the canvas must carry a cool navy cast
- Don't render the Visa card flat or with a single solid color — it must be a brushed-metal gradient with gloss and shadow
- Don't use Brand Navy `#002D74` for clickable CTAs (use Accent `#1199FA`); don't use Accent for the hero gradient
- Don't use sharp/small radii on cards or buttons — buttons are pills, cards are 14–18pt
- Don't render prices/APR in a proportional sans — alignment and the card number break
- Don't invert market colors in light mode (green stays up, red stays down)
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Brand (decorative / hero)
- Brand Navy (
#002D74): Deep institutional blue — hero gradient base, logo lockup, promo banners. - Brand Navy 2 (
#103F68): Lighter navy — gradient top, banner highlights, selected navy chips. - Navy Gradient:
linear-gradient(135deg, #002D74 0%, #103F68 100%)— the signature brand sweep.
Primary (Interactive)
- Accent Blue (
#1199FA): Primary CTA, links, active tab, floating Trade button, selected states, focus rings. - Accent Pressed (
#0B7AD1): Pressed state of accent buttons. - Accent Tint (
#1199FA1F): 12% accent wash behind selected rows / info chips.
Market Semantics (never invert)
- Up / Buy Green (
#00C08B): Positive change, Buy button, gains, success. - Down / Sell Red (
#F6485D): Negative change, Sell button, losses, error.
Card Metals (tier-specific, theme-invariant)
- Card Gold (
#C8A24A): Embossed tier name, chip, accents on dark card faces. - Midnight Blue:
linear-gradient(135deg,#1A1A1E,#2A2A30)— 1% tier. - Ruby Steel:
linear-gradient(135deg,#5A1020,#8A1830)— 2% tier. - Jade Green:
linear-gradient(135deg,#0E3A30,#14564A)— 3% tier. - Obsidian:
linear-gradient(135deg,#0A0A0C,#26262C)— 5% flagship tier.
Canvas & Surfaces (Dark — default)
- Canvas (
#03060F): Primary background — near-black with a cool blue cast. - Surface 1 (
#0B1426): Cards, sheets, list containers. - Surface 2 (
#103F68): Brand-navy elevated surfaces, promo cards (reuses Navy 2). - Surface 3 (
#15263F): Pressed rows, chip backgrounds, input fields. - Divider (
#1C3354): 1pt hairlines.
Canvas & Surfaces (Light — secondary theme)
- Canvas Light (
#FFFFFF): Light background. - Surface 1 Light (
#F4F7FB): Cards, grouped containers. - Divider Light (
#E3E9F2): Hairline dividers.
Text
- Text Primary Dark (
#F4F7FB): Primary text, prices, headings. - Text Secondary Dark (
#8DA0BD): Labels, metadata, secondary values (cool blue-gray). - Text Tertiary Dark (
#5B6E8C): Disabled, very low-emphasis. - Text Primary Light (
#0A1F44): Primary text on light (navy-black). - Text Secondary Light (
#5C6B85): Secondary text on light.
Semantic (status)
- Success (
#00C08B): Confirmed deposit/trade (reuses Up Green). - Error (
#F6485D): Failed action, validation (reuses Down Red). - Warning (
#F5A623): Risk warnings, KYC pending. - Info (
#1199FA): Informational toasts (reuses Accent).
Color → Role Table
| Role | Dark | Light |
|---|---|---|
| Canvas | #03060F | #FFFFFF |
| Surface 1 | #0B1426 | #F4F7FB |
| Surface 3 | #15263F | #EDF1F7 |
| Divider | #1C3354 | #E3E9F2 |
| Brand Navy | #002D74 | #002D74 |
| Accent (interactive) | #1199FA | #1199FA |
| Up / Buy | #00C08B | #00C08B |
| Down / Sell | #F6485D | #F6485D |
| Text primary | #F4F7FB | #0A1F44 |
| Text secondary | #8DA0BD | #5C6B85 |
| Link | #1199FA | #1199FA |
Type scaleRead the full spec
Font Family
- UI Sans: Crypto.com's custom grotesque — use Manrope (by Mikhail Sharanda, SIL OFL) as the open stand-in. Geometric humanist with a confident, slightly tight feel.
- Numeric Mono: Roboto Mono (by Christian Robertson, Apache 2.0) for all monetary figures, PAN, APR, %. Always tabular figures.
- Fallback Stack (sans):
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Fallback Stack (mono):
'SF Mono', ui-monospace, Menlo, Consolas, monospace
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Sans | 32pt | 800 | 1.2 | -0.6pt | Large nav title (Prices, Earn) |
| Balance Hero | Mono | 30pt | 600 | 1.15 | -0.5pt | Total balance, tabular |
| Section Title | Sans | 22pt | 800 | 1.25 | -0.2pt | "Your Visa Card", "Watchlist" |
| Row Title | Sans | 18pt | 700 | 1.3 | -0.1pt | Coin name, detail heading |
| Body | Sans | 16pt | 400 | 1.5 | 0pt | Descriptions, explanatory copy |
| Price / Number | Mono | 15pt | 600 | 1.3 | 0pt | List prices, APR, % change |
| List Label | Sans | 15pt | 700 | 1.3 | 0pt | "CRO Visa Card", labels |
| Card PAN | Mono | 15pt | 500 | 1.3 | 2pt | Masked card number on Visa card |
| Card Tier | Sans | 13pt | 700 | 1.0 | 1.5pt | Embossed tier name, uppercased |
| Meta | Sans | 14pt | 400 | 1.4 | 0pt | Term, payout cadence, hints |
| Pill / Chip | Sans | 13pt | 600 | 1.0 | 0pt | Filter chips, term chips |
| Caption | Sans | 12pt | 600 | 1.35 | 0.1pt | "Available", footnotes |
| Tab Label | Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Button | Sans | 15pt | 700 | 1.0 | 0pt | Primary / Buy / Sell |
Principles
- Sans for words, mono for money: Balances, prices, %, APR, cashback, the card PAN — all monospace tabular. Words/labels are Manrope.
- Heavy headlines: Titles and section heads at 700–800; the brand voice is confident, not delicate.
- Tabular figures always on numbers: Prices align down the watchlist; the card number stays evenly spaced.
- Color encodes sign, not weight: A +/- value's color (green/red) carries meaning; weight stays 600.
- Tight tracking on display sizes: Screen titles and balance get slight negative letter-spacing for a modern, premium feel.
- Dynamic Type: Titles, body, labels scale; card text (PAN/tier), numeric mono columns, and tab labels stay FIXED (layout-critical).
Components and layoutRead the full spec
Buttons
Primary Button (Buy Crypto / Confirm / Continue)
- Shape: Fully rounded pill (radius 500pt)
- Background:
#1199FA(Accent Blue) - Text:
#FFFFFF - Padding: 13pt vertical, 28pt horizontal; full-width on forms (height 52pt)
- Font: Sans 15pt weight 700
- Pressed: background
#0B7AD1+ scale 0.98 - Disabled: background
#1199FAat 40% opacity, text white at 60%
Buy Button
- Background:
#00C08B; Text#FFFFFF; pill; same metrics as primary - Pressed: darken ~12%
Sell Button
- Background:
#F6485D; Text#FFFFFF; pill - Pressed: darken ~12%
Ghost / Secondary Button (Stake CRO / Learn more)
- Background: transparent; Text
#1199FA - Border: 1.5pt
#1199FA - Corner radius: pill; Padding: 11pt / 22pt
- Font: Sans 14pt weight 700
- Pressed: background
#1199FA1F
Text Button (See all / View)
- Background: transparent; Text
#1199FA; Font Sans 14pt weight 700; no underline - Pressed: text
#0B7AD1
Quick-Action Circle
- 46pt circle,
#0B1426bg,#1199FA20pt glyph, label Sans 11pt w600#8DA0BDbeneath
Core Atoms
Coin Icon
- 34pt circle (30pt dense), brand-colored token glyph
- BTC
#F7931A, ETH#627EEA, CRO#1199FA, SOL#14F195
Percentage Change
- Mono 12–13pt w600, colored
#00C08B(up) /#F6485D(down); no fill in lists (text only); pill-filled variant on price detail headers
APR Badge
- Mono 15pt w600
#00C08B, e.g.8.00% APR; or a pill#00C08B1Fbg /#00C08Btext
Visa Card (signature — see Distinctive Components)
Term Chips (Earn)
- Pill,
#15263Fbg,#8DA0BD13pt w600; selected#1199FA1Fbg /#1199FAtext — e.g. Flexible / 1M / 3M
Tag / Badge
- "NEW", "Staking", promo badges — pill,
#15263Fbg,#8DA0BD10pt w700; reward badges use gold#C8A24A
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
#03060Fat 96% with 1pt top border#1C3354 - Tabs (5): Home, Prices, Trade (floating center), Earn, Card
- Center "Trade": a 44pt
#1199FAfilled circle lifted -6pt above the bar with a white swap glyph — the signature focal action - Side icon size: 20pt
- Active:
#1199FA(filled icon + accent label) - Inactive:
#5B6E8C(outline icon + tertiary label) - Labels: Sans 10pt w600, always shown (none under the center button)
Top Nav (detail screens)
- Height: 44pt + safe area
- Leading: back chevron
#F4F7FB22pt - Center: title Sans 18pt w700
- Trailing: search / share / ⋯ in
#F4F7FB
Segmented Control (Spot/Margin, Buy/Sell)
- Pill track
#15263F; selected thumb#1199FA(or#00C08B/#F6485Dfor Buy/Sell) with white text
Input Fields
Search Bar
- Height: 40pt; Background:
#15263F; Border: none; Corner radius: 12pt - Leading
magnifyingglass16pt#8DA0BD - Placeholder: "Search coins" Sans 14pt
#8DA0BD - Focus: 1.5pt
#1199FAborder
Amount Input (Buy/Sell/Send)
- Large centered Mono value (28–34pt)
#F4F7FB, currency suffix#8DA0BD - Background often transparent on a dedicated amount screen; field variant: 52pt
#15263F, 12pt radius - Trailing "MAX" text button in
#1199FA - Error: helper text
#F6485D12pt + 1.5pt#F6485Dborder
Stepper (term/quantity)
−/+circular#15263Fbuttons flanking a centered mono value
Distinctive Components
Metallic Visa Card (the hero)
- Aspect ratio ~1.586:1; corner radius 18pt; height ~168–200pt on phone
- Background: tier-specific brushed-metal gradient (Midnight/Ruby/Jade/Obsidian — see Card Metals)
- Subtle gloss overlay: a faint 8% white diagonal sheen top-left
- Elements: embossed tier name top-left in
#C8A24ASans 13pt w700 +1.5px tracking uppercased; Crypto.com mark top-right (white); metal chip ~36×26pt rounded-5pt with gold gradient; masked PAN5482 •••• •••• 7310in Roboto Mono 15pt w500 +2px tracking bottom-left; cardholder name uppercased Sans 12pt w600 75% white; italic boldVISAwordmark bottom-right white - Shadow:
rgba(0,0,0,0.8) 0 14px 30px -14px— the card "floats" with weight - Stacked-cards carousel when multiple cards; tap flips to reveal CVV/details
Total Balance Hero
- Label "Total Balance (USD)" Sans 12pt
#8DA0BD - Value Roboto Mono 30pt w600
#F4F7FB, e.g.$ 18,402.65 - Today P&L Mono 12pt colored green/red:
+$320.18 (+1.77%) Today - Optional eye toggle to hide
Quick-Action Row
- 4 evenly-spaced circle actions (Deposit / Send / Trade / Earn), 46pt circles
#0B1426, accent glyphs
Watchlist / Price Row
- ~56pt; 20pt horizontal / 11pt vertical padding
- Layout: [coin icon 34pt] [symbol + full name stacked] [price + % stacked, right]
- Symbol Sans 15pt w700
#F4F7FB; name Sans 12pt#8DA0BD - Price Mono 15pt w600
#F4F7FB; % Mono 12pt w600 colored - Optional sparkline (40×24) in row, colored to trend
Earn / Allocation Row
- [coin icon 30pt] [name + term/cadence] ··· [APR Mono 15pt w600
#00C08B] - Allocation ring: circular progress in accent/navy on
#15263Ftrack
Card Tier Selector
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Card height ~150pt; quick actions may wrap to 4-up tight |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | Card height ~200pt; larger balance hero |
| iPad (portrait) | 768pt | Two-pane: home/list left + detail right; card carousel centered, larger |
| iPad (landscape) | 1024pt+ | Three-pane: nav + list + detail/trade |
Dynamic Type
- Screen titles, section heads, body, labels: scale with Dynamic Type
- Card text (tier name, PAN), numeric mono columns (prices, APR, balance), tab labels: FIXED — scaling breaks the card layout and tabular alignment
- The balance hero scales one step then truncates with ellipsis if extreme
Orientation
- Portrait default everywhere
- Card detail / chart screens support landscape (wider chart)
- Home and Earn lock portrait
Touch Targets
- Watchlist row: full-row tap, 56pt
- Tab icons: 20pt glyph, 44pt+ hit; floating Trade circle: 44pt
- Quick-action circles: 46pt
- Pill buttons: ≥48pt tall
- Card tap (flip): full card surface
Safe Area Handling
- Top: nav respects safe area + Dynamic Island
- Bottom: tab bar + home indicator respected; the floating Trade circle stays above the home indicator
- Keyboard: amount inputs scroll above keyboard; the MAX button and confirm pill remain visible
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-crypto-com {--page-bg: #03060f;
--page-bg-gradient: none;
--text-color: #92a0b3;
--heading-color: #92a0b3;
--link-color: #1571ff;
--link-hover-color: #0058e1;
--border-color: #1d222d;
--card-bg: #03060f;
--card-shadow: 0 1px 2px rgba(146,160,179,0.06);
--card-hover-shadow: 0 6px 18px rgba(146,160,179,0.12);
--header-bg: #171a22;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #03060f;
--footer-text-color: #727e90;
--button-bg: #002d74;
--button-text-color: #ffffff;
--button-hover-bg: #001941;
--button-border: none;
--button-border-radius: 18px;
--button-secondary-bg: #0c0f19;
--button-secondary-text-color: #92a0b3;
--button-secondary-hover-bg: #141823;
--button-secondary-border: 1px solid #1d222d;
--prompt-bg: #0a0e17;
--prompt-text-color: #92a0b3;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 18px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 84.3%
- hevy 80.2%
- bluesky 79.7%
- pluto tv 78.8%
- character ai 78.7%
Where this came from
- Source document
ios/design-md/finance/crypto-com/DESIGN.md· 24.6 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.