실제 적용 모습 보기

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

kraken.com

NEW · LIVE PREVIEW

Build something people love.

A mock UI rendered with the Kraken design tokens — straight from its DESIGN.md.

Get startedLearn more

Fast

Secure

Simple

웹사이트

Kraken01 / 12

KEYNOTE

Design that ships itself.

One DESIGN.md — every surface on-brand.

NextAgenda

슬라이드

9:41

Kraken

Today

Make it yours.

앱

Kraken2026

Make
it
real.

Open DesignDESIGN.md

포스터

디자인 토큰

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

서피스

--bg #0b1020
--surface #121a33
--surface-warm #1b2450

텍스트

--fg #f8fafc
--fg-2 #cbd5e1
--muted #8b95aa
--meta #7d5cff

테두리

--border #26314f
--border-soft #1b2740

액센트

--accent #7132f5
--accent-on #ffffff
--accent-hover color-mix(in oklab, var(--accent), black 8%)
--accent-active color-mix(in oklab, var(--accent), black 14%)

시맨틱

--success #00c853
--warn #ffb020
--danger #ff4d6d

타이포그래피

--font-display "Inter", system-ui, sans-serif
--font-body "Inter", system-ui, sans-serif
--font-mono "Roboto Mono", "SF Mono", ui-monospace, Menlo, monospace

타입 스케일

--text-xs 11px
--text-sm 13px
--text-base 15px
--text-lg 17px
--text-xl 22px
--text-2xl 30px
--text-3xl 44px
--text-4xl 60px
--leading-body 1.48
--leading-tight 1.08
--tracking-display -0.015em

간격

--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 88px
--section-y-tablet 64px
--section-y-phone 44px

모서리 반경

--radius-sm 8px
--radius-md 12px
--radius-lg 18px
--radius-pill 9999px

엘리베이션

--elev-flat none
--elev-ring 0 0 0 1px var(--border)
--elev-raised 0 24px 70px rgba(0, 0, 0, 0.42)

포커스

--focus-ring 0 0 0 4px rgba(113, 50, 245, 0.32)

모션

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

레이아웃

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

Design System Inspired by Kraken

Category: Fintech & Crypto Crypto trading. Purple-accented dark UI, data-dense dashboards.

1. Visual Theme & Atmosphere

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, #5741d8, #5b1ecf) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.

Key Characteristics:

Kraken Purple (#7132f5) as primary brand with darker variants (#5741d8, #5b1ecf)
Kraken-Brand (display) + Kraken-Product (UI) dual font system
Near-black (#101114) text with cool blue-gray neutral scale
12px radius buttons (rounded but not pill)
Subtle shadows (rgba(0,0,0,0.03) 0px 4px 24px) — whisper-level
Green accent (#149e61) for positive/success states

2. Color Palette & Roles

Primary

Kraken Purple (#7132f5): Primary CTA, brand accent, links
Purple Dark (#5741d8): Button borders, outlined variants
Purple Deep (#5b1ecf): Deepest purple
Purple Subtle (rgba(133,91,251,0.16)): Purple at 16% — subtle button backgrounds
Near Black (#101114): Primary text

Neutral

Cool Gray (#686b82): Primary neutral, borders at 24% opacity
Silver Blue (#9497a9): Secondary text, muted elements
White (#ffffff): Primary surface
Border Gray (#dedee5): Divider borders

Semantic

Green (#149e61): Success/positive at 16% opacity for badges
Green Dark (#026b3f): Badge text

3. Typography Rules

Font Families

Display: Kraken-Brand, fallbacks: IBM Plex Sans, Helvetica, Arial
UI / Body: Kraken-Product, fallbacks: Helvetica Neue, Helvetica, Arial

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing
Display Hero	Kraken-Brand	48px	700	1.17	-1px
Section Heading	Kraken-Brand	36px	700	1.22	-0.5px
Sub-heading	Kraken-Brand	28px	700	1.29	-0.5px
Feature Title	Kraken-Product	22px	600	1.20	normal
Body	Kraken-Product	16px	400	1.38	normal
Body Medium	Kraken-Product	16px	500	1.38	normal
Button	Kraken-Product	16px	500–600	1.38	normal
Caption	Kraken-Product	14px	400–700	1.43–1.71	normal
Small	Kraken-Product	12px	400–500	1.33	normal
Micro	Kraken-Product	7px	500	1.00	uppercase

4. Component Stylings

Buttons

Primary Purple

Background: #7132f5
Text: #ffffff
Padding: 13px 16px
Radius: 12px

Purple Outlined

Background: #ffffff
Text: #5741d8
Border: 1px solid #5741d8
Radius: 12px

Purple Subtle

Background: rgba(133,91,251,0.16)
Text: #7132f5
Padding: 8px
Radius: 12px

White Button

Background: #ffffff
Text: #101114
Radius: 10px
Shadow: rgba(0,0,0,0.03) 0px 4px 24px

Secondary Gray

Background: rgba(148,151,169,0.08)
Text: #101114
Radius: 12px

Badges

Success: rgba(20,158,97,0.16) bg, #026b3f text, 6px radius
Neutral: rgba(104,107,130,0.12) bg, #484b5e text, 8px radius

5. Layout Principles

Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px

Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%

6. Depth & Elevation

Subtle: rgba(0,0,0,0.03) 0px 4px 24px
Micro: rgba(16,24,40,0.04) 0px 1px 4px

7. Do’s and Don’ts

Do

Use Kraken Purple (#7132f5) for CTAs and links
Apply 12px radius on all buttons
Use Kraken-Brand for headings, Kraken-Product for body

Don’t

Don’t use pill buttons — 12px is the max radius for buttons
Don’t use other purples outside the defined scale

8. Responsive Behavior

Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px

9. Agent Prompt Guide

Quick Color Reference

Brand: Kraken Purple (#7132f5)
Dark variant: #5741d8
Text: Near Black (#101114)
Secondary text: #9497a9
Background: White (#ffffff)

Example Component Prompts

“Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding).”