Kraken Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

10tokens

8type steps

1radius steps

1pxspacing base

Kraken, in one page

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

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

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Kraken design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- Kraken Purple: #7132f5
- Purple Dark: #5741d8
- Purple Deep: #5b1ecf
- Near Black: #101114
- Cool Gray: #686b82
- Silver Blue: #9497a9
- White: #ffffff
- Border Gray: #dedee5
- Green: #149e61
- Green Dark: #026b3f

Type:
- families: Kraken-Brand, Display, Kraken-Product
- scale: 7, 12, 14, 16, 22, 28, 36, 48
- weights: 400, 500, 600, 700

Shape:
- radius: 3
- elevation: Shadow: `rgba(0,0,0,0.03) 0px 4px 24px`

Spacing: 1, 8, 13

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

Avoid:
- Don't use pill buttons — 12px is the max radius for buttons
- Don't use other purples outside the defined scale

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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

Type scaleRead the full spec

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

Components and layoutRead the full spec

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

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%

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

Responsive behaviourRead the full spec

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

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-kraken {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #101114;
  --heading-color: #101114;
  --link-color: #7132f5;
  --link-hover-color: #530be9;
  --border-color: #d4d4d5;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(16,17,20,0.06);
  --card-hover-shadow: 0 6px 18px rgba(16,17,20,0.12);
  --header-bg: #101114;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #646466;
  --button-bg: #7132f5;
  --button-text-color: #ffffff;
  --button-hover-bg: #530be9;
  --button-border: none;
  --button-border-radius: 3px;
  --button-secondary-bg: #f1f1f1;
  --button-secondary-text-color: #101114;
  --button-secondary-hover-bg: #e2e2e3;
  --button-secondary-border: 1px solid #d4d4d5;
  --prompt-bg: #f3f3f3;
  --prompt-text-color: #101114;
  --base-font: var(--font-sans);
  --heading-font: var(--font-sans);
  --card-border-radius: 3px;
}

Download theme.css

Where this came from

Source document: volt/design-md/kraken/DESIGN.md · 4.2 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.