Quick Answer

Kraken is a brand design system known for its distinctive visual language. The design uses signature brand colors as primary color. It is built on a clean dark canvas with strong typographic hierarchy. Full design tokens, color palette, and component library are documented on this page.

Kraken

Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (#7132f5) creating a distinctive, professional crypto identity.

Homepage Example

Kraken
ExploreLearn MoreAPI
BTC/USD
$67,432
ETH/USD
$3,521
Volume
$2.4B
Get Started with Kraken
© Kraken

Color Palette (11)

primary#7132f5
purple-dark#5741d8
purple-deep#5b1ecf
purple-subtlergba(133,91,251,0.16)
near-black#101114
cool-gray#686b82
silver-blue#9497a9
white#ffffff
border-gray#dedee5
green#149e61
green-dark#026b3f

Typography (10)

display-hero
display-hero48px · weight 700
section-heading
section-heading36px · weight 700
sub-heading
sub-heading28px · weight 700
feature-title
feature-title22px · weight 600
body
body16px · weight 400
body-medium
body-medium16px · weight 500
button
button16px · weight 500
caption
caption14px · weight 400
small
small12px · weight 400
micro
micro7px · weight 500

Components (5)

button-primary
button-primary
button-outlined
button-outlined
button-subtle
button-subtle
button-white
button-white
button-secondary
button-secondary

Border Radius

3 (3px)
6 (6px)
8 (8px)
10 (10px)
12 (12px)
16 (16px)
pill (9999px)

Design Philosophy

Overview

Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (#7132f5) creating a distinctive, professional crypto identity.

Colors

Primary

  • **Kraken Purple** (#7132f5): Primary CTA, brand accent, links
  • **Purple Dark** (#5741d8): Button borders, outlined variants
  • **Near Black** (#101114): Primary text

Neutral

  • **Cool Gray** (#686b82): Primary neutral
  • **Silver Blue** (#9497a9): Secondary text
  • **White** (#ffffff): Primary surface

Typography

**Kraken-Brand** for display headings with bold (700) weight and negative tracking. **Kraken-Product** (with IBM Plex Sans fallback) serves as the UI workhorse.

| Token | Size | Weight | Line Height | Letter Spacing |

|---|---|---|---|---|

| Display Hero | 48px | 700 | 1.17 | -1px |

| Section Heading | 36px | 700 | 1.22 | -0.5px |

| Body | 16px | 400 | 1.38 | normal |

Components

Buttons use 12px radius (rounded but not pill). Subtle shadows (`rgba(0,0,0,0.03) 0px 4px 24px`) and green accent (#149e61) for positive states.

Do's and Don'ts

Use Kraken Purple (#7132f5) for CTAs and links. Apply 12px radius on all buttons. Don't use pill buttons — 12px is the max radius for buttons.

개요

Kraken의 웹사이트는 보라색을 주요 브랜드 색상으로 사용하는 깨끗하고 신뢰할 수 있는 암호화폐 거래소입니다. 디자인은 흰색 배경에 Kraken Purple(#7132f5)을 사용하여 독특하고 전문적인 암호화폐 아이덴티티를 만들어냅니다.

색상

기본

  • **Kraken Purple**(#7132f5): 기본 CTA, 브랜드 강조, 링크
  • **보라색 어두운**(#5741d8): 버튼 테두리, 윤곽선 변형
  • **검은색에 가까움**(#101114): 기본 텍스트

중립적

  • **쿨 그레이**(#686b82): 기본 중립
  • **실버 블루**(#9497a9): 보조 텍스트
  • **흰색**(#ffffff): 기본 표면

타이포그래피

**Kraken-Brand** 굵은 글씨(700) 가중치와 음수 추적 기능이 있는 표시 제목용. **Kraken-Product**(IBM Plex Sans 폴백 포함)는 UI의 핵심 역할을 합니다.

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 |

|---|---|---|---|---|

| 영웅 표시 | 48px | 700 | 1.17 | -1픽셀 |

| 섹션 제목 | 36px | 700 | 1.22 | -0.5px |

| 몸 | 16px | 400 | 1.38 | 일반 |

구성요소

버튼은 12px 반경을 사용합니다(둥근 모양이지만 알약 모양은 아님). 긍정적인 상태를 나타내는 미묘한 그림자(`rgba(0,0,0,0.03) 0px 4px 24px`) 및 녹색 액센트(#149e61).

해야 할 일과 하지 말아야 할 일

CTA 및 링크에 Kraken Purple(#7132f5)을 사용하세요. 모든 버튼에 12px 반경을 적용합니다. 알약 버튼을 사용하지 마세요. 버튼의 최대 반경은 12px입니다.

概要

Kraken の Web サイトは、紫をブランドカラーとして使用している、クリーンで信頼できる暗号通貨取引所です。このデザインは、白の背景にクラーケン パープル (#7132f5) を使用して、独特でプロフェッショナルな暗号通貨のアイデンティティを作成しています。

プライマリ

  • **Kraken Purple** (#7132f5): プライマリ CTA、ブランド アクセント、リンク
  • **パープル ダーク** (#5741d8): ボタンの境界線、アウトラインのバリアント
  • **黒に近い** (#101114): 主要テキスト

中立

  • **クールグレー** (#686b82): プライマリニュートラル
  • **シルバー ブルー** (#9497a9): 二次テキスト
  • **白** (#ffffff): プライマリ サーフェス

タイポグラフィ

**Kraken-Brand** 太字 (700) のウェイトとネガティブ トラッキングの表示見出し用。 **Kraken-Product** (IBM Plex Sans フォールバックを使用) は UI の主力製品として機能します。

|トークン |サイズ |重量 |行の高さ |文字間隔 |

|---|---|---|---|---|

|ディスプレイヒーロー | 48ピクセル | 700 | 1.17 | -1px |

|セクション見出し | 36ピクセル | 700 | 1.22 | -0.5px |

|本文 | 16ピクセル | 400 | 1.38 |通常 |

コンポーネント

ボタンは 12 ピクセルの半径を使用します (丸みを帯びていますが、毛玉ではありません)。ポジティブな状態の微妙な影 (`rgba(0,0,0,0.03) 0px 4px 24px`) と緑のアクセント (#149e61)。

推奨事項と禁止事項

CTA とリンクには Kraken Purple (#7132f5) を使用します。すべてのボタンに 12 ピクセルの半径を適用します。丸薬ボタンは使用しないでください。ボタンの最大半径は 12 ピクセルです。

Design Insights

Visual Identity & Brand Recognition

What makes Kraken's design system memorable is not any single element but the cohesive interaction of its parts. The #7132f5 brand color, the consistent use of Kraken-Brand across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Visual Identity & Brand Recognition

What makes Kraken's design system memorable is not any single element but the cohesive interaction of its parts. The #7132f5 brand color, the consistent use of Kraken-Brand across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Visual Identity & Brand Recognition

What makes Kraken's design system memorable is not any single element but the cohesive interaction of its parts. The #7132f5 brand color, the consistent use of Kraken-Brand across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Related Design Systems

Explore similar design languages from the same category:

· About · Contact