--- version: alpha name: Coinbase-design-analysis description: "A crypto exchange drawn as a bright finance page: white and pale gray surfaces, near-black ink, one saturated blue (#0052ff), Coinbase Display and Sans in regular and semibold, and round 44 high pill buttons and tabs." status: Draft appVersion: "measured in a browser, 2026-10-06" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#0052ff" on-primary: "#ffffff" link: "#0667d0" ink: "#0a0b0d" ink-muted: "#5b616e" black: "#000000" canvas: "#ffffff" canvas-subtle: "#eef0f3" canvas-soft: "#f2f4f6" positive: "#098551" chip-dark: "#282b31" scrim: "#32353d54" typography: # Font note: "CoinbaseDisplay" is a private font and is not available in open fonts. Closest open alternative: "Geist". # Font note: "CoinbaseSans" is a private font and is not available in open fonts. Closest open alternative: "Inter". # Font note: "CoinbaseText" is a private font and is not available in open fonts. Closest open alternative: "Inter". display: fontFamily: "CoinbaseDisplay, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" fontSize: 40px fontWeight: 400 lineHeight: 48px heading: fontFamily: "CoinbaseSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" fontSize: 28px fontWeight: 700 lineHeight: 32px subheading: fontFamily: "CoinbaseSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px body: fontFamily: "CoinbaseSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px button: fontFamily: "CoinbaseSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px rounded: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px chip: 40px pill: 56px spacing: sm: 8px md: 10px base: 12px lg: 16px xl: 24px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" height: 44px padding: 0 24px tab: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" height: 44px padding: 12px 24px skip-link: backgroundColor: "{colors.canvas-subtle}" textColor: "{colors.primary}" typography: "{typography.body}" height: 36px padding: 10px 16px search-field: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.chip}" height: 40px padding: 8px 16px --- ## Overview Coinbase is a crypto exchange with a public market site. The look is a calm, bright finance page: white and pale gray, near-black ink, one saturated blue for every action and plenty of rounded pills. [Observed] What defines the look: 1. **One saturated blue.** `#0052ff` fills the main buttons and marks links on a white page. [Measured] 2. **Near-black ink on cool grays.** Text is `#0a0b0d` with `#5b616e` for secondary lines, on white and a pale gray `#eef0f3`. [Measured] 3. **Round pills.** Buttons and tabs are 44 high with a fully round corner, and chips are 40 high. Cards use 16 and 24. [Measured] 4. **Three Coinbase faces.** Display for large titles, Sans for interface and headings, and Text for reading copy. [Measured] 5. **Green for gains.** `#098551` marks positive price moves. [Measured] Source for this file: the Coinbase explore page and the Bitcoin price page measured in a browser at 1440 and 390 wide, read on 2026-10-06. Coinbase's own design system documentation was not read. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Action blue | `#0052ff` | Primary buttons, skip links | | Link blue | `#0667d0` | Inline links | | Text | `#0a0b0d` | Titles and body | | Secondary text | `#5b616e` | Meta lines | | Page | `#ffffff` | Main surface | | Pale gray | `#eef0f3`, `#f2f4f6` | Panels and rows | | Positive | `#098551` | Gains | | Dark chip | `#282b31` | Selected filter chips | ### Typography Coinbase Display carries large titles: 40 on 48 at 400. Coinbase Sans carries headings and interface text: 28 on 32 at 700 for section headings, 16 on 24 at 600 for subheadings and buttons, 16 at 400 for body. Coinbase Text and Mono are also loaded. [Measured] ### Shape and spacing Corners seen are 4, 8, 12, 16, 24 and 40, and a fully round 56 on buttons. Buttons and tabs are 44 high with 12 by 24 padding, the skip links 36 high and fields 40 to 56 high. [Measured] ### Iconography and motion A Coinbase icon font is loaded. Motion was not measured. [Measured for the icon font] ### Themes Light on the pages measured. [Observed] ## Platform: iOS The Coinbase iOS app was not captured. The notes below follow from the web design and platform conventions. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A bottom tab bar for the main areas of a finance app. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A blue primary button for trading or buying. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Not measured. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. The apps are expected to share the blue, the ink and the pill shapes with the web. [Inferred] ## Platform: Android The Coinbase Android app was not captured. The notes below follow from the web design and platform conventions. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A bottom navigation bar for the main areas of a finance app. [Inferred] ### Main action Expected on Android: Floating action button. A blue primary button for trading or buying. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Not measured. [Inferred] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. The apps are expected to share the blue, the ink and the pill shapes with the web. [Inferred] ## Platform: Web The Coinbase explore page and Bitcoin price page, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. A top bar with audience tabs (Individuals, Businesses, Institutions, Developers) as 44 high pills, a search field and sign-in and sign-up buttons. [Observed] ### Main action Expected on Web: Page-level button. A blue pill button, 44 high, white semibold text. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. Pill tabs, 40 high filter chips and 40 to 56 high fields. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values at each breakpoint. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Buttons and tabs measure 44 high. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. Not applicable to the public pages measured. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. The responsive page keeps type and color and changes layout. [Measured] ## Cross-platform consistency Consistent across platforms: the blue, the pill shapes, the gray surfaces and the type family. [Measured for web, Inferred for the apps] Intentionally different: not measured. [Inferred] ## Do's and Don'ts ### Do - Use the one blue for the main action. - Keep buttons and tabs as 44 high pills. - Use pale gray panels instead of borders. - Use green only for gains. ### Don't - Don't add a second action color. - Don't use sharp corners on buttons. - Don't use the blue for body text. ## Known Gaps - Trading screens, the portfolio and the signed-in app were not measured, since they sit behind login. - The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions. - Icons, motion and exact breakpoints were not measured. - Account deletion and store policy rules were not verified. - Coinbase's published design system was not read, so role names are not given.