What font does Kraken use?

Kraken’s website uses four typefaces: Kraken-Product (headings and body text), self-hosted; Söhne, self-hosted; IBM Plex Sans, self-hosted; Kraken-Brand, self-hosted.

What are Kraken’s brand colours?

The main colours on kraken.com are Blue Violet (#7132F5), Slate Grey (#686B82), Light Slate Grey (#9497A9), Crimson (#D11D45), Medium Slate Blue (#8A61FF) and Red (#FF3B29).

What colour is Kraken’s text and background?

Body text is #101114 on a #FFFFFF background.

Where is Kraken’s logo from?

The logo shown in this guide was found on kraken.com’s homepage. For official logo files and usage rules, check Kraken’s own brand or press page.

Is this Kraken’s official style guide?

No. SiteStyleGuide made it from kraken.com’s public web pages on 23 October 2026, and isn’t affiliated with Kraken. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from kraken.com’s public web pages. Not affiliated with or endorsed by Kraken. The real site is kraken.com ↗

Unofficial style guide

Krakenstyle guide

Kraken’s website (kraken.com) uses Kraken-Product for its headings and body text. Its palette is led by Blue Violet (#7132F5), Slate Grey (#686B82) and Light Slate Grey (#9497A9), with #101114 text on #FFFFFF. Captured from the live site on 23 October 2026.

Website: kraken.com
Typefaces: Kraken-Product, Söhne, IBM Plex Sans
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 23 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the kraken.com homepage on a desktop screen — Screenshot of kraken.com on a 1440 px desktop screen, 23 Oct 2026.

Screenshot of the kraken.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Kraken | Own the Power of Your Money — Crypto, Stocks & more; ● 60 / 60 characters
Meta description: Own the power of your money with Kraken. Trade crypto, stocks, futures, staking and more. Trusted by millions worldwide since 2011. Get started today.; ● 150 / 160 characters
Site name: Kraken
og:title: Kraken | Own the Power of Your Money — Crypto, Stocks & more
og:description: Own the power of your money with Kraken. Trade crypto, stocks, futures, staking and more. Trusted by millions worldwide since 2011. Get started today.
Language: en

In search results

Krakenhttps://www.kraken.com/

Kraken | Own the Power of Your Money — Crypto, Stocks & more

Own the power of your money with Kraken. Trade crypto, stocks, futures, staking and more. Trusted by millions worldwide since 2011. Get started today.

When shared

kraken.com

Kraken | Own the Power of Your Money — Crypto, Stocks & more

Own the power of your money with Kraken. Trade crypto, stocks, futures, staking and more. Trusted by millions…

Logo & favicons

Found as: schema.org logo. JPG, 900 × 900.

Logo

On white

On black

On Blue Violet

Favicons

5 found

360 px · PNG apple-touch-icon
120 px · SVG icon
48 px · ICO shortcut icon
48 px · ICO favicon.ico
16 px · PNG icon

Kraken | Own the Power of Your Money — Crypto, Stocks & more

Light browser tab

Kraken | Own the Power of Your Money — Crypto, Stocks & more

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#101114) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 30.6%
Near Black 17.8%
Blue Violet 10.3%
Slate Grey 5.9%
Light Slate Grey 5.5%
Grey 5%
Crimson 4.5%
Black 3.9%
Medium Slate Blue 3%
Red 2.5%
Light Sea Green 2.2%
Light Coral 2%
Steel Blue 1.8%
Teal 1.7%
Medium Purple 1.7%
Sea Green 1.5%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
18.88:1 AAA

On white
—

Background, text, graphic · inline style on <span>, --surface-glass-fg-inverse
Near Black

HEX

RGB

HSL

OKLCH

CMYK
20 15 0 92

On text
—

On white
18.88:1 AAA

Text, background, border · --surface-glass-fg, --surface-glass-fg-inverse
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 38

On text
7.05:1 AAA

On white
2.68:1 Fail

Text, background, border · --text-color-ds-radio-description, --text-color-ds-tabs-on-background
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.11:1 Fail

On white
21.00:1 AAA

Text, background, border · inline style on <div>, --text-color-ds-radio-primary

Colours

Brand colours and accents, most used first

Blue Violet

HEX

RGB

HSL

OKLCH

CMYK
54 80 0 4

On text
3.13:1 AA large

On white
6.04:1 AA

Text, background, border · --background-color-ds-button-brand-high, --background-color-ds-circle-primary-high
Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
20 18 0 49

On text
3.61:1 AA large

On white
5.23:1 AA

Text, background, graphic · --surface-glass-muted-fg, --background-color-ds-badge-neutral-high
Light Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
12 11 0 34

On text
6.53:1 AA

On white
2.89:1 Fail

Text, background, border · .text-theme-set-payward .bg-wrapper h3, --text-color-ds-text-duo-neutral-duo
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 86 67 18

On text
3.57:1 AA large

On white
5.29:1 AA

Text, background, border · --background-color-ds-badge-negative-high, --background-color-ds-button-negative-high
Medium Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
46 62 0 0

On text
4.71:1 AA

On white
4.01:1 AA large

Background, text, border · --background-color-ds-button-primary-high-hover, --background-color-ds-button-primary-high-active
Red

HEX

RGB

HSL

OKLCH

CMYK
0 77 84 0

On text
5.31:1 AA

On white
3.55:1 AA large

Background, border · --colors-ds-semantic-action-primary-background, --colors-ds-semantic-content-brand
Light Sea Green

HEX

RGB

HSL

OKLCH

CMYK
78 0 11 27

On text
7.79:1 AAA

On white
2.42:1 Fail

Used · --colors-ds-semantic-action-primary-background, --colors-ds-semantic-status-brand-solid
Light Coral

HEX

RGB

HSL

OKLCH

CMYK
0 55 47 0

On text
7.24:1 AAA

On white
2.61:1 Fail

Background, text · --background-color-ds-progressbar-negative-indicator, --background-color-ds-slider-value-track-negative
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 33 0 29

On text
3.95:1 AA large

On white
4.78:1 AA

Text, background, graphic · --colors-ds-info, --background-color-ds-badge-info-high
Teal

HEX

RGB

HSL

OKLCH

CMYK
93 0 12 56

On text
3.15:1 AA large

On white
5.99:1 AA

Used · --colors-ds-semantic-content-brand, --colors-ds-semantic-focus-ring
Medium Purple

HEX

RGB

HSL

OKLCH

CMYK
38 49 0 0

On text
6.35:1 AA

On white
2.98:1 Fail

Background · --text-color-ds-circle-primary-low, --background-color-ds-slider-value-track-primary
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
94 0 40 48

On text
3.98:1 AA large

On white
4.75:1 AA

Text, graphic, background · --colors-ds-positive, --text-color-ds-button-positive-medium

Gradients

linear-gradient(#686b820a,#686b820a)
linear-gradient(to bottom right,#fff,color-mix(in srgb,#fff65%,#a78bfa))
linear-gradient(#855bfb1f,#855bfb1f)

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Kraken-Product

Aa 400 Aa 700

Kraken-Product

Self-hosted · weights 400, 500, 600, 700 · body, headings · shown in a stand-in if you don’t have it

Aa 300 Aa 600

Söhne

Self-hosted · weights 300, 600 · headings · shown in a stand-in if you don’t have it

Aa 100 Aa 700

IBM Plex Sans

Self-hosted · weights 100, 200, 300, 400, 500, 600, 700 · shown in a stand-in if you don’t have it

Aa 300 Aa 950

Kraken-Brand

Self-hosted · weights 300, 400, 500, 700, 900, 950 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Body 14px / 24px Kraken-Product

Own the power of your money with Kraken. Trade crypto, stocks, futures, staking and more. Trusted by millions worldwide since 2011. Get sta…

Paragraph 100%

Own the power of your money with Kraken. Trade crypto, stocks, futures, staking and more. Trusted by millions worldwide since 2011. Get sta…

Small 100%

Own the power of your money with Kraken. Trade crypto, stocks, futures, staking and more. Trusted by millions worldwide since 2011. Get sta…

Button / weight · none

Get started

Link 100%

Sizes in use

Most common across the site

24pxline 32px · 7 rules
20pxline 1.75rem · 4 rules
18pxline 1.625rem · 6 rules
16pxline 1.375rem · 8 rules
14pxline 1.25rem · 17 rules
12pxline 1rem · 13 rules
11px3 rules
10pxline .875rem · 4 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.\[\&_button\]\:bg-\[rgba$235\,234\,239\,1$\] button · #EBEAEF

Corner radius

12px · 32×
8px · 19×
20px · 8×
.5rem · 7×
4px · 7×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000
0 12px 16px -4px #1018280f
0 34px 14px #00000003,0 19px 12px #00000008,0 9px 9px #0000000d,0 2px 5px #0000000d,0 0 #0000000f

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

450

639

640

767

768

769

1024

1536

On a scale of 0 to 1536 px.

Content widths (max-width)

1536 px

1024 px

720 px

640 px

350 px

320 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 60 characters, short enough to show in full in search results.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Kraken use?: Kraken’s website uses four typefaces: Kraken-Product (headings and body text), self-hosted; Söhne, self-hosted; IBM Plex Sans, self-hosted; Kraken-Brand, self-hosted.
What are Kraken’s brand colours?: The main colours on kraken.com are Blue Violet (#7132F5), Slate Grey (#686B82), Light Slate Grey (#9497A9), Crimson (#D11D45), Medium Slate Blue (#8A61FF) and Red (#FF3B29).
What colour is Kraken’s text and background?: Body text is #101114 on a #FFFFFF background.
Where is Kraken’s logo from?: The logo shown in this guide was found on kraken.com’s homepage. For official logo files and usage rules, check Kraken’s own brand or press page.
Is this Kraken’s official style guide?: No. SiteStyleGuide made it from kraken.com’s public web pages on 23 October 2026, and isn’t affiliated with Kraken. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

kraken-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* kraken.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/kraken.com) */
:root {
  /* Colours */
  --text: #101114;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #101114;
  --colour-grey: #9E9E9E;
  --colour-black: #000000;
  --colour-blue-violet: #7132F5;
  --colour-slate-grey: #686B82;
  --colour-light-slate-grey: #9497A9;
  --colour-crimson: #D11D45;
  --colour-medium-slate-blue: #8A61FF;
  --colour-red: #FF3B29;
  --colour-light-sea-green: #29BAA6;
  --colour-light-coral: #FF7386;
  --colour-steel-blue: #0079B4;
  --colour-teal: #087063;
  --colour-medium-purple: #9D82FE;
  --colour-sea-green: #08844F;
  --gradient-1: linear-gradient(#686b820a,#686b820a);
  --gradient-2: linear-gradient(to bottom right,#fff,color-mix(in srgb,#fff65%,#a78bfa));
  --gradient-3: linear-gradient(#855bfb1f,#855bfb1f);

  /* Typefaces */
  --font-body: 'Kraken-Product', 'IBM Plex Sans', 'Helvetica', 'Arial', sans-serif;
  --font-headings: 'Kraken-Product', 'IBM Plex Sans', 'Helvetica', 'Arial', sans-serif;
  --font-other: 'IBM Plex Sans';

  /* Type scale */
  --text-body: 14px;
  --leading-body: 24px;
  --text-p: 100%;
  --text-small: 100%;
  --text-a: 100%;

  /* Shape */
  --radius-1: 12px;
  --radius-2: 8px;
  --radius-3: 20px;
  --radius-4: .5rem;
  --radius-5: 4px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 450px;
  --breakpoint-2: 639px;
  --breakpoint-3: 640px;
  --breakpoint-4: 767px;
  --breakpoint-5: 768px;
  --breakpoint-6: 769px;
  --breakpoint-7: 1024px;
  --breakpoint-8: 1536px;
  --max-width-1: 1536px;
  --max-width-2: 1024px;
  --max-width-3: 720px;
  --max-width-4: 640px;
  --max-width-5: 350px;
  --max-width-6: 320px;
}

{
    "site": "kraken.com",
    "source": "https://sitestyleguide.com/kraken.com",
    "text": "#101114",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#101114",
            "rgb": [
                16,
                17,
                20
            ]
        },
        {
            "name": "Grey",
            "hex": "#9E9E9E",
            "rgb": [
                158,
                158,
                158
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Blue Violet",
            "hex": "#7132F5",
            "rgb": [
                113,
                50,
                245
            ]
        },
        {
            "name": "Slate Grey",
            "hex": "#686B82",
            "rgb": [
                104,
                107,
                130
            ]
        },
        {
            "name": "Light Slate Grey",
            "hex": "#9497A9",
            "rgb": [
                148,
                151,
                169
            ]
        },
        {
            "name": "Crimson",
            "hex": "#D11D45",
            "rgb": [
                209,
                29,
                69
            ]
        },
        {
            "name": "Medium Slate Blue",
            "hex": "#8A61FF",
            "rgb": [
                138,
                97,
                255
            ]
        },
        {
            "name": "Red",
            "hex": "#FF3B29",
            "rgb": [
                255,
                59,
                41
            ]
        },
        {
            "name": "Light Sea Green",
            "hex": "#29BAA6",
            "rgb": [
                41,
                186,
                166
            ]
        },
        {
            "name": "Light Coral",
            "hex": "#FF7386",
            "rgb": [
                255,
                115,
                134
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#0079B4",
            "rgb": [
                0,
                121,
                180
            ]
        },
        {
            "name": "Teal",
            "hex": "#087063",
            "rgb": [
                8,
                112,
                99
            ]
        },
        {
            "name": "Medium Purple",
            "hex": "#9D82FE",
            "rgb": [
                157,
                130,
                254
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#08844F",
            "rgb": [
                8,
                132,
                79
            ]
        }
    ],
    "fonts": [
        {
            "name": "Kraken-Product",
            "stack": "Kraken-Product, IBM Plex Sans, Helvetica, Arial, sans-serif",
            "weights": [
                400,
                500,
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Söhne",
            "stack": "Söhne, \"IBM Plex Sans\", Helvetica, Arial, sans-serif",
            "weights": [
                300,
                600
            ],
            "source": "Self-hosted"
        },
        {
            "name": "IBM Plex Sans",
            "stack": "IBM Plex Sans",
            "weights": [
                100,
                200,
                300,
                400,
                500,
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Kraken-Brand",
            "stack": "Kraken-Brand, \"IBM Plex Sans\", Helvetica, Arial, sans-serif",
            "weights": [
                300,
                400,
                500,
                700,
                900,
                950
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Financier Display",
            "stack": "Financier Display, Kraken-Brand, Helvetica Neue, Helvetica, Arial, serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Noto Sans Vietnamese",
            "stack": "Noto Sans Vietnamese, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Websites whose lead colour is closest to Kraken’s

Yahoo!

geocities.com · 2 days ago
Save
gettyimages.it

gettyimages.it · 4 days ago
Save
gettyimages.es

gettyimages.es · 5 days ago
Save
CDiscount

cdiscount.com · 4 days ago
Save

Captured from kraken.com on 23 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Kraken; this guide describes the public website for reference.

Krakenstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Grey

Black

Colours

Blue Violet

Slate Grey

Light Slate Grey

Crimson

Medium Slate Blue

Red

Light Sea Green

Light Coral

Steel Blue

Teal

Medium Purple

Sea Green

Gradients

Kraken-Product

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run kraken.com?

Similar colours

Yahoo!

gettyimages.it

gettyimages.es

CDiscount

Title &
description