Coinbase

version: alpha name: Coinbase-design-analysis description: An institutional-grade crypto exchange whose marketing surfaces read like a quietly-confident financial-services brand. The base canvas is pure white; Coinbase Blue (#0052ff) is the single brand voltage, used scarcely on primary CTAs, signature glyphs, and inline accent moments. Type runs Coinbase's licensed CoinbaseDisplay (display) and CoinbaseSans (body) at modest weights — display sits at weight 400 not 700, signaling editorial calm rather than fintech-bombastic. Page rhythm rotates between bright white sections, soft gray elevation bands, and full-bleed dark editorial heroes (#0a0b0d) carrying product-ui mockup cards. Iconography is geometric and minimal; depth comes from card-on-card layering, never decorative shadows.

colors: primary: "#0052ff" primary-active: "#003ecc" primary-disabled: "#a8b8cc" ink: "#0a0b0d" body: "#5b616e" body-strong: "#0a0b0d" muted: "#7c828a" muted-soft: "#a8acb3" hairline: "#dee1e6" hairline-soft: "#eef0f3" canvas: "#ffffff" surface-soft: "#f7f7f7" surface-card: "#ffffff" surface-strong: "#eef0f3" surface-dark: "#0a0b0d" surface-dark-elevated: "#16181c" on-primary: "#ffffff" on-dark: "#ffffff" on-dark-soft: "#a8acb3" semantic-up: "#05b169" semantic-down: "#cf202f" accent-yellow: "#f4b000"

typography: display-mega: fontFamily: "'Coinbase Display', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 80px fontWeight: 400 lineHeight: 1.0 letterSpacing: -2px display-xl: fontFamily: "'Coinbase Display', sans-serif" fontSize: 64px fontWeight: 400 lineHeight: 1.0 letterSpacing: -1.6px display-lg: fontFamily: "'Coinbase Display', sans-serif" fontSize: 52px fontWeight: 400 lineHeight: 1.0 letterSpacing: -1.3px display-md: fontFamily: "'Coinbase Display', sans-serif" fontSize: 44px fontWeight: 400 lineHeight: 1.09 letterSpacing: -1px display-sm: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 36px fontWeight: 400 lineHeight: 1.11 letterSpacing: -0.5px title-lg: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.13 letterSpacing: -0.4px title-md: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.33 letterSpacing: 0 title-sm: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0 body-md: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption-strong: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0 number-display: fontFamily: "'Coinbase Mono', 'Coinbase Sans', monospace" fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 button: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.15 letterSpacing: 0 nav-link: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0

rounded: none: 0px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px pill: 100px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px base: 16px md: 20px lg: 24px xl: 32px xxl: 48px section: 96px

components: top-nav-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px top-nav-on-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" height: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 12px 20px height: 44px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" button-secondary-light: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 12px 20px height: 44px button-secondary-dark: backgroundColor: "{colors.surface-dark-elevated}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 12px 20px height: 44px button-outline-on-dark: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 11px 19px height: 44px button-tertiary-text: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.button}" button-pill-cta: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 16px 32px height: 56px hero-band-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-mega}" padding: 96px hero-band-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-mega}" padding: 96px product-ui-card-dark: backgroundColor: "{colors.surface-dark-elevated}" textColor: "{colors.on-dark}" rounded: "{rounded.xl}" padding: 32px product-ui-card-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 32px feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 32px asset-row: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" padding: 16px 0 price-up-cell:

概览

Coinbase 读起来像是一家碰巧在做加密货币的机构金融品牌 —— 营销表面安静、白画布、编辑式留白、几乎是单色的。唯一的品牌能量是 Coinbase Blue（{colors.primary} — #0052ff），使用克制：每个主 CTA 胶囊、品牌字标、行内强调链接。除此之外，系统是白画布 + 主墨 + 柔灰浮起色带 + 一个深近黑的编辑画布（{colors.surface-dark} — #0a0b0d）用于满版产品 mockup 首屏。

字体将 CoinbaseDisplay 用于 hero 标题，CoinbaseSans 用于正文、说明和导航。展示字字重 400——不是交易平台常见的 700+。这种选择传达出编辑式平静和机构信任感，而非金融科技的紧迫。

页面节奏在三种模式间轮转：明亮的白色编辑章节、柔灰浮起色带，以及满版深色编辑首屏（承载层叠的产品 UI mockup 卡片）。深色首屏配悬浮仪表盘 mockup 是单一最标志性的组件。

关键特征：

• 单一点缀色：{colors.primary}（#0052ff Coinbase Blue）承担每个主 CTA、字标和行内品牌链接。使用克制。
• 展示字重克制 —— CoinbaseDisplay 用 400，绝不上 700+。
• 编辑式胶囊几何：每个 CTA 都是 {rounded.pill}（100px），每个资产图标是 {rounded.full}，每个卡片是 {rounded.xl}（24px）。无尖角。
• 满版深色首屏配悬浮产品 UI 卡片：{component.hero-band-dark} 加内联 {component.product-ui-card-dark} mockup 是品牌最强的标志模式。
• 交易语义色：{colors.semantic-up}（#05b169）和 {colors.semantic-down}（#cf202f）—— 仅用于文字色，绝不用作背景填充。
• 96px 章节节奏 —— 慷慨的编辑式节奏。

配色

品牌与点缀

• Coinbase Blue（{colors.primary} — #0052ff）：唯一的品牌色。每个主 CTA 胶囊、Coinbase 字标和行内品牌链接。
• Coinbase Blue 激活（{colors.primary-active} — #003ecc）：主胶囊上的按下态加深。
• Coinbase Blue 禁用（{colors.primary-disabled} — #a8b8cc）：禁用 CTA 的淡化蓝。
• 点缀黄（{colors.accent-yellow} — #f4b000）：极克制使用的子品牌点缀，仅出现在功能卡片内的 Bitcoin/资产图标填充里。仅为示意，不是动作色。

表面

• 画布（{colors.canvas} — #ffffff）：默认页面底色。
• 表面柔（{colors.surface-soft} — #f7f7f7）：克制的交替色带表面。
• 表面强（{colors.surface-strong} — #eef0f3）：次要按钮、搜索胶囊、资产图标板的浅灰底。
• 表面深色（{colors.surface-dark} — #0a0b0d）：用于满版深色首屏、CTA 带的深近黑画布。与 {colors.ink} 同 hex —— 页面底色与文字色共享该值。
• 表面深色浮起（{colors.surface-dark-elevated} — #16181c）：亮一档，用于深色首屏中悬浮的产品 UI mockup 卡片。

细线

• 细线（{colors.hairline} — #dee1e6）：白表面上的默认 1px 分隔。
• 细线柔（{colors.hairline-soft} — #eef0f3）：更淡的分隔 —— 与 {colors.surface-strong} 同 hex。

文字

• 主墨（{colors.ink} — #0a0b0d）：展示标题、主导航、正文强调。
• 正文（{colors.body} — #5b616e）：默认正文 —— 略冷的灰。
• 正文强（{colors.body-strong} — #0a0b0d）：同 ink，用于更强强调。
• 弱化（{colors.muted} — #7c828a）：副标题、面包屑、页脚次要文字。
• 弱化柔（{colors.muted-soft} — #a8acb3）：禁用链接文字。
• 在主色上（{colors.on-primary} — #ffffff）：Coinbase Blue CTA 上的白字。
• 在深色上（{colors.on-dark} — #ffffff）：深色首屏上的白字。
• 在深色上柔（{colors.on-dark-soft} — #a8acb3）：深色上次要文字的弱化近白。

交易语义色

• 上涨（{colors.semantic-up} — #05b169）："价格上涨"绿，仅用作文字色。
• 下跌（{colors.semantic-down} — #cf202f）："价格下跌"红，仅用作文字色。

字体

字体族

系统使用 CoinbaseDisplay（展示标题）、CoinbaseSans（正文、导航、说明、按钮）、CoinbaseIcons（图标字体），以及 CoinbaseMono 用于表格化数字。降级栈：-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif。

展示/正文的区分是功能性的：CoinbaseDisplay 只承担 hero 标题；CoinbaseSans 承担其他所有。

层级

原则

• 展示字重保持 400。 单一最独特的字体选择 —— 传达"平静的机构品牌"而非"交易平台紧迫感"。
• 负字距仅用于展示字。 展示字用 -1px 到 -2px 字距；正文保持 0。
• CoinbaseMono 用于所有数字。 资产价格、涨跌幅 —— 任何表格化的内容都用 CoinbaseMono。

字体替代说明

CoinbaseDisplay、CoinbaseSans 和 CoinbaseMono 是 Coinbase 授权字体。

• CoinbaseDisplay → Inter 字重 400，字距 -1.5%。
• CoinbaseSans → Inter 字重 400/600。
• CoinbaseMono → JetBrains Mono 或 Geist Mono 字重 500。

布局

间距系统

• 基础单位： 4px。
• Token： {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px。
• 章节内边距： 每个主要编辑带 {spacing.section}（96px）。
• 卡片内边距： 功能卡片和产品 UI mockup 用 {spacing.xl}（32px）。

网格与容器

• 最大内容宽： ~1200px 居中。Hero 摄影为满版。
• 编辑正文： 12 栏单网格。
• 功能卡片栅格： 桌面 2 栏（hero 分屏）、3 栏（收益栅格）。
• 页脚： 桌面 6 栏链接列表。

留白哲学

慷慨的编辑式节奏 —— 接近 Bloomberg 或 Financial Times，而非交易仪表盘。章节间 96px；带内卡片间 24px。密集感藏在登录墙之后，不在营销页上。

层次与深度

装饰性深度

• 深色首屏中分层的产品 UI 卡片 是最独特的装饰模式 —— 一张 {component.product-ui-card-dark} 浮在更深的底画布上，常有第二张小卡片以一定角度叠在其上。
• 几何品牌插画 在原本该用阴影的位置承担装饰深度。

形状

圆角等级

交互用胶囊、容器用卡片圆角（24px）、图标用正圆。无尖角。

组件

顶部导航

top-nav-light —— 白页默认顶栏。底色 {colors.canvas}，文字 {colors.ink}，高 64px。布局：左侧 Coinbase 字标、中左主菜单（Cryptocurrencies / Individuals / Businesses / Institutions / Developers / Company）、右侧搜索图标 + 地球仪 + Sign In + Sign Up CTA。

top-nav-on-dark —— 深色 hero 色带上的顶栏。底色 {colors.surface-dark}，文字 {colors.on-dark}。布局相同。

按钮

button-primary —— 标志性 Coinbase Blue 胶囊。底色 {colors.primary}，文字 {colors.on-primary}，字体 {typography.button}（16px / 600），内边距 12px × 20px，高 44px，圆角 {rounded.pill}（100px）。

button-primary-active —— 按下态。底色 {colors.primary-active}，更深的蓝。

button-primary-disabled —— 淡化的蓝调。底色 {colors.primary-disabled}。鼠标 not-allowed 光标。

button-secondary-light —— 白底上的柔灰次按钮。底色 {colors.surface-strong}，文字 {colors.ink}，同样的胶囊几何。

button-secondary-dark —— 用于深色首屏。底色 {colors.surface-dark-elevated}，文字 {colors.on-dark}，同样的胶囊几何。

button-outline-on-dark —— 透明胶囊配白描边。底色透明，文字 {colors.on-dark}，1px 白边。

button-tertiary-text —— 行内文字链接。底色透明，文字 {colors.primary}，字体 {typography.button}。

button-pill-cta —— 首页 hero 使用的较大胶囊 CTA（"Get started"）。同样的 Coinbase Blue 调色板，但高 56px、内边距 16px × 32px，姿态更稳。

Hero 带

hero-band-dark —— 标志性满版深色 hero。底色 {colors.surface-dark}，文字 {colors.on-dark}，满版分层产品 UI mockup 卡片。左侧展示标题用 {typography.display-mega}（80px / 400），副标题用 {typography.body-md}，两个 CTA。

hero-band-light —— Wealth 和 Explore 使用的白画布变体。底色 {colors.canvas}，文字 {colors.ink}。同一骨架，浅色调。

卡片

product-ui-card-dark —— 悬浮的产品 UI mockup。底色 {colors.surface-dark-elevated}，文字 {colors.on-dark}，圆角 {rounded.xl}（24px），内边距 32px。常以 2-3 张轻微旋转的堆叠形式展示，模拟分层仪表盘。

product-ui-card-light —— Explore 上资产卡用的白画布变体。底色 {colors.canvas}，文字 {colors.ink}，同样几何，1px 细线边框。

feature-card —— 用于 3 栏和 2 栏栅格。底色 {colors.canvas}，文字 {colors.ink}，字体 {typography.title-md}，圆角 {rounded.xl}，内边距 32px。

交易表面

asset-row —— 资产列表中的横排（Explore、Wealth）。底色透明，1px 细线分隔。布局：左侧 32px 圆形资产图标，资产名 + 代码，{typography.number-display} 的价格列，{component.price-up-cell} 或 {component.price-down-cell} 的 24h 变化列。

price-up-cell + price-down-cell —— 行内价格变化单元格。仅颜色 —— 绿色或红色文字用 {typography.number-display}，无背景填充。

asset-icon-circular —— 资产图标后的圆形底板。底色 {colors.surface-strong}，圆角 {rounded.full}，32px 直径。

价格

pricing-tier-card —— Developer Platform 的标准价格档。底色 {colors.canvas}，圆角 {rounded.xl}，内边距 32px，1px 细线边框。布局：档名 + 价格 + 功能清单 + CTA 胶囊。

pricing-tier-featured —— 主推档。底色 {colors.surface-dark}，文字 {colors.on-dark}。同样骨架，深色调 —— 视觉反转即"高亮选择"信号，无需彩色飘带。

表单

text-input —— 标准文本输入。底色 {colors.canvas}，文字 {colors.ink}，圆角 {rounded.md}（12px），内边距 14px × 16px，高 48px，1px 细线边框。聚焦时边框加粗到 2px Coinbase Blue。

search-input-pill —— 胶囊形搜索栏。底色 {colors.surface-strong}，圆角 {rounded.pill}，内边距 12px × 20px，高 44px。

标签与徽标

badge-pill —— 用作章节标签的小号大写胶囊（"INSTITUTIONAL"、"REGULATED"）。底色 {colors.surface-strong}，文字 {colors.ink}，字体 {typography.caption-strong}，圆角 {rounded.pill}。

CTA / 页脚

cta-band-dark —— 页脚前的 "Take control of your money" 色带。底色 {colors.surface-dark}，文字 {colors.on-dark}，垂直内边距 96px。居中标题 + 两个 CTA。

footer-light —— 收尾的白画布页脚。底色 {colors.canvas}，文字 {colors.body}。6 栏链接列表。

footer-link —— 单个页脚链接。底色透明，文字 {colors.body}。

legal-band —— 页脚列下方的条带。所有文字 {colors.muted}，用 {typography.caption}。

推荐与避免

推荐

• 把 {colors.primary}（Coinbase Blue）留给主 CTA、字标、品牌图标插画、行内点缀链接。
• 每个 CTA 用 {rounded.pill}（100px）；每个资产图标用 {rounded.full}。
• CoinbaseDisplay 标题字重保持 400。
• 用深色/浅色带轮转作为页面节奏。
• 每个数字用 CoinbaseMono 通过 {typography.number-display} 渲染。
• 每个深色 hero 配一组分层的产品 UI mockup 卡片。

避免

• 不要引入第二种品牌色。Coinbase Blue 是唯一的动作色；交易的绿/红仅是语义色。
• 不要加粗展示字 —— 展示字保持 400，加粗会改变品牌声调。
• 不要增加投影等级 —— 系统只有一档阴影。
• 不要在 CTA 上用尖角 {rounded.none}（0px）。
• 不要在同一标题内混用 CoinbaseDisplay 和 CoinbaseSans。
• 不要把交易绿/红用作按钮背景。
• 不要从第三方 widget（cookie 同意、OneTrust）抽取 CTA 色。品牌的 CTA 色是实际产品 CTA 出现的色，不是注入模态上的色。

响应式行为

断点

触控目标

• 主 CTA 胶囊 44px 高 —— 达 WCAG AAA。
• 较大 hero 胶囊（{component.button-pill-cta}）56px —— 远超 AAA。
• 资产图标圆 32px —— 边界值；8px 行内边距创造 48px 有效点击区。
• 搜索胶囊 44px 高 —— 达 AAA。

折叠策略

• 顶栏在 768px 以下切为汉堡面板。Sign Up CTA 保持可见。
• Hero h1 阶梯下降：80 → 64 → 52 → 44 → 36px 直至最小屏。
• 分层产品 UI mockup 卡片从 2-3 张堆叠折为手机上的单卡。
• 价格档行：3 栏 → 2 栏 → 1 栏。
• 资产行在手机上垂直堆叠：代码行在上，价格 + 变化行在下。

迭代指南

1. 一次专注一个组件。直接引用 YAML 键。
2. 新 CTA 默认 {rounded.pill}（100px）；新图标板默认 {rounded.full}。卡片用 {rounded.xl}。
3. 变体作为独立条目存在于 components: 块内。
4. 始终用 {token.refs} —— 绝不内联 hex。
5. 悬停态永不入文档。只有默认态与按下/激活态。
6. CoinbaseDisplay 400 用于展示，CoinbaseSans 400/600/700 用于正文。所有数字用 CoinbaseMono。
7. Coinbase Blue 保持稀缺 —— 每个带 1-2 个蓝色时刻。

已知缺口

• CoinbaseDisplay、CoinbaseSans、CoinbaseMono 是授权字体；Inter 和 JetBrains Mono 是文档化替代品。
• 产品内交易表面（订单簿、图表、订单表单）在登录墙后 —— 本文档只覆盖营销。
• 动效时长不在范围内。
• 超出聚焦态的表单校验态在截取表面上不可见。
• 点缀黄仅出现在 Bitcoin 资产图标插画内；记录为示意性使用。