BILD
bild.de · set in Gotham
SaveUnofficial A style guide made by SiteStyleGuide from wimbledon.com’s public web pages. Not affiliated with or endorsed by The Championships, Wimbledon. The real site is wimbledon.com ↗
Unofficial style guide
The Championships, Wimbledonstyle guide
The Championships, Wimbledon’s website (wimbledon.com) sets its headings in Gotham and its body text in IBM Plex Sans. Its palette is led by Light Green (#006633), Indigo (#540082) and Dark Slate Grey (#00331A), with #171717 text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- wimbledon.com
- Typefaces
- Gotham, ACaslonPro, IBM Plex Sans
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://www.wimbledon.com/
Screenshot
wimbledon.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
- The Championships, Wimbledon - Official Website by IBM
- ● 54 / 60 characters
- Meta description
- The home of The Championships, Wimbledon, with the latest tennis news, highlights, exclusive content, scores, draws and ticket information.
- ● 139 / 160 characters
- og:title
- The Championships, Wimbledon - Official Website by IBM
- og:description
- The home of The Championships, Wimbledon, with the latest tennis news, highlights, exclusive content, scores, draws and ticket information.
- Language
- en
In search results
The Championships, Wimbledonhttps://www.wimbledon.com/
The Championships, Wimbledon - Official Website by IBM
The home of The Championships, Wimbledon, with the latest tennis news, highlights, exclusive content, scores, draws and ticket information.
When shared
No og:image, so no picture
wimbledon.com
The Championships, Wimbledon - Official Website by IBM
The home of The Championships, Wimbledon, with the latest tennis news, highlights, exclusive content, scores,…
Logo & favicons
No logo could be found on the homepage.
Logo
Favicons
1 found-
The Championships, Wimbledon - Official Website by IBM
Light browser tab
The Championships, Wimbledon - Official Website by IBM
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 (#171717) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 25.3%
- Cool Off White 12.4%
- Light Green 11.9%
- Cool Near Black 9.8%
- Cool Dark Grey 6%
- Indigo 5.8%
- Dark Slate Grey 4.5%
- Deep Green 4%
- Crimson 3.9%
- Royal Blue 2.9%
- Olive 2.6%
- Midnight Blue 2.4%
- Blue 2.3%
- Honey Dew 2.1%
- Yellow 2.1%
- Gold 2.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
- 17.93:1 AAA
- On white
- —
Text, background, border · .wdl-bg-white, .wdl-field
-
Cool Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 5 3 0 5
- On text
- 14.70:1 AAA
- On white
- 1.22:1 Fail
Background, border, text · .wdl-button-secondary, .wdl-field:disabled
-
Cool Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 28 12 0 90
- On text
- 1.01:1 Fail
- On white
- 18.19:1 AAA
Text, graphic, background · .wdl-text-primary, .wdl-icon-primary
-
Cool Dark Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 12 6 0 53
- On text
- 3.57:1 AA large
- On white
- 5.02:1 AA
Text, background · .wdl-text-secondary, .wdl-text-placeholder
Colours
Brand colours and accents, most used first-
Light Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 50 60
- On text
- 2.52:1 Fail
- On white
- 7.12:1 AAA
Text, background, border · .wdl-button-tertiary, .wdl-bg-brand-01
-
Indigo
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 35 100 0 49
- On text
- 1.45:1 Fail
- On white
- 12.36:1 AAA
Text, background, border · .wdl-bg-brand-02, .wdl-brand-tag-purple.wdl-brand-tag-purple-inverse
-
Dark Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 49 80
- On text
- 1.27:1 Fail
- On white
- 14.11:1 AAA
Background, border, text · .wdl-bg-inverse-01-hover, .wdl-notification-brand-inverse
-
Deep Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 49 67
- On text
- 1.99:1 Fail
- On white
- 9.00:1 AAA
Text, border, background · --wdl-layer-inverse-03, --wdl-layer-inverse-hover-02
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 86 82 15
- On text
- 3.58:1 AA large
- On white
- 5.00:1 AA
Text, background, graphic · .wdl-button-danger, .wdl-text-error
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 94 61 0 0
- On text
- 3.58:1 AA large
- On white
- 5.00:1 AA
Border, background, text · --wdl-focus, --wdl-support-info-inverse
-
Olive
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 16 53 49
- On text
- 3.54:1 AA large
- On white
- 5.07:1 AA
Background, text · .wdl-bg-brand-03, .wdl-brand-tag-gold.wdl-brand-tag-gold-inverse
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 25 94 0 81
- On text
- 1.04:1 Fail
- On white
- 18.57:1 AAA
Background, border · .wdl-bg-inverse-02, .wdl-brand-tag-petunia-inverse
-
Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 67 0 19
- On text
- 2.30:1 Fail
- On white
- 7.79:1 AAA
Text, graphic, background · .wdl-support-info, .wdl-support-tag-blue
-
Honey Dew
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 12 0 7 6
- On text
- 14.78:1 AAA
- On white
- 1.21:1 Fail
Background · .wdl-brand-tag-green, .wdl-notification-success
-
Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 5 0 100 0
- On text
- 16.32:1 AAA
- On white
- 1.10:1 Fail
Text, border · .wdl-text-highlight, .wdl-icon-interactive-on-colour
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 20 89 5
- On text
- 10.65:1 AAA
- On white
- 1.68:1 Fail
Text, graphic, background · .wdl-support-warning, --wdl-support-warning
Gradients
-
linear-gradient(0deg, #4589ff29 0%, 15%, #fff0 50%, transparent 100%)
-
linear-gradient(to right, #4589ff29 0%, #fff0 50%, transparent 50%)
-
linear-gradient(to top, #4589ff52 0%, 15%, #fff0 50%) padding-box,linear-gradient(to top, #edf5ff, #edf5ff) padding-box,linear-gradient(to bottom, #a6c8ffa3, #78a9ff) border-box,linear-gradient(to top, #edf5ff, #edf5ff)
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.
Gotham
Aa
400
Aa
700
Gotham
Self-hosted · weights 400, 500, 700 · headings, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
700
ACaslonPro
Self-hosted · weights 400, 700 · headings · shown in a stand-in if you don’t have it
Aa
300
Aa
700
IBM Plex Sans
Self-hosted · weights 300, 400, 500, 600, 700 · body · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
2.625rem · 42 px / 1.199
weight 300
The Championships, Wimbledon
Heading 2
2rem · 32 px / 1.25
weight 400
The Championships, Wimbledon - Official Website…
Heading 3
1.75rem · 28 px / 1.28572
weight 400
The Championships, Wimbledon - Official Website…
Heading 4
1.25rem · 20 px / 1.4
weight 400
The Championships, Wimbledon - Official Website…
Heading 5
1rem · 16 px / 1.5
weight 600
The Championships, Wimbledon - Official Website…
Heading 6
.875rem · 14 px / 1.42857
weight 600
The Championships, Wimbledon - Official Website…
Body
100% / 1
weight 400 · Arial
The home of The Championships, Wimbledon, with the latest tennis news, highlights, exclusive content, scores, draws and ticket information.
Paragraph
1rem · 16 px / 1.5
weight 400
The home of The Championships, Wimbledon, with the latest tennis news, highlights, exclusive content, scores, draws and ticket information.
Small
100%
The home of The Championships, Wimbledon, with the latest tennis news, highlights, exclusive content, scores, draws and ticket information.
Button
15px
Get started
Link
100%
Read more about The Championships, Wimbledon
Sizes in use
Most common across the site- 40pxline .95 · 204 rules
- 32pxline .95 · 529 rules
- 20pxline 1.5 · 411 rules
- 18pxline .95 · 283 rules
- 16pxline 1.5 · 314 rules
- 14pxline 1.5 · 715 rules
- 12pxline 1.2 · 478 rules
- 10pxline 1.2 · 282 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Link
Read our latest news today.
a · #0062FE
Corner radius
- 8px · 55×
- 50% · 33×
- 4px · 29×
- .5rem · 21×
- .25rem · 11×
- 2px · 10×
Shadows
- 0 2px 6px #0000004d
- 0 0 1px #0006
- 0 1px #e0e0e0
- 0 1px #c6c6c6
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
672
674
675
1023
1024
1056
1439
1440
On a scale of 0 to 1440 px.
Content widths (max-width)
1440 px
1312 px
896 px
643 px
611 px
320 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 54 characters, short enough to show in full in search results.
- ▲ CheckThere is no og:image, so links shared on social media show no picture.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does The Championships, Wimbledon use?
- The Championships, Wimbledon’s website uses three typefaces: Gotham (headings), self-hosted; ACaslonPro, self-hosted; IBM Plex Sans (body text), self-hosted.
- What are The Championships, Wimbledon’s brand colours?
- The main colours on wimbledon.com are Light Green (#006633), Indigo (#540082), Dark Slate Grey (#00331A), Deep Green (#00552B), Crimson (#DA1E28) and Royal Blue (#0F62FE).
- What colour is The Championships, Wimbledon’s text and background?
- Body text is #171717 on a #FFFFFF background.
- Is this The Championships, Wimbledon’s official style guide?
- No. SiteStyleGuide made it from wimbledon.com’s public web pages on 27 October 2026, and isn’t affiliated with The Championships, Wimbledon. 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
wimbledon-com-tokens.css
/* wimbledon.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/wimbledon.com) */
:root {
/* Colours */
--text: #171717;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-cool-off-white: #E4E9F1;
--colour-cool-near-black: #121619;
--colour-cool-dark-grey: #697077;
--colour-light-green: #006633;
--colour-indigo: #540082;
--colour-dark-slate-grey: #00331A;
--colour-deep-green: #00552B;
--colour-crimson: #DA1E28;
--colour-royal-blue: #0F62FE;
--colour-olive: #816C3C;
--colour-midnight-blue: #240330;
--colour-blue: #0043CE;
--colour-honey-dew: #D3F0E0;
--colour-yellow: #F3FF00;
--colour-gold: #F1C21B;
--gradient-1: linear-gradient(0deg, #4589ff29 0%, 15%, #fff0 50%, transparent 100%);
--gradient-2: linear-gradient(to right, #4589ff29 0%, #fff0 50%, transparent 50%);
--gradient-3: linear-gradient(to top, #4589ff52 0%, 15%, #fff0 50%) padding-box,linear-gradient(to top, #edf5ff, #edf5ff) padding-box,linear-gradient(to bottom, #a6c8ffa3, #78a9ff) border-box,linear-gradient(to top, #edf5ff, #edf5ff);
/* Typefaces */
--font-headings: 'Gotham', 'Gotham SSm A', 'Gotham SSm B', -apple-system, system-ui, 'Arial';
--font-buttons: 'Gotham', 'Gotham SSm A', 'Gotham SSm B', -apple-system, system-ui, 'Arial';
--font-body: 'IBM Plex Sans', system-ui, -apple-system, blinkmacsystemfont, sans-serif;
/* Type scale */
--text-h1: 2.625rem;
--leading-h1: 1.199;
--text-h2: 2rem;
--leading-h2: 1.25;
--text-h3: 1.75rem;
--leading-h3: 1.28572;
--text-h4: 1.25rem;
--leading-h4: 1.4;
--text-h5: 1rem;
--leading-h5: 1.5;
--text-h6: .875rem;
--leading-h6: 1.42857;
--text-body: 100%;
--leading-body: 1;
--text-p: 1rem;
--leading-p: 1.5;
--text-small: 100%;
--text-button: 15px;
--text-a: 100%;
/* Shape */
--radius-1: 8px;
--radius-2: 50%;
--radius-3: 4px;
--radius-4: .5rem;
--radius-5: .25rem;
--radius-6: 2px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 672px;
--breakpoint-2: 674px;
--breakpoint-3: 675px;
--breakpoint-4: 1023px;
--breakpoint-5: 1024px;
--breakpoint-6: 1056px;
--breakpoint-7: 1439px;
--breakpoint-8: 1440px;
--max-width-1: 1440px;
--max-width-2: 1312px;
--max-width-3: 896px;
--max-width-4: 643px;
--max-width-5: 611px;
--max-width-6: 320px;
}
{
"site": "wimbledon.com",
"source": "https://sitestyleguide.com/wimbledon.com",
"text": "#171717",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Cool Off White",
"hex": "#E4E9F1",
"rgb": [
228,
233,
241
]
},
{
"name": "Cool Near Black",
"hex": "#121619",
"rgb": [
18,
22,
25
]
},
{
"name": "Cool Dark Grey",
"hex": "#697077",
"rgb": [
105,
112,
119
]
},
{
"name": "Light Green",
"hex": "#006633",
"rgb": [
0,
102,
51
]
},
{
"name": "Indigo",
"hex": "#540082",
"rgb": [
84,
0,
130
]
},
{
"name": "Dark Slate Grey",
"hex": "#00331A",
"rgb": [
0,
51,
26
]
},
{
"name": "Deep Green",
"hex": "#00552B",
"rgb": [
0,
85,
43
]
},
{
"name": "Crimson",
"hex": "#DA1E28",
"rgb": [
218,
30,
40
]
},
{
"name": "Royal Blue",
"hex": "#0F62FE",
"rgb": [
15,
98,
254
]
},
{
"name": "Olive",
"hex": "#816C3C",
"rgb": [
129,
108,
60
]
},
{
"name": "Midnight Blue",
"hex": "#240330",
"rgb": [
36,
3,
48
]
},
{
"name": "Blue",
"hex": "#0043CE",
"rgb": [
0,
67,
206
]
},
{
"name": "Honey Dew",
"hex": "#D3F0E0",
"rgb": [
211,
240,
224
]
},
{
"name": "Yellow",
"hex": "#F3FF00",
"rgb": [
243,
255,
0
]
},
{
"name": "Gold",
"hex": "#F1C21B",
"rgb": [
241,
194,
27
]
}
],
"fonts": [
{
"name": "Gotham",
"stack": "Gotham, Gotham SSm A, Gotham SSm B, -apple-system, system-ui, Arial, sans-serif",
"weights": [
400,
500,
700
],
"source": "Self-hosted"
},
{
"name": "ACaslonPro",
"stack": "ACaslonPro, Adobe Caslon Pro, Caslon, Georgia, serif",
"weights": [
400,
700
],
"source": "Self-hosted"
},
{
"name": "IBM Plex Sans",
"stack": "IBM Plex Sans, system-ui, -apple-system, BlinkMacSystemFont, \\.SFNSText-Regular, sans-serif",
"weights": [
300,
400,
500,
600,
700
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run wimbledon.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/wimbledon.com" title="The Championships, Wimbledon style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in Gotham
Other websites using Gotham as their main typeface
NerdWallet
nerdwallet.com · set in Gotham
Save
Similar colours
Websites whose lead colour is closest to The Championships, Wimbledon’s
Consumer Reports
consumerreports.org · 5 days ago
Save
Common Sense Media
commonsensemedia.org · 4 days ago
Save
xbox.com
xbox.com · 3 days ago
Save
LifeHack
lifehack.org · 5 days ago
Save
Captured from wimbledon.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by The Championships, Wimbledon; this guide describes the public website for reference.