A high-end financial terminal for the digital age, balancing professional tooling with accessible retail entry.
02
Color
#7132F5Accent
#101114Ink
#686B82Ink soft
#F5F5F5BG
#E8E8EDBG soft
#F6F5F9BG quiet
#9497A9Muted
rgba(16,17,20,0.1)Line
High-contrast dark text on light backgrounds for readability, anchored by a vibrant purple primary accent for conversion elements.
03
Typography
geometric-sans · humanist-sans · monospace
display64px · 500
heading36px · 500
body18px · 400
label14px · 400
mono12px · 400
Display font is a geometric sans-serif used for high-impact headings. · Body font is a clean humanist sans-serif optimized for long-form reading. · Monospace font is used strictly for data, code, and terminal elements.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
56px
64px
72px
Consistent 4px base scale with generous padding (16px, 24px, 54px) creating a balanced, airy layout.
Centered single-column hero flowing into a 12-column grid for feature cards and stats.
07
Motion & Interaction
150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Opacity and transform transitions on hover for interactive elements. · Smooth background-color and border-color shifts for state changes. · Subtle fade-in for loading elements.
Color and background transitions (0.15s) for buttons and links. · Subtle opacity or scale reduction for tactile feedback.
08
Components
buttonRounded pill-shaped buttons with high-contrast fill (purple) or transparent with text for secondary actions.
cardRounded rectangular containers (12px radius) with subtle background fills or dark gradients for premium features.
chipSmall, rounded labels or status indicators, typically monospace or small sans-serif.
inputClean rectangular fields with a 1px border, rounded corners (8px), and clear placeholder text.
heroMassive typography centered over a clean background, followed by a prominent email capture form.
09
Voice & Don'ts
ToneProfessional, authoritative, yet empowering and accessible.
HeadlinesBold, direct statements focusing on ownership and market power.
CTAsAction-oriented and urgent (e.g., 'Try Kraken', 'Sign-up now').
Don't use a heavy drop shadow on cards — screenshot shows flat or very subtle layered backgrounds instead.
Don't use sharp, square corners — screenshot shows consistent rounding (8px to 20px) on all containers and buttons.
Don't use a chaotic, multi-color palette — screenshot shows a disciplined purple-accent scheme with neutral grays.
Don't use a cluttered layout with too many competing elements — screenshot maintains generous whitespace and clear sectioning.
Don't use decorative, script, or serif fonts for UI elements — screenshot uses clean, functional sans-serif and monospace families.
Don't use low-contrast text — screenshot maintains high legibility with dark ink on light or dark backgrounds.
Avoid: Overly casual or 'crypto-bro' slang.
Avoid: Passive or uncertain language.
Avoid: Visual clutter or neon-heavy 'gamer' aesthetics.
Avoid: Dense walls of text without clear hierarchy.
Captured from the live site · real computed styles
11
System prompt
Kraken is a premium cryptocurrency exchange platform. The design language is clean, professional, and empowering, utilizing a high-contrast palette of dark ink (#101114) on light backgrounds (#F5F5F5) with a vibrant purple accent (#7132F5) for primary actions. Typography relies on geometric and humanist sans-serifs for a modern, trustworthy feel, complemented by monospace for data-heavy interfaces. Critical constraints include maintaining generous whitespace, avoiding overly decorative elements, and ensuring all interactive components have clear, pill-shaped affordances. Do not use neon-heavy colors, sharp corners, or dense, unformatted text blocks. The system should feel like a secure, high-performance financial terminal accessible to both retail and professional traders.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
