Online Trading with Our Award-winning Platform | Capital.com EU Design System & DESIGN.md Report

Detected Language

Design Style

gradient-rich / aurora

many gradient definitions

Palette

Colors

primary

#41A6FF

2.59 on white · 8.12 on black · 208° 100% 63%

secondary

#050202

20.67 on white · 1.02 on black · 0° 43% 1%

accent

#0580D6

4.15 on white · 5.07 on black · 205° 95% 43%

Token Roles 13 tokens

background

#FFFFFF · 21:1 vs black

surface

#F1F2F4 · 18.75:1 vs black

text-primary

#050202 · 20.67:1 vs white

text-secondary

#B5B4B4 · 10.15:1 vs black

border

#7C7A7A · 4.27:1 vs white

on-primary

#050202 · 20.67:1 vs white

on-secondary

#FFFFFF · 21:1 vs black

on-accent

#FFFFFF · 21:1 vs black

surface-container-lowest

#FFFFFF · 21:1 vs black

surface-container-low

#F4F3F3 · 18.96:1 vs black

surface-container

#F1F2F4 · 18.75:1 vs black

surface-container-high

#E9E8E8 · 17.17:1 vs black

surface-container-highest

#E8E3E3 · 16.53:1 vs black

Detected Palette 24 colors by frequency in source CSS

#050202

used 46× · 0° 43% 1%

#000000

used 40× · 0° 0% 0%

#0E0C0D

used 21× · 330° 8% 5%

#FFFFFF

used 19× · 0° 0% 100%

#B5B4B4

used 11× · 0° 1% 71%

#7C7A7A

used 11× · 0° 1% 48%

#41A6FF

used 7× · 208° 100% 63%

#0580D6

used 7× · 205° 95% 43%

#FC7A5D

used 7× · 11° 96% 68%

#E0421E

used 7× · 11° 76% 50%

#D18812

used 6× · 37° 84% 45%

#2AB641

used 6× · 130° 63% 44%

#1F1F1F

used 6× · 0° 0% 12%

#E0E0E0

used 4× · 0° 0% 88%

#333333

used 3× · 0° 0% 20%

#828282

used 3× · 0° 0% 51%

#242222

used 2× · 0° 3% 14%

#141212

used 2× · 0° 5% 7%

#4F4F4F

used 2× · 0° 0% 31%

#1C1C1C

used 2× · 0° 0% 11%

#F1F2F4

used 2× · 220° 12% 95%

#BDBDBD

used 2× · 0° 0% 74%

#565656

used 2× · 0° 0% 34%

#363636

used 2× · 0° 0% 21%

Surface Treatments

Gradients

linear-gradient(359deg,#fff6 -.43%,#fff0 91.69%)

linear-gradient(#050202 0%,#0000 10%)

linear-gradient(#050202 0%,#0000 10%),linear-gradient(#0000 80%,#050202 100%),linear-gradient(90deg,#050202 0%,#0000 10%),linear-gradient(270deg,#050202 0%,#0000 10%)

linear-gradient(#000 0%,#0000004d 100%)

linear-gradient(270deg,#050202 0%,#05020200 100%)

linear-gradient(#05020200 25.89%,#05020203 31.25%,#0502020a 35.85%,#05020294 76.65%)

Type System

Typography

display

inherit

60px · 400 · LH 1.4 · LS -1.04px

Online Trading with Our Award-winning Platform | Capital.com EU

headline-lg

inherit

42px · 400 · LH 1.4 · LS -1.04px

Online Trading with Our Award-winning Platform | Capital.com EU

headline-md

inherit

28.4px · 400 · LH 1.4 · LS -1.04px

Online Trading with Our Award-winning Platform | Capital.com EU

title-lg

inherit

22px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-md

inherit

14.2px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-sm

inherit

12px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

Detected Font Stacks

var(--font-heading)inheritvar(--font-base),sans-serifGeigyRoundFlagsvar(--font-base)

Structure

Layout

Container

Section padding: — · card padding: —

Grid

12-column reference grid · gap —

Spacing Scale

xs

6px

sm

8px

lg

46px

xl

70px

detected

1px

detected

6px

detected

8px

detected

8.15px

detected

10px

detected

14px

detected

46px

detected

48px

detected

49px

detected

52px

Breakpoints

767px768px1023px1024px1199px1200px1440px

Geometry

Shapes

lg

48px

pill

50%

Tokens in Context

Components

card

background{colors.surface}

border1px solid {colors.border}

radius48px

boxShadow{elevation.md}

button-primary

background{colors.primary}

radius50%

Animation

Motion

Keyframes 18 found

@keyframes skeleton

0%{opacity:1}50%{opacity:.6}to{opacity:1}

@keyframes lF8OT

0%{opacity:1}50%{opacity:.6}to{opacity:1}

@keyframes Oje6L

0%{opacity:1}50%{opacity:.6}to{opacity:1}

@keyframes lUZDw

0%{opacity:1}50%{opacity:.6}to{opacity:1}

@keyframes PO2pT

0%{opacity:1}50%{opacity:.6}to{opacity:1}

@keyframes svCnj

0%{opacity:1}50%{opacity:.6}to{opacity:1}

@keyframes i3SjC

0%{opacity:1}50%{opacity:.6}to{opacity:1}

@keyframes RWpq3

0%{opacity:1}50%{opacity:.6}to{opacity:1}

@keyframes LtXy9

0%{opacity:1}50%{opacity:.6}to{opacity:1}

Applied Animations

85s linear infinite xsYIenone85s linear infinite c2eUK1s linear infinite csQU5

Easing Curves

cubic-bezier(.22,1,.36,1)

Transitions

transform .2s ease-out,filter .2s ease-outall .2s ease-outbackground .2s ease-out,color .2s ease-out,box-shadow .2s ease-outopacity .3stransform .3s ease-outopacity .3s ease-outbackground var(--transition-speed) easetransform .3s

Proof

Live Preview

Complete Reference

Full design.md Specification

Design Specification — Online Trading with Our Award-winning Platform | Capital.com EU

Field	Value
Site / Project	https://capital.com/en-eu
Analyzed on	2026-09-02
Analysis mode	Automated code extraction (no AI)

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#050202), a vivid accent (#0580D6). All type is set in var(--font-heading). Detected font weights: 400, 600. Detected style signatures: gradient-rich / aurora.

Logo asset(s): https://static.capital.com/favicon-v2/apple-icon-57x57.png

Color System

Detected palette (by frequency)

Hex	RGB	HSL	Count
`#050202`	5, 2, 2	0° 43% 1%	46
`#000000`	0, 0, 0	0° 0% 0%	40
`#0E0C0D`	14, 12, 13	330° 8% 5%	21
`#FFFFFF`	255, 255, 255	0° 0% 100%	19
`#B5B4B4`	181, 180, 180	0° 1% 71%	11
`#7C7A7A`	124, 122, 122	0° 1% 48%	11
`#41A6FF`	65, 166, 255	208° 100% 63%	7
`#0580D6`	5, 128, 214	205° 95% 43%	7
`#FC7A5D`	252, 122, 93	11° 96% 68%	7
`#E0421E`	224, 66, 30	11° 76% 50%	7
`#D18812`	209, 136, 18	37° 84% 45%	6
`#2AB641`	42, 182, 65	130° 63% 44%	6
`#1F1F1F`	31, 31, 31	0° 0% 12%	6
`#E0E0E0`	224, 224, 224	0° 0% 88%	4
`#333333`	51, 51, 51	0° 0% 20%	3
`#828282`	130, 130, 130	0° 0% 51%	3
`#242222`	36, 34, 34	0° 3% 14%	2
`#141212`	20, 18, 18	0° 5% 7%	2
`#4F4F4F`	79, 79, 79	0° 0% 31%	2
`#1C1C1C`	28, 28, 28	0° 0% 11%	2

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Token	Hex	RGB	HSL
`--color-primary`	`#41A6FF`	65, 166, 255	208° 100% 63%
`--color-accent`	`#0580D6`	5, 128, 214	205° 95% 43%
`--color-background`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-surface`	`#F1F2F4`	241, 242, 244	220° 12% 95%
`--color-text-primary`	`#050202`	5, 2, 2	0° 43% 1%
`--color-secondary`	`#050202`	5, 2, 2	0° 43% 1%
`--color-text-secondary`	`#B5B4B4`	181, 180, 180	0° 1% 71%
`--color-border`	`#7C7A7A`	124, 122, 122	0° 1% 48%
`--color-on-primary`	`#050202`	5, 2, 2	0° 43% 1%
`--color-on-secondary`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-on-accent`	`#FFFFFF`	255, 255, 255	0° 0% 100%

Surface ramp (derived from detected light neutrals)

Token	Hex
`--color-surface-container-lowest`	`#FFFFFF`
`--color-surface-container-low`	`#F4F3F3`
`--color-surface-container`	`#F1F2F4`
`--color-surface-container-high`	`#E9E8E8`
`--color-surface-container-highest`	`#E8E3E3`

Gradients

linear-gradient(180deg, #ffffff7a 0%, #ffffff2e 33.33%, #ffffff17 66.66%, #fff0 100%)
linear-gradient( 0 0) content-box,linear-gradient( 0 0)
linear-gradient(359deg,#fff6 -.43%,#fff0 91.69%)
linear-gradient(#050202 0%,#0000 10%)
linear-gradient(#050202 0%,#0000 10%),linear-gradient(#0000 80%,#050202 100%),linear-gradient(90deg,#050202 0%,#0000 10%),linear-gradient(270deg,#050202 0%,#0000 10%)
linear-gradient(#000 0%,#0000004d 100%)
linear-gradient(270deg,#050202 0%,#05020200 100%)
linear-gradient(#05020200 25.89%,#05020203 31.25%,#0502020a 35.85%,#05020294 76.65%)
linear-gradient(#0000 0%,#000 25% 25%,#0000 100%)
linear-gradient(to bottom, 20%, #05020299 45%, #05020233 75%, #05020200 100%),linear-gradient(to top, 20%, #05020299 45%, #05020233 75%, #05020200 100%)

> 9 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--font-heading) — stack: var(--font-heading)

Font stacks (most used first)

var(--font-heading)
inherit
var(--font-base),sans-serif
Geigy
RoundFlags
var(--font-base)

Derived type scale

Token	Size
display	60px
headline-lg	42px
headline-md	28.4px
title-lg	22px
label-md	14.2px
label-sm	12px

Font sizes (by frequency)

Size	Count
14.15px	7
13px	2
20px	2
12px	1
14px	1
42px	1
22px	1
26px	1
60px	1
28.35px	1
19.85px	1

Weights in use: 400, 600

Line heights (by frequency)

Value	Count
20px	9
32px	3
16px	2
18px	2
0	1
14px	1
24px	1

Letter spacing (by frequency)

Value	Count
-1.04px	2
-.177px	2
-.72px	1
-.84px	1
-.5px	1
-.52px	1
-.64px	1
-1.2px	1

Spacing

Derived spacing scale

Token	Value
xs	6px
sm	8px
lg	46px
xl	70px

Raw values (by frequency)

Value	Count
6px	3
120px	2
104px	2
48px	2
70px	2
10px	2
1px	1
0px	1
52px	1
49px	1
8px	1
46px	1
14px	1
8.15px	1

Borders & Radius

Derived radius tokens

Token	Value
lg	`48px`
pill	`50%`

Raw values (resolved, by frequency)

Radius	Count
`50%`	9
`inherit`	1
`48px`	1

Shadows

Derived elevation

Token	Value
md	`0 0 0 1px ,0 0 0 4px`

All detected shadows

0 0 0 1px ,0 0 0 4px
inset 0 0 0 2px

Layout

Container max-width: 1199px

Grid columns (largest detected grid): 4

Breakpoints

767px
768px
1023px
1024px
1199px
1200px
1440px

Animation & Motion

Transitions

transform .2s ease-out,filter .2s ease-out
all .2s ease-out
background .2s ease-out,color .2s ease-out,box-shadow .2s ease-out
opacity .3s
transform .3s ease-out
opacity .3s ease-out
background ease
transform .3s
background-color 5000s ease-in-out
opacity .2s ease-out
transform 1.55s cubic-bezier(.22,1,.36,1)
color .3s

Easing curves

cubic-bezier(.22,1,.36,1)

Keyframes

@keyframes skeleton { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes lF8OT { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes Oje6L { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes lUZDw { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes PO2pT { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes svCnj { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes i3SjC { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes RWpq3 { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes LtXy9 { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes c5rUS { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes BHJy1 { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes cy3yh { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes z4lrC { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes c5hZG { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes JA02I { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes ZqYbu { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes mLN46 { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }
@keyframes BMD3J { 0%{opacity:1}50%{opacity:.6}to{opacity:1} }

Animations

85s linear infinite xsYIe
none
85s linear infinite c2eUK
1s linear infinite csQU5

CTA labels found on page

Open an account

Effects

backdrop-filter: blur(4.5px)
backdrop-filter: blur(10px)
backdrop-filter: blur(86.9px)
backdrop-filter: blur(4.55px)
backdrop-filter: blur(3px)
backdrop-filter: blur(2px)
backdrop-filter: blur()

Source Design Tokens (CSS custom properties)

:root {
  --colour-colors-alpha-amber-light-1: #d1881214;
  --colour-colors-alpha-amber-light-2: #d188121f;
  --colour-colors-alpha-amber-light-3: #d188122e;
  --colour-colors-alpha-amber-light-4: #d1881242;
  --colour-colors-alpha-amber-light-5: #d188125c;
  --colour-colors-alpha-blue-dark-0: #41a6ff00;
  --colour-colors-alpha-blue-dark-1: #41a6ff14;
  --colour-colors-alpha-blue-dark-2: #41a6ff1f;
  --colour-colors-alpha-blue-dark-3: #41a6ff2e;
  --colour-colors-alpha-blue-dark-4: #41a6ff42;
  --colour-colors-alpha-blue-dark-5: #41a6ff5c;
  --colour-colors-alpha-blue-light-0: #0580d600;
  --colour-colors-alpha-blue-light-1: #0580d614;
  --colour-colors-alpha-blue-light-2: #0580d61f;
  --colour-colors-alpha-blue-light-3: #0580d62e;
  --colour-colors-alpha-blue-light-4: #0580d642;
  --colour-colors-alpha-blue-light-5: #0580d65c;
  --colour-colors-alpha-dark-0: #05020200;
  --colour-colors-alpha-dark-1: #0502020a;
  --colour-colors-alpha-dark-2: #05020217;
  --colour-colors-alpha-dark-3: #0502021f;
  --colour-colors-alpha-dark-4: #0502022e;
  --colour-colors-alpha-dark-5: #05020242;
  --colour-colors-alpha-dark-6: #0502025c;
  --colour-colors-alpha-dark-7: #0502027a;
  --colour-colors-alpha-dark-8: #05020299;
  --colour-colors-alpha-dark-9: #050202b2;
  --colour-colors-alpha-dark-10: #050202e5;
  --colour-colors-alpha-dark-11: #050202f7;
  --colour-colors-alpha-dark-12: #050202;
  --colour-colors-alpha-green-1: #2ab64114;
  --colour-colors-alpha-green-2: #2ab6411f;
  --colour-colors-alpha-green-3: #2ab6412e;
  --colour-colors-alpha-green-4: #2ab64142;
  --colour-colors-alpha-green-5: #2ab6415c;
  --colour-colors-alpha-grey-dark-0: #b5b4b400;
  --colour-colors-alpha-grey-dark-1: #b5b4b414;
  --colour-colors-alpha-grey-dark-2: #b5b4b424;
  --colour-colors-alpha-grey-dark-3: #b5b4b433;
  --colour-colors-alpha-grey-dark-4: #b5b4b43d;
  --colour-colors-alpha-grey-dark-5: #b5b4b447;
  --colour-colors-alpha-grey-dark-6: #b5b4b452;
  --colour-colors-alpha-grey-dark-7: #b5b4b45c;
  --colour-colors-alpha-grey-dark-8: #b5b4b466;
  --colour-colors-alpha-grey-dark-9: #b5b4b470;
  --colour-colors-alpha-grey-dark-10: #b5b4b47a;
  --colour-colors-alpha-grey-light-0: #7c7a7a00;
  --colour-colors-alpha-grey-light-1: #7c7a7a14;
  --colour-colors-alpha-grey-light-2: #7c7a7a21;
  --colour-colors-alpha-grey-light-3: #7c7a7a29;
  --colour-colors-alpha-grey-light-4: #7c7a7a2e;
  --colour-colors-alpha-grey-light-5: #7c7a7a38;
  --colour-colors-alpha-grey-light-6: #7c7a7a3d;
  --colour-colors-alpha-grey-light-7: #7c7a7a45;
  --colour-colors-alpha-grey-light-8: #7c7a7a4a;
  --colour-colors-alpha-grey-light-9: #7c7a7a52;
  --colour-colors-alpha-grey-light-10: #7c7a7a57;
  --colour-colors-alpha-grey-medium-1: #1f1f1f1a;
  --colour-colors-alpha-grey-medium-2: #1f1f1f33;
  --colour-colors-alpha-grey-medium-3: #1f1f1f66;
}

Do's and Don'ts

Do

Do reserve the accent #0580D6 for interactive highlights and key moments — it is used sparingly on the source page.
Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
Do stick to the detected font weight(s): 400, 600.

Don't

Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #41A6FF;
  --color-accent: #0580D6;
  --color-background: #FFFFFF;
  --color-surface: #F1F2F4;
  --color-text-primary: #050202;
  --color-secondary: #050202;
  --color-text-secondary: #B5B4B4;
  --color-border: #7C7A7A;
  --color-on-primary: #050202;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F4F3F3;
  --color-surface-container: #F1F2F4;
  --color-surface-container-high: #E9E8E8;
  --color-surface-container-highest: #E8E3E3;
  --font-sans: var(--font-heading);
  --font-size-display: 60px;
  --font-size-headline-lg: 42px;
  --font-size-headline-md: 28.4px;
  --font-size-title-lg: 22px;
  --font-size-label-md: 14.2px;
  --font-size-label-sm: 12px;
  --radius-lg: 48px;
  --radius-pill: 50%;
  --shadow-md: 0 0 0 1px ,0 0 0 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-lg: 46px;
  --space-xl: 70px;
  --tracking-display: -1.04px;
  --container-max: 1199px;
}