Discord
다운로드

Coinbase 디자인 시스템.

Coinbase 디자인 시스템 — 암호화폐 거래소. 깔끔한 블루 아이덴티티, 신뢰 중심, 기관 투자자 스타일.

이 플러그인 사용 → GitHub에서 보기 →

실제 적용 모습 보기

동일한 디자인 토큰을 웹사이트, 앱, 슬라이드, 포스터 등 다양한 아티팩트 종류에 적용한 모습입니다. 스크린샷이 아니라 이 시스템으로 다시 스킨을 입힌 오리지널 목업입니다.

웹사이트
슬라이드
앱
포스터

디자인 토큰

Open Design 토큰 규약을 따르는 56개의 토큰 — agent가 어떤 아티팩트든 테마를 입힐 때 읽는 것과 동일한, 구조화된 팔레트, 타입, 간격, 모션 값입니다.

서피스

  • --bg #ffffff
  • --surface #eef0f3
  • --surface-warm var(--surface)

텍스트

  • --fg #0a0b0d
  • --fg-2 var(--fg)
  • --muted #5b616e
  • --meta var(--muted)

테두리

  • --border rgba(91, 97, 110, 0.2)
  • --border-soft var(--border)

액센트

  • --accent #0052ff
  • --accent-on #ffffff
  • --accent-hover #578bfa
  • --accent-active #0667d0

시맨틱

  • --success #16a34a
  • --warn #eab308
  • --danger #dc2626

타이포그래피

  • --font-display "CoinbaseDisplay", "Coinbase Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif
  • --font-body "CoinbaseText", "CoinbaseSans", "Coinbase Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif
  • --font-mono ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace

타입 스케일

  • --text-xs 12px
  • --text-sm 14px
  • --text-base 16px
  • --text-lg 18px
  • --text-xl 32px
  • --text-2xl 36px
  • --text-3xl 52px
  • --text-4xl 80px
  • --leading-body 1.5
  • --leading-tight 1.0
  • --tracking-display -0.01em

간격

  • --space-1 4px
  • --space-2 8px
  • --space-3 12px
  • --space-4 16px
  • --space-5 20px
  • --space-6 24px
  • --space-8 32px
  • --space-12 48px
  • --section-y-desktop 96px
  • --section-y-tablet 64px
  • --section-y-phone 40px

모서리 반경

  • --radius-sm 8px
  • --radius-md 16px
  • --radius-lg 32px
  • --radius-pill 9999px

엘리베이션

  • --elev-flat none
  • --elev-ring 0 0 0 1px var(--border)
  • --elev-raised 0 1px 2px color-mix(in oklab, var(--fg), transparent 92%)

포커스

  • --focus-ring 0 0 0 2px var(--fg)

모션

  • --motion-fast 150ms
  • --motion-base 200ms
  • --ease-standard cubic-bezier(0.2, 0, 0, 1)

레이아웃

  • --container-max 1280px
  • --container-gutter-desktop 24px
  • --container-gutter-tablet 16px
  • --container-gutter-phone 16px

Design System Inspired by Coinbase

Category: Fintech & Crypto Crypto exchange. Clean blue identity, trust-focused, institutional feel.

1. Visual Theme & Atmosphere

Coinbase’s website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (#0052ff) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.

The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (#578bfa). The design alternates between white content sections and dark (#0a0b0d, #282b31) feature sections, creating a professional, financial-grade interface.

Key Characteristics:

  • Coinbase Blue (#0052ff) as singular brand accent
  • Four-font proprietary family: Display, Sans, Text, Icons
  • 56px radius pill buttons with blue hover transition
  • Near-black (#0a0b0d) dark sections + white light sections
  • 1.00 line-height on display headings — ultra-tight
  • Cool gray secondary surface (#eef0f3) with blue tint
  • text-transform: lowercase on some button labels — unusual

2. Color Palette & Roles

Primary

  • Coinbase Blue (#0052ff): Primary brand, links, CTA borders
  • Pure White (#ffffff): Primary light surface
  • Near Black (#0a0b0d): Text, dark section backgrounds
  • Cool Gray Surface (#eef0f3): Secondary button background

Interactive

  • Hover Blue (#578bfa): Button hover background
  • Link Blue (#0667d0): Secondary link color
  • Muted Blue (#5b616e): Border color at 20% opacity

Surface

  • Dark Card (#282b31): Dark button/card backgrounds
  • Light Surface (rgba(247,247,247,0.88)): Subtle surface

3. Typography Rules

Font Families

  • Display: CoinbaseDisplay — hero headlines
  • UI / Sans: CoinbaseSans — buttons, headings, nav
  • Body: CoinbaseText — reading text
  • Icons: CoinbaseIcons — icon font

Hierarchy

RoleFontSizeWeightLine HeightNotes
Display HeroCoinbaseDisplay80px4001.00 (tight)Maximum impact
Display SecondaryCoinbaseDisplay64px4001.00Sub-hero
Display ThirdCoinbaseDisplay52px4001.00Third tier
Section HeadingCoinbaseSans36px4001.11 (tight)Feature sections
Card TitleCoinbaseSans32px4001.13Card headings
Feature TitleCoinbaseSans18px6001.33Feature emphasis
Body BoldCoinbaseSans16px7001.50Strong body
Body SemiboldCoinbaseSans16px6001.25Buttons, nav
BodyCoinbaseText18px4001.56Standard reading
Body SmallCoinbaseText16px4001.50Secondary reading
ButtonCoinbaseSans16px6001.20+0.16px tracking
CaptionCoinbaseSans14px600–7001.50Metadata
SmallCoinbaseSans13px6001.23Tags

4. Component Stylings

Buttons

Primary Pill (56px radius)

  • Background: #eef0f3 or #282b31
  • Radius: 56px
  • Border: 1px solid matching background
  • Hover: #578bfa (light blue)
  • Focus: 2px solid black outline

Full Pill (100000px radius)

  • Used for maximum pill shape

Blue Bordered

  • Border: 1px solid #0052ff
  • Background: transparent

Cards & Containers

  • Radius: 8px–40px range
  • Borders: 1px solid rgba(91,97,110,0.2)

5. Layout Principles

Spacing System

  • Base: 8px
  • Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px

Border Radius Scale

  • Small (4px–8px): Article links, small cards
  • Standard (12px–16px): Cards, menus
  • Large (24px–32px): Feature containers
  • XL (40px): Large buttons/containers
  • Pill (56px): Primary CTAs
  • Full (100000px): Maximum pill

6. Depth & Elevation

Minimal shadow system — depth from color contrast between dark/light sections.

7. Do’s and Don’ts

Do

  • Use Coinbase Blue (#0052ff) for primary interactive elements
  • Apply 56px radius for all CTA buttons
  • Use CoinbaseDisplay for hero headings only
  • Alternate dark (#0a0b0d) and white sections

Don’t

  • Don’t use the blue decoratively — it’s functional only
  • Don’t use sharp corners on CTAs — 56px minimum

8. Responsive Behavior

Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px

9. Agent Prompt Guide

Quick Color Reference

  • Brand: Coinbase Blue (#0052ff)
  • Background: White (#ffffff)
  • Dark surface: #0a0b0d
  • Secondary surface: #eef0f3
  • Hover: #578bfa
  • Text: #0a0b0d

Example Component Prompts

  • “Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa.”
  • “Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff).”
모드
design-system
장면
design
서피스
web
Manifest ID
design-system-coinbase

태그

  • design-system
  • first-party
  • design
  • fintech-crypto

Open Design 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows, Linux 지원