What font does World Surf League use?

World Surf League’s website uses three typefaces: Geogrotesque (headings), served from d3qf8nvav5av0u.cloudfront.net; Systemic, self-hosted; Roboto (body text), served from d3qf8nvav5av0u.cloudfront.net.

What are World Surf League’s brand colours?

The main colours on worldsurfleague.com are Royal Blue (#005AA0), Deep Fire Brick (#D0011B), Deep Dodger Blue (#008BFF), Light Gold (#FFD040), Midnight Blue (#003057) and Orange (#FFA700).

What colour is World Surf League’s text and background?

Body text is #424242 on a #FFFFFF background.

Where is World Surf League’s logo from?

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

Is this World Surf League’s official style guide?

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

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

Unofficial style guide

World Surf Leaguestyle guide

World Surf League’s website (worldsurfleague.com) sets its headings in Geogrotesque and its body text in Roboto. Its palette is led by Royal Blue (#005AA0), Deep Fire Brick (#D0011B) and Deep Dodger Blue (#008BFF), with #424242 text on #FFFFFF. Captured from the live site on 27 October 2026.

Website: worldsurfleague.com
Typefaces: Geogrotesque, Systemic, Roboto
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 27 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the worldsurfleague.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: World Surf League - The global home of surfing; ● 46 / 60 characters
Meta description: Get surfing news, watch live surfing events, view videos, athlete rankings and more from the world's best surfers on the world's best waves.; ● 140 / 160 characters
Site name: World Surf League
og:title: World Surf League - The global home of surfing
og:description: Get surfing news, watch live surfing events, view videos, athlete rankings and more from the world's best surfers on the world's best waves.
Language: en
Theme colour: #003057

In search results

World Surf Leaguehttps://www.worldsurfleague.com/

World Surf League - The global home of surfing

Get surfing news, watch live surfing events, view videos, athlete rankings and more from the world's best surfers on the world's best waves.

When shared

The image World Surf League shares with links

worldsurfleague.com

World Surf League - The global home of surfing

Get surfing news, watch live surfing events, view videos, athlete rankings and more from the world's best sur…

Logo & favicons

Found as: CSS background on .logo. PNG, 960 × 960.

Logo

On white

On black

On Royal Blue

Favicons

8 found

700 px · SVG mask-icon
512 px · PNG manifest
192 px · PNG manifest
180 px · PNG apple-touch-icon
144 px · PNG icon
32 px · PNG icon
16 px · PNG icon
16 px · ICO favicon.ico

World Surf League - The global home of surfing

Light browser tab

World Surf League - The global home of surfing

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 (#424242) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 41.3%
Charcoal 11.2%
Off White 8.8%
Black 7.1%
Royal Blue 4.9%
Deep Fire Brick 4.1%
Deep Dodger Blue 3.6%
Light Gold 3.3%
Midnight Blue 2.8%
Orange 2.5%
Light Dodger Blue 2.2%
Deep Sky Blue 2.1%
Light Fire Brick 1.9%
Deep Tomato 1.7%
Deep Gold 1.3%
Light Tomato 1.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
10.05:1 AAA

On white
—

Text, background, border · .home-next-featured-events .home-next-featured-events--container .featured-event, .post-event-watch-heats-header.post-event-watch-heats-header--big_wave_tow_team
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 74

On text
—

On white
10.05:1 AAA

Text, background, border · div[data-theme="nightmare"] .post-event-watch-leaderboard.post-event-watch-leade, div[data-theme="nightmare"] .post-event-watch-heats-header.post-event-watch-heat
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 7

On text
8.66:1 AAA

On white
1.16:1 Fail

Background, border, text · .hn-item .hn-item__text .hn-item__text-inner-wrap--accent .hn-item__text-title, .wave-pool-avatar-athlete--singlet-white .avatar-image
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
2.09:1 Fail

On white
21.00:1 AAA

Background, text, border · .live-intro-carousel.live-intro-carousel--featured-inline .live-intro-carousel__, body.has-takeover .live-video-takeovers-wrapper .content-footer .button

Colours

Brand colours and accents, most used first

Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 44 0 37

On text
1.42:1 Fail

On white
7.07:1 AAA

Text, background, border · .inline-event-promos, .new-page-mast-title-category a:hover
Deep Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 87 18

On text
1.77:1 Fail

On white
5.67:1 AA

Text, background, border · .wave-pool-avatar-athlete--singlet-red .avatar-image, .wave-pool-avatar-athlete--singlet-wpe_red .avatar-image
Deep Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
100 45 0 0

On text
2.94:1 Fail

On white
3.42:1 AA large

Text, background, border · .hot-heat__waves-details .hot-heat__wave-header-title, .page-type--series.page-sub-type--rankings .series-collection-heading .series-ca
Light Gold

HEX

RGB

HSL

OKLCH

CMYK
0 18 75 0

On text
6.87:1 AA

On white
1.46:1 Fail

Text, background, border · .home-next-featured-athlete-item__tour-ct.home-next-featured-athlete-item .home-, .event-results-prizes .results-prizes-athlete-wrap--primary.results-prizes-athle
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 45 0 66

On text
1.34:1 Fail

On white
13.46:1 AAA

Background, text, border · .page-body--big-wave .hn-ribbon-item .hn-ribbon-item__content .home-next__ribbon, .home-next-module__title h3
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 35 100 0

On text
5.16:1 AA

On white
1.95:1 Fail

Text, background, border · .post-event-watch-heat-details-heat .injured-note--active .injured-note__title, .post-event-watch-wave-pool-hybrid-details-heat .injured-note--active .injured-n
Light Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
84 36 0 0

On text
3.69:1 AA large

On white
2.73:1 Fail

Text, background, border · div[data-theme="dark"] .new-page-mast-description a, div[data-theme="dark"] .filter-bar__item-button--active
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 31 0 0

On text
4.14:1 AA large

On white
2.43:1 Fail

Text, background, border · .post-event-watch-heat-bracket-stage__heat .heat-pickem-vote-button, .post-event-watch-wave-pool-hybrid-bracket-stage__heat .heat-pickem-vote-button
Light Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 16

On text
1.83:1 Fail

On white
5.48:1 AA

Text, background, border · .live-intro-carousel.live-intro-carousel--featured-inline .live-intro-carousel__, .upcoming-events-list-section .event-item__meta .event-item__status.event-item__
Deep Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 73 78 0

On text
2.95:1 Fail

On white
3.41:1 AA large

Text, background, border · body .index-red-bull-airborne .new-page-header button, body .index-red-bull-airborne .vote-popup .header
Deep Gold

HEX

RGB

HSL

OKLCH

CMYK
0 14 100 4

On text
6.86:1 AA

On white
1.46:1 Fail

Background, border · .wave-pool-avatar-athlete--singlet-yellow .avatar-image, .wave-pool-avatar-athlete--singlet-wpe_yellow .avatar-image
Light Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 65 65 0

On text
3.27:1 AA large

On white
3.08:1 AA large

Background, text, border · .home-next-featured-athlete-item__tour-cs.home-next-featured-athlete-item .home-, .events-schedule .events-schedule-table span.event-status.event-status--canceled

Gradients

linear-gradient(top, #fff 0%, #f5f5f5 100%)
linear-gradient(top, #616161 0%, #424242 100%)
linear-gradient(top, #00b0ff 0%, #0277bd 100%)

Dark mode

Switched on by the site

Aa Light · #424242 on #FFFFFF

Aa Dark · #FFFFFF on #202020 · 16.29:1 AAA

Near Black

#202020
Black

#000000

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.

Geogrotesque

Aa 100 Aa 700

Geogrotesque

Served from d3qf8nvav5av0u.cloudfront.net · weights 100, 200, 300, 400, 500, 600, 700 · headings, buttons · shown in a stand-in if you don’t have it

Aa 300 Aa 800

Systemic

Self-hosted · weights 300, 400, 500, 590, 700, 800 · headings, buttons · shown in a stand-in if you don’t have it

Aa 100 Aa 900

Roboto

Served from d3qf8nvav5av0u.cloudfront.net · weights 100, 400, 500, 700, 900 · headings, body, buttons · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Body 18px / 1.33333333 weight 400 · Roboto

Get surfing news, watch live surfing events, view videos, athlete rankings and more from the world's best surfers on the world's best waves.

Paragraph 14px / 24px weight 400 · capitalize · Systemic

Get surfing news, watch live surfing events, view videos, athlete rankings and more from the world's best surfers on the world's best waves.

Button 16px / 19px weight 600 · uppercase · Geogrotesque

Get started

Link 16px / 19.09px weight 590 · uppercase · Geogrotesque

Sizes in use

Most common across the site

26pxline 1.23076923 · 34 rules
20pxline 1.2 · 69 rules
18pxline 1.11111111 · 102 rules
16pxline 1.25 · 252 rules
14pxline 1.14285714 · 96 rules
13pxline 1.23076923 · 164 rules
12pxline 1.33333333 · 73 rules
10pxline 1.2 · 44 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

body .index-red-bull-airborne .new-page-header button · #FF4539 · radius 8px

Link

Read our latest news today.

a · #424242

Corner radius

4px · 60×
2px · 44×
50% · 40×
3px · 23×
5px · 13×
8px · 12×

Shadows

0 1px 1px rgba(0, 0, 0, 0.5)
0 1px 4px rgba(0, 0, 0, 0.2)
0 2px 4px rgba(0, 0, 0, 0.2)
0 4px 4px -2px rgba(0, 0, 0, 0.1)

Layout

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

Grid

Breakpoints

375

414

600

767

768

991

992

1200

On a scale of 0 to 1440 px.

Content widths (max-width)

1600 px

1440 px

1280 px

700 px

680 px

300 px

Notes

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

Notes

● FineThe title is 46 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 World Surf League use?: World Surf League’s website uses three typefaces: Geogrotesque (headings), served from d3qf8nvav5av0u.cloudfront.net; Systemic, self-hosted; Roboto (body text), served from d3qf8nvav5av0u.cloudfront.net.
What are World Surf League’s brand colours?: The main colours on worldsurfleague.com are Royal Blue (#005AA0), Deep Fire Brick (#D0011B), Deep Dodger Blue (#008BFF), Light Gold (#FFD040), Midnight Blue (#003057) and Orange (#FFA700).
What colour is World Surf League’s text and background?: Body text is #424242 on a #FFFFFF background.
Where is World Surf League’s logo from?: The logo shown in this guide was found on worldsurfleague.com’s homepage. For official logo files and usage rules, check World Surf League’s own brand or press page.
Is this World Surf League’s official style guide?: No. SiteStyleGuide made it from worldsurfleague.com’s public web pages on 27 October 2026, and isn’t affiliated with World Surf League. 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

worldsurfleague-com-tokens.css

Download

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

/* worldsurfleague.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/worldsurfleague.com) */
:root {
  /* Colours */
  --text: #424242;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #424242;
  --colour-off-white: #EEEEEE;
  --colour-black: #000000;
  --colour-royal-blue: #005AA0;
  --colour-deep-fire-brick: #D0011B;
  --colour-deep-dodger-blue: #008BFF;
  --colour-light-gold: #FFD040;
  --colour-midnight-blue: #003057;
  --colour-orange: #FFA700;
  --colour-light-dodger-blue: #29A2FF;
  --colour-deep-sky-blue: #00B0FF;
  --colour-light-fire-brick: #D50000;
  --colour-deep-tomato: #FF4539;
  --colour-deep-gold: #F6D400;
  --colour-light-tomato: #FF595A;
  --gradient-1: linear-gradient(top, #fff 0%, #f5f5f5 100%);
  --gradient-2: linear-gradient(top, #616161 0%, #424242 100%);
  --gradient-3: linear-gradient(top, #00b0ff 0%, #0277bd 100%);

  /* Typefaces */
  --font-headings: 'Geogrotesque', sans-serif;
  --font-buttons: 'Geogrotesque', sans-serif;
  --font-body: 'Roboto', sans-serif;

  /* Type scale */
  --text-body: 18px;
  --leading-body: 1.33333333;
  --text-p: 14px;
  --leading-p: 24px;
  --text-button: 16px;
  --leading-button: 19px;
  --text-a: 16px;
  --leading-a: 19.09px;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 2px;
  --radius-3: 50%;
  --radius-4: 3px;
  --radius-5: 5px;
  --radius-6: 8px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 375px;
  --breakpoint-2: 414px;
  --breakpoint-3: 600px;
  --breakpoint-4: 767px;
  --breakpoint-5: 768px;
  --breakpoint-6: 991px;
  --breakpoint-7: 992px;
  --breakpoint-8: 1200px;
  --max-width-1: 1600px;
  --max-width-2: 1440px;
  --max-width-3: 1280px;
  --max-width-4: 700px;
  --max-width-5: 680px;
  --max-width-6: 300px;
}

{
    "site": "worldsurfleague.com",
    "source": "https://sitestyleguide.com/worldsurfleague.com",
    "text": "#424242",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#424242",
            "rgb": [
                66,
                66,
                66
            ]
        },
        {
            "name": "Off White",
            "hex": "#EEEEEE",
            "rgb": [
                238,
                238,
                238
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#005AA0",
            "rgb": [
                0,
                90,
                160
            ]
        },
        {
            "name": "Deep Fire Brick",
            "hex": "#D0011B",
            "rgb": [
                208,
                1,
                27
            ]
        },
        {
            "name": "Deep Dodger Blue",
            "hex": "#008BFF",
            "rgb": [
                0,
                139,
                255
            ]
        },
        {
            "name": "Light Gold",
            "hex": "#FFD040",
            "rgb": [
                255,
                208,
                64
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#003057",
            "rgb": [
                0,
                48,
                87
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFA700",
            "rgb": [
                255,
                167,
                0
            ]
        },
        {
            "name": "Light Dodger Blue",
            "hex": "#29A2FF",
            "rgb": [
                41,
                162,
                255
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00B0FF",
            "rgb": [
                0,
                176,
                255
            ]
        },
        {
            "name": "Light Fire Brick",
            "hex": "#D50000",
            "rgb": [
                213,
                0,
                0
            ]
        },
        {
            "name": "Deep Tomato",
            "hex": "#FF4539",
            "rgb": [
                255,
                69,
                57
            ]
        },
        {
            "name": "Deep Gold",
            "hex": "#F6D400",
            "rgb": [
                246,
                212,
                0
            ]
        },
        {
            "name": "Light Tomato",
            "hex": "#FF595A",
            "rgb": [
                255,
                89,
                90
            ]
        }
    ],
    "fonts": [
        {
            "name": "Geogrotesque",
            "stack": "\"Geogrotesque\", sans-serif",
            "weights": [
                100,
                200,
                300,
                400,
                500,
                600,
                700
            ],
            "source": "Served from d3qf8nvav5av0u.cloudfront.net"
        },
        {
            "name": "Systemic",
            "stack": "-apple-system, BlinkMacSystemFont, \"Systemic\", sans-serif",
            "weights": [
                300,
                400,
                500,
                590,
                700,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Roboto",
            "stack": "\"Roboto\", sans-serif",
            "weights": [
                100,
                400,
                500,
                700,
                900
            ],
            "source": "Served from d3qf8nvav5av0u.cloudfront.net"
        }
    ]
}

Websites whose lead colour is closest to World Surf League’s

Internal Revenue Service

irs.gov · 9 hours ago
Save
US EPA

epa.gov · 8 hours ago
Save
DOL

dol.gov · 5 days ago
Save
CDC

cdc.gov · 6 days ago
Save

Captured from worldsurfleague.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by World Surf League; this guide describes the public website for reference.

World Surf Leaguestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Off White

Black

Colours

Royal Blue

Deep Fire Brick

Deep Dodger Blue

Light Gold

Midnight Blue

Orange

Light Dodger Blue

Deep Sky Blue

Light Fire Brick

Deep Tomato

Deep Gold

Light Tomato

Gradients

Dark mode

Geogrotesque

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run worldsurfleague.com?

Similar colours

Internal Revenue Service

US EPA

DOL

CDC

Title &
description