Crypto.com DESIGN.md

1. Visual Theme & Atmosphere

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

2. Color Palette & Roles

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

3. Typography Rules

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

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).

4. Component Stylings

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 #1199FA at 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, #0B1426 bg, #1199FA 20pt glyph, label Sans 11pt w600 #8DA0BD beneath

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 #00C08B1F bg / #00C08B text

Visa Card (signature — see Distinctive Components)

Term Chips (Earn)

• Pill, #15263F bg, #8DA0BD 13pt w600; selected #1199FA1F bg / #1199FA text — e.g. Flexible / 1M / 3M

Tag / Badge

• "NEW", "Staking", promo badges — pill, #15263F bg, #8DA0BD 10pt w700; reward badges use gold #C8A24A

Navigation

Bottom Tab Bar

• Height: 56pt + safe area
• Background: #03060F at 96% with 1pt top border #1C3354
• Tabs (5): Home, Prices, Trade (floating center), Earn, Card
• Center "Trade": a 44pt #1199FA filled 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 #F4F7FB 22pt
• Center: title Sans 18pt w700
• Trailing: search / share / ⋯ in #F4F7FB

Segmented Control (Spot/Margin, Buy/Sell)

• Pill track #15263F; selected thumb #1199FA (or #00C08B/#F6485D for Buy/Sell) with white text

Input Fields

Search Bar

• Height: 40pt; Background: #15263F; Border: none; Corner radius: 12pt
• Leading magnifyingglass 16pt #8DA0BD
• Placeholder: "Search coins" Sans 14pt #8DA0BD
• Focus: 1.5pt #1199FA border

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 #F6485D 12pt + 1.5pt #F6485D border

Stepper (term/quantity)

• − / + circular #15263F buttons 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 #C8A24A Sans 13pt w700 +1.5px tracking uppercased; Crypto.com mark top-right (white); metal chip ~36×26pt rounded-5pt with gold gradient; masked PAN 5482 •••• •••• 7310 in Roboto Mono 15pt w500 +2px tracking bottom-left; cardholder name uppercased Sans 12pt w600 75% white; italic bold VISA wordmark 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 #15263F track

Card Tier Selector

• Horizontal carousel of metal-gradient tier tiles; each shows tier name + cashback %; CRO-stake requirement under the flagship tiers

Promo / Brand Banner

• Full-width rounded (18pt) card with the Navy gradient (#002D74 → #103F68), white heading + accent CTA pill — the only place deep brand navy fills a large surface

Spot Trade Card

• Buy/Sell pill toggle, amount input, asset selector chip, fee line in #8DA0BD, full-width green/red submit pill

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40
• Screen horizontal inset: 20pt (slightly generous — premium feel)
• Card internal padding: 20pt; list row vertical padding: 11pt
• Section header to first row: 10pt; inter-section gap: 20pt

Grid & Container

• iPhone: 20pt horizontal insets; the Visa card is inset 20pt (not full-bleed) so its rounded metal edges read
• Watchlist/Earn: single column, full-width rows separated by hairlines or surface cards
• iPad: two-pane — list/home left, detail/trade right; card carousel scales up

Whitespace Philosophy

• Premium breathing room: 20pt insets and generous card padding signal "private bank," not "dense terminal"
• The card gets air: the Visa card sits in its own padded zone with shadow so it reads as a physical object
• Hairlines + cards mixed: watchlist uses hairlines; promotional/earn content uses rounded surface cards
• One large navy moment: deep brand navy only fills the promo banner; everywhere else navy is a tint or accent

Border Radius Scale

• Square (0pt): full-bleed dividers, sparkline baselines
• Subtle (6pt): small chips, badges, metal chip on card
• Standard (10pt): inputs, small cards
• Card (14pt): list/content cards, sheets
• Hero Card (18pt): the Visa card, promo banners
• Comfortable (24pt): bottom sheets, modals
• Pill (500pt): all primary/secondary buttons, segmented controls, filter/term chips
• Circle (50%): coin icons, quick-action circles, the floating Trade button, avatars

6. Depth & Elevation

Crypto.com uses moderate elevation — more than Binance (the card and CTAs are meant to feel tactile and premium) but still restrained. Depth comes from navy-tinted surface steps plus a few deliberate shadows.

Shadow Philosophy: Shadows are reserved to make money-objects feel real — the Visa card carries the deepest shadow so it reads as a physical metal card; the floating Trade button gets an accent-tinted glow to draw the eye to the primary action. List content stays flat with surface steps. On the near-black canvas, floating panels also get a 1pt #1C3354 border as a secondary elevation cue.

Motion

• Card flip: tap the Visa card → 3D Y-axis flip (400ms ease-in-out) to reveal CVV/full PAN; soft haptic
• Card carousel: horizontal paged scroll with subtle scale (0.94 → 1.0) on the focused card
• Balance reveal: eye-toggle cross-dissolves the balance to •••••• over 200ms
• Price tick: list price text color-pulses to green/red briefly (~150ms) on update — subtle, not a full background flash
• Tab switch: instant content swap; the floating Trade button does a 1.0→0.92→1.0 press-spring on tap
• Sheet present: bottom sheet slides up 320ms ease-out; scrim fades
• Buy/Sell toggle: thumb slides + color-morphs green↔red 200ms ease-out
• Pull-to-refresh: accent circular spinner; haptic on trigger
• Confirmation: a green check-circle scales in with a success haptic on completed trade/deposit
• Haptics: soft impact on card flip, selection tick on term/segment change, success notification on completed transaction

7. 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/#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
• 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 #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)
• 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

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Canvas (dark): #03060F; Surface 1: #0B1426; Surface 3: #15263F; Divider: #1C3354
• Brand Navy: #002D74 → #103F68 (hero gradient)
• Accent (interactive): #1199FA (pressed #0B7AD1)
• Up / Buy: #00C08B; Down / Sell: #F6485D
• Card gold: #C8A24A
• Text primary: #F4F7FB / secondary #8DA0BD / tertiary #5B6E8C
• Link: #1199FA
• Canvas (light): #FFFFFF; text primary light #0A1F44

Example Component Prompts

• "Build the Crypto.com metallic Visa card in SwiftUI: a RoundedRectangle(cornerRadius: 18) with a LinearGradient([#0A0A0C, #1A1A1E, #26262C], topLeading→bottomTrailing) (Obsidian tier). Overlay a faint 8% white diagonal sheen. Top-left: 'OBSIDIAN' in Manrope 13pt w700, tracking 1.5, color #C8A24A. Top-right: white Crypto.com mark 22pt. A 36×26 rounded-5 gold-gradient chip. Bottom-left: masked PAN 5482 •••• •••• 7310 in Roboto Mono 15pt w500 tracking 2; cardholder name uppercased Manrope 12pt w600 at 75% white below. Bottom-right: italic bold VISA white. Apply shadow color: .black.opacity(0.8), radius: 30, x: 0, y: 14. Aspect ratio 1.586."

• "Create the Crypto.com total-balance hero: label 'Total Balance (USD)' in Manrope 12pt #8DA0BD. Below: $ 18,402.65 in Roboto Mono 30pt w600 #F4F7FB with .monospacedDigit(). Below: +$320.18 (+1.77%) Today in Roboto Mono 12pt colored #00C08B. Add a trailing eye toggle that cross-dissolves the value to •••••• over 200ms."

• "Build the Crypto.com watchlist row: 56pt tall, 20pt horizontal / 11pt vertical insets. Leading 34pt circular coin icon. A VStack: symbol BTC in Manrope 15pt w700 #F4F7FB and Bitcoin in Manrope 12pt #8DA0BD. Trailing VStack right-aligned: price $67,284.10 in Roboto Mono 15pt w600 #F4F7FB and +2.34% in Roboto Mono 12pt w600 #00C08B (red #F6485D if negative)."

• "Render the Crypto.com bottom tab bar: 5 items on a #03060F@96% bar, 1pt #1C3354 top border. Side tabs Home/Prices/Earn/Card: 20pt icon, label Manrope 10pt w600; active #1199FA (filled icon), inactive #5B6E8C. The 3rd slot is a floating 44pt #1199FA circle lifted -6pt with a white swap glyph and an accent-tinted glow shadow color: #1199FA.opacity(0.4), radius: 16, y: 6 — no label."

• "Build the Crypto.com primary CTA: a fully-rounded pill (Capsule()), #1199FA background, white Manrope 15pt w700 text, 13pt vertical / 28pt horizontal padding, full-width 52pt on forms. Pressed: #0B7AD1 + scale 0.98."

• "Create the Crypto.com Earn row: leading 30pt coin icon, name Cronos Manrope 14pt w700 #F4F7FB with 3-month term Manrope 11pt #8DA0BD below, trailing 8.00% APR in Roboto Mono 15pt w600 #00C08B. Add a term-chip row above (Flexible / 1M / 3M) as pills #15263F → selected #1199FA1F/#1199FA."

Iteration Guide

1. Canvas is navy-tinted dark #03060F/#0B1426 — cool blue cast, never neutral gray
2. Two blues: Brand Navy #002D74/#103F68 is decorative (hero/banner); Accent #1199FA is interactive
3. The metallic Visa card is the hero — tier gradient + gloss + gold embossing + heavy shadow + italic VISA
4. Card tiers map to cashback: Midnight 1% → Ruby 2% → Jade 3% → Obsidian 5%
5. All money (balance, price, APR, %, PAN) in Roboto Mono with tabular figures
6. Buttons are full pills; cards are 14–18pt; the look is premium, not terminal-tight
7. Up/buy #00C08B, down/sell #F6485D, never inverted across themes
8. The center Trade tab is a floating #1199FA circle with an accent-tinted glow
9. Total-balance hero + today's P&L sits at the top of Home
10. Deep navy fills only the promo/brand banner; elsewhere it's a tint or accent — light theme keeps accent/navy/card metals unchanged