Kraken — Style Reference

> 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.

**Theme:** light

**Source website:** [https://www.kraken.com/](https://www.kraken.com/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

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

| color 1 | `#7132f5` | `--color-color-1` | color 1 role extracted from the source design |

| color 2 | `#5741d8` | `--color-color-2` | color 2 role extracted from the source design |

| color 3 | `#5b1ecf` | `--color-color-3` | color 3 role extracted from the source design |

| purple subtle | `rgba(133,91,251,0.16)` | `--color-purple-subtle` | purple subtle role extracted from the source design |

| near black | `#101114` | `--color-near-black` | near black role extracted from the source design |

| cool gray | `#686b82` | `--color-cool-gray` | cool gray role extracted from the source design |

| silver blue | `#9497a9` | `--color-silver-blue` | silver blue role extracted from the source design |

| white | `#ffffff` | `--color-white` | white role extracted from the source design |

| border gray | `#dedee5` | `--color-border-gray` | border gray role extracted from the source design |

| green | `#149e61` | `--color-green` | green role extracted from the source design |

| green dark | `#026b3f` | `--color-green-dark` | green dark role extracted from the source design |

| color 12 | `rgba(148,151,169,0.08)` | `--color-color-12` | color 12 role extracted from the source design |

| color 13 | `rgba(20,158,97,0.16)` | `--color-color-13` | color 13 role extracted from the source design |

| color 14 | `rgba(104,107,130,0.12)` | `--color-color-14` | color 14 role extracted from the source design |

| color 15 | `#484b5e` | `--color-color-15` | color 15 role extracted from the source design |

Tokens — Typography

Kraken-Brand · `--font-primary`

Kraken-Product · `--font-family-2`

Type Scale

| Role | Size | Line Height | Letter Spacing | Token |

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

| display-hero | 48px | 1.17 | -1px | `--text-display-hero` |

| section-heading | 36px | 1.22 | -0.5px | `--text-section-heading` |

| sub-heading | 28px | 1.29 | -0.5px | `--text-sub-heading` |

| feature-title | 22px | 1.20 | 0 | `--text-feature-title` |

| body | 16px | 1.38 | 0 | `--text-body` |

| body-medium | 16px | 1.38 | 0 | `--text-body-medium` |

| button | 16px | 1.38 | 0 | `--text-button` |

| caption | 14px | 1.5 | 0 | `--text-caption` |

| small | 12px | 1.33 | 0 | `--text-small` |

| micro | 7px | 1.00 | 0 | `--text-micro` |

Tokens — Spacing & Shapes

**Density:** comfortable

Spacing Scale

| Name | Value | Token |

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

| 4 | 4px | `--spacing-4` |

| 8 | 8px | `--spacing-8` |

| 12 | 12px | `--spacing-12` |

| 16 | 16px | `--spacing-16` |

| 20 | 20px | `--spacing-20` |

| 24 | 24px | `--spacing-24` |

| 48 | 48px | `--spacing-48` |

Border Radius

| Name | Value | Token |

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

| sm | 2px | `--radius-sm` |

| md | 0px | `--radius-md` |

| lg | 9px | `--radius-lg` |

| xl | 6px | `--radius-xl` |

Layout

Components

buttons

**Role:** buttons component

badges

**Role:** badges component

Do's and Don'ts

Do

Don't

Layout

Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.kraken.com/).