Foursquare
foursquare.com · 1 day ago
SaveUnofficial A style guide made by SiteStyleGuide from xe.com’s public web pages. Not affiliated with or endorsed by Xe. The real site is xe.com ↗
Unofficial style guide
Xestyle guide
Xe’s website (xe.com) uses Zalando Sans for its headings and body text. Its palette is led by Deep Blue (#0533FF), Hot Pink (#F471B5) and Royal Blue (#3A72FF), with #434341 text on #FFFFFF. Captured from the live site on 21 October 2026.
- Website
- xe.com
- Typefaces
- Zalando Sans, IBM Plex Serif, IBM Plex Sans
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 21 Oct 2026 · added by @sitestyleguide
https://www.xe.com/
Screenshot
xe.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Xe: Currency Exchange Rates and International Money Transfers
- ▲ 61 / 60 characters
- Meta description
- Get the best currency exchange rates for international money transfers to 200 countries in 100 foreign currencies. Send and receive money with best forex rates.
- ● 160 / 160 characters
- Site name
- Xe
- Language
- en
- Theme colour
- #ffffff
In search results
Xehttps://www.xe.com/
Xe: Currency Exchange Rates and International Money Transfers
Get the best currency exchange rates for international money transfers to 200 countries in 100 foreign currencies. Send and receive money with best forex rates.
When shared
xe.com
Xe: Currency Exchange Rates and International Money Transfers
Get the best currency exchange rates for international money transfers to 200 countries in 100 foreign curren…
Logo & favicons
Found as: schema.org logo. JPG, 1250 × 1250.
Logo
On white
On black
On Deep Blue
Favicons
8 found-
710 px · SVG
icon
-
270 px · SVG
mask-icon
-
256 px · PNG
manifest
-
192 px · PNG
manifest
-
180 px · PNG
apple-touch-icon
-
48 px · ICO favicon.ico
-
32 px · PNG
icon
-
16 px · PNG
icon
Xe: Currency Exchange Rates and International Money Transfers
Light browser tab
Xe: Currency Exchange Rates and International Money Transfers
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 (#434341) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 39.1%
- Black 18.1%
- Deep Blue 12.9%
- Off White 9.4%
- Charcoal 4.9%
- Hot Pink 2.6%
- Royal Blue 1.9%
- Light Steel Blue 1.6%
- Fire Brick 1.6%
- Honey Dew 1.4%
- Dark Olive Green 1.2%
- Dark Red 1.2%
- Cornflower Blue 1.2%
- Corn Silk 1%
- Sea Green 1%
- Light Blue 1%
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
- 9.92:1 AAA
- On white
- —
Text, background, border · inline style on <div>, .\[\&_\:is\(h1\,h2\,h3\,h4\,h5\,h6\)\]\:text-white :is(h1,h2,h3,h4,h5,h6)
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 2.12:1 Fail
- On white
- 21.00:1 AAA
Text, background, border · .\[\&_\:is\(h1\,h2\,h3\,h4\,h5\,h6\)\]\:text-content-stays-black :is(h1,h2,h3,h4, .\[\&_h1\]\:text-black h1
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 1 1 0 6
- On text
- 8.54:1 AAA
- On white
- 1.16:1 Fail
Text, background, border · inline style on <span>, .bg-stroke-base
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 7 5 0 83
- On text
- 1.45:1 Fail
- On white
- 14.37:1 AAA
Text, background · .\[\&_h1\]\:text-gray-dark h1, .\[\&_h2\]\:text-gray-dark h2
Colours
Brand colours and accents, most used first-
Deep Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 98 80 0 0
- On text
- 1.38:1 Fail
- On white
- 7.18:1 AAA
Background, text, border · inline style on <div>, --tw-shadow-color
-
Hot Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 54 26 4
- On text
- 3.72:1 AA large
- On white
- 2.67:1 Fail
Text · inline style on <span>, --sh-class
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 77 55 0 0
- On text
- 2.38:1 Fail
- On white
- 4.17:1 AA large
Used · --atlas-stroke-info, --atlas-content-brand-default
-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 38 30 0 0
- On text
- 4.84:1 AA
- On white
- 2.05:1 Fail
Text · inline style on <span>, --sh-identifier
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 100 96 16
- On text
- 1.82:1 Fail
- On white
- 5.44:1 AA
Text, background · .bg-\[var\(--atlas-surface-danger\)\], .text-\[var\(--atlas-content-danger\)\]
-
Honey Dew
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 12 0 8 0
- On text
- 9.30:1 AAA
- On white
- 1.07:1 Fail
Background · .bg-\[var\(--atlas-surface-success-muted\)\], .bg-surface-success-muted
-
Dark Olive Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 20 100 63
- On text
- 1.19:1 Fail
- On white
- 8.33:1 AAA
Text · .text-content-warning-on-muted, --atlas-content-warning-default
-
Dark Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 93 94 43
- On text
- 1.06:1 Fail
- On white
- 9.33:1 AAA
Text, background · .text-\[\#910a09\], .text-content-danger-on-muted
-
Cornflower Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 69 49 0 0
- On text
- 2.84:1 Fail
- On white
- 3.49:1 AA large
Used · --atlas-content-brand-hover, --atlas-content-info-default
-
Corn Silk
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 3 13 0
- On text
- 9.26:1 AAA
- On white
- 1.07:1 Fail
Background · .bg-surface-warning-muted, --atlas-surface-warning-muted
-
Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 41 43
- On text
- 2.48:1 Fail
- On white
- 4.00:1 AA large
Text · .text-content-success-default, --atlas-content-success-default
-
Light Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 94 73 0 2
- On text
- 1.53:1 Fail
- On white
- 6.48:1 AA
Used · --atlas-content-brand-pressed, --atlas-content-info-default
Gradients
-
linear-gradient(initial)
-
radial-gradient(60% 60% at 50% 40%,#2540ff42,#0000 75%)
-
radial-gradient(78% 40% at 50% 30%,#0000009e 0,#00000061 42%,#0000 72%)
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.
Zalando Sans
Aa
200
Aa
900
Zalando Sans
Self-hosted · weights 200, 400, 500, 600, 900 · body, headings · shown in a stand-in if you don’t have it
Aa
300
Aa
400
IBM Plex Serif
Self-hosted · weights 300, 400 · headings · shown in a stand-in if you don’t have it
Aa
400
Aa
600
IBM Plex Sans
Self-hosted · weights 400, 500, 600 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
/ initial
weight 550
Xe
Heading 2
1.25rem · 20 px / initial
weight 550
Xe: Currency Exchange Rates and International M…
Heading 3
1.25rem · 20 px / initial
weight 550
Xe: Currency Exchange Rates and International M…
Heading 4
1rem · 16 px / initial
weight 400
Xe: Currency Exchange Rates and International M…
Heading 5
1rem · 16 px / initial
weight 400
Xe: Currency Exchange Rates and International M…
Heading 6
1rem · 16 px / initial
weight 400
Xe: Currency Exchange Rates and International M…
Paragraph
15px / 1.6
weight 400
Get the best currency exchange rates for international money transfers to 200 countries in 100 foreign currencies. Send and receive money w…
Small
14px
Get the best currency exchange rates for international money transfers to 200 countries in 100 foreign currencies. Send and receive money w…
Link
1.125rem · 18 px / initial
weight 550
Read more about Xe
Sizes in use
Most common across the site- 28px6 rules
- 20pxline initial · 12 rules
- 18pxline initial · 7 rules
- 16pxline initial · 14 rules
- 15pxline 1.5 · 12 rules
- 14pxline initial · 16 rules
- 13pxline 1 · 12 rules
- 12pxline initial · 5 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Corner radius
- 3.40282e+38px · 6×
- .5rem · 5×
- 50% · 3×
- .25rem · 3×
- 28px · 3×
Shadows
- 0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000
- 0 0 10px , 0 0 5px
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
390
576
640
768
900
1024
1280
1536
On a scale of 0 to 1536 px.
Content widths (max-width)
1280 px
1024 px
900 px
640 px
576 px
520 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 61 characters. Google usually cuts titles near 60, so the end may not show in results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Xe use?
- Xe’s website uses three typefaces: Zalando Sans (headings and body text), self-hosted; IBM Plex Serif, self-hosted; IBM Plex Sans, self-hosted.
- What are Xe’s brand colours?
- The main colours on xe.com are Deep Blue (#0533FF), Hot Pink (#F471B5), Royal Blue (#3A72FF), Light Steel Blue (#9DB2FF), Fire Brick (#D60009) and Honey Dew (#E1FFEB).
- What colour is Xe’s text and background?
- Body text is #434341 on a #FFFFFF background.
- Where is Xe’s logo from?
- The logo shown in this guide was found on xe.com’s homepage. For official logo files and usage rules, check Xe’s own brand or press page.
- Is this Xe’s official style guide?
- No. SiteStyleGuide made it from xe.com’s public web pages on 21 October 2026, and isn’t affiliated with Xe. 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
xe-com-tokens.css
/* xe.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/xe.com) */
:root {
/* Colours */
--text: #434341;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-black: #000000;
--colour-off-white: #EDEEF0;
--colour-charcoal: #292A2C;
--colour-deep-blue: #0533FF;
--colour-hot-pink: #F471B5;
--colour-royal-blue: #3A72FF;
--colour-light-steel-blue: #9DB2FF;
--colour-fire-brick: #D60009;
--colour-honey-dew: #E1FFEB;
--colour-dark-olive-green: #5F4C00;
--colour-dark-red: #910A09;
--colour-cornflower-blue: #4F83FF;
--colour-corn-silk: #FFF7DF;
--colour-sea-green: #009256;
--colour-light-blue: #0E44FB;
--gradient-1: linear-gradient(initial);
--gradient-2: radial-gradient(60% 60% at 50% 40%,#2540ff42,#0000 75%);
--gradient-3: radial-gradient(78% 40% at 50% 30%,#0000009e 0,#00000061 42%,#0000 72%);
/* Typefaces */
--font-body: 'Zalando Sans';
--font-headings: 'Zalando Sans';
--font-other: 'IBM Plex Sans', 'IBM Plex Sans Fallback';
/* Type scale */
--text-h2: 1.25rem;
--leading-h2: initial;
--text-h3: 1.25rem;
--leading-h3: initial;
--text-h4: 1rem;
--leading-h4: initial;
--text-h5: 1rem;
--leading-h5: initial;
--text-h6: 1rem;
--leading-h6: initial;
--text-p: 15px;
--leading-p: 1.6;
--text-small: 14px;
--text-a: 1.125rem;
--leading-a: initial;
/* Shape */
--radius-1: 3.40282e+38px;
--radius-2: .5rem;
--radius-3: 50%;
--radius-4: .25rem;
--radius-5: 28px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 390px;
--breakpoint-2: 576px;
--breakpoint-3: 640px;
--breakpoint-4: 768px;
--breakpoint-5: 900px;
--breakpoint-6: 1024px;
--breakpoint-7: 1280px;
--breakpoint-8: 1536px;
--max-width-1: 1280px;
--max-width-2: 1024px;
--max-width-3: 900px;
--max-width-4: 640px;
--max-width-5: 576px;
--max-width-6: 520px;
}
{
"site": "xe.com",
"source": "https://sitestyleguide.com/xe.com",
"text": "#434341",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Off White",
"hex": "#EDEEF0",
"rgb": [
237,
238,
240
]
},
{
"name": "Charcoal",
"hex": "#292A2C",
"rgb": [
41,
42,
44
]
},
{
"name": "Deep Blue",
"hex": "#0533FF",
"rgb": [
5,
51,
255
]
},
{
"name": "Hot Pink",
"hex": "#F471B5",
"rgb": [
244,
113,
181
]
},
{
"name": "Royal Blue",
"hex": "#3A72FF",
"rgb": [
58,
114,
255
]
},
{
"name": "Light Steel Blue",
"hex": "#9DB2FF",
"rgb": [
157,
178,
255
]
},
{
"name": "Fire Brick",
"hex": "#D60009",
"rgb": [
214,
0,
9
]
},
{
"name": "Honey Dew",
"hex": "#E1FFEB",
"rgb": [
225,
255,
235
]
},
{
"name": "Dark Olive Green",
"hex": "#5F4C00",
"rgb": [
95,
76,
0
]
},
{
"name": "Dark Red",
"hex": "#910A09",
"rgb": [
145,
10,
9
]
},
{
"name": "Cornflower Blue",
"hex": "#4F83FF",
"rgb": [
79,
131,
255
]
},
{
"name": "Corn Silk",
"hex": "#FFF7DF",
"rgb": [
255,
247,
223
]
},
{
"name": "Sea Green",
"hex": "#009256",
"rgb": [
0,
146,
86
]
},
{
"name": "Light Blue",
"hex": "#0E44FB",
"rgb": [
14,
68,
251
]
}
],
"fonts": [
{
"name": "Zalando Sans",
"stack": "\"Zalando Sans\"",
"weights": [
200,
400,
500,
600,
900
],
"source": "Self-hosted"
},
{
"name": "IBM Plex Serif",
"stack": "\"IBM Plex Serif\", Georgia, serif",
"weights": [
300,
400
],
"source": "Self-hosted"
},
{
"name": "IBM Plex Sans",
"stack": "IBM Plex Sans, IBM Plex Sans Fallback",
"weights": [
400,
500,
600
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run xe.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/xe.com" title="Xe style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to Xe’s
CDiscount
cdiscount.com · 4 days ago
Save
elegantthemes.com
elegantthemes.com · 4 days ago
Save
VectorStock
vectorstock.com · 3 days ago
Save
Captured from xe.com on 21 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Xe; this guide describes the public website for reference.