SiteStyleGuide

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

Maps of World logo

Unofficial style guide

Maps of Worldstyle guide

Maps of World’s website (mapsofworld.com) uses Raleway for its headings and body text. Its palette is led by Olive Drab (#7F9C10), Red (#DF3A26) and Midnight Blue (#241C5D), with #333333 text on #FFFFFF. Captured from the live site on 22 October 2026.

Typefaces
Raleway, Josefin Sans
Palette
4 neutrals, 12 colours, 3 gradients
Captured
22 Oct 2026 · added by @sitestyleguide
https://mapsofworld.com/ Screenshot
Screenshot of the mapsofworld.com homepage on a desktop screen
Screenshot of mapsofworld.com on a 1440 px desktop screen, 22 Oct 2026.

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 Maps, Geography, and Travel Information
● 45 / 60 characters
Meta description
Explore world maps, geographic insights, and travel information. Find accurate data for countries, continents, and cities. Start your journey now!
● 146 / 160 characters
Site name
Maps of World
og:title
World Maps, Geography, and Travel Information
og:description
Mapsofworld provides the best map of the world labeled with country name, this is purely a online digital world geography map in English with all countries labeled.
Language
en

In search results

Maps of Worldhttps://mapsofworld.com/

World Maps, Geography, and Travel Information

Explore world maps, geographic insights, and travel information. Find accurate data for countries, continents, and cities. Start your journey now!

When shared

The image Maps of World shares with links

mapsofworld.com

World Maps, Geography, and Travel Information

Mapsofworld provides the best map of the world labeled with country name, this is purely a online digital wor…

Back to top ↑

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

Colour

Balance

How much each colour is used
  • White 24%
  • Olive Drab 10.8%
  • Red 10.7%
  • Midnight Blue 9.8%
  • Gold 9.8%
  • Charcoal 6.2%
  • Off White 5.6%
  • Black 4.6%
  • Light Steel Blue 4.6%
  • Dark Olive Green 2.4%
  • Dark Golden Rod 2.4%
  • Brown 2.4%
  • Deep Steel Blue 2.2%
  • Sky Blue 1.5%
  • Corn Silk 1.4%
  • Honey Dew 1.4%

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
    12.63:1 AAA
    On white
    —

    Text, background, border · body, .panel-primary>.panel-heading .badge

  • Charcoal

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 80
    On text
    —
    On white
    12.63:1 AAA

    Text, background, border · body, .panel-default>.panel-heading .badge

  • Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 13
    On text
    9.30:1 AAA
    On white
    1.36:1 Fail

    Border, background · .nav .nav-divider, .navbar-default .navbar-toggle:focus

  • Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 100
    On text
    1.66:1 Fail
    On white
    21.00:1 AAA

    Background, text, border · body, .navbar-inverse .navbar-nav .open .dropdown-menu .divider

Colours

Brand colours and accents, most used first
  • Olive Drab

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    19 0 90 39
    On text
    4.01:1 AA large
    On white
    3.15:1 AA large

    Background · h2.main-hd:after, span.main-hd:after

  • Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 74 83 13
    On text
    2.87:1 Fail
    On white
    4.40:1 AA large

    Background, text · h2.main-hd:after, span.main-hd:after

  • Midnight Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    61 70 0 64
    On text
    1.19:1 Fail
    On white
    15.01:1 AAA

    Background · h2.main-hd:after, span.main-hd:after

  • Gold

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 17 89 1
    On text
    8.65:1 AAA
    On white
    1.46:1 Fail

    Background · h2.main-hd:after, span.main-hd:after

  • Light Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    72 33 0 28
    On text
    2.77:1 Fail
    On white
    4.56:1 AA

    Text, background, border · .panel-primary>.panel-heading, .btn-primary

  • Dark Olive Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    49 0 48 54
    On text
    2.32:1 Fail
    On white
    5.45:1 AA

    Text, background, border · .panel-success>.panel-heading .badge, .panel-success>.panel-heading

  • Dark Golden Rod

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 21 57 46
    On text
    2.61:1 Fail
    On white
    4.85:1 AA

    Text, background, border · .panel-warning>.panel-heading .badge, .panel-warning>.panel-heading

  • Brown

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 60 61 34
    On text
    2.16:1 Fail
    On white
    5.85:1 AA

    Text, background, border · .panel-danger>.panel-heading .badge, .panel-danger>.panel-heading

  • Deep Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    66 22 0 44
    On text
    2.31:1 Fail
    On white
    5.46:1 AA

    Text, background, border · .panel-info>.panel-heading .badge, .panel-info>.panel-heading

  • Sky Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    59 14 0 13
    On text
    6.04:1 AA
    On white
    2.09:1 Fail

    Background, text, border · .btn-info, .btn-info .badge

  • Corn Silk

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 2 10 1
    On text
    11.84:1 AAA
    On white
    1.07:1 Fail

    Background, text · .panel-warning>.panel-heading, .panel-warning>.panel-heading .badge

  • Honey Dew

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    7 0 10 6
    On text
    10.58:1 AAA
    On white
    1.19:1 Fail

    Background, text · .panel-success>.panel-heading, .panel-success>.panel-heading .badge

Gradients

  • linear-gradient(left,#7f9c10,#7f9c10 25%,#df3a26 25%,#df3a26 50%,#241c5d 50%,#241c5d 75%,#fcd21c 75%,#fcd21c)

  • linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)

  • linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%)

Back to top ↑

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.

Raleway

Aa 400 Aa 800

Raleway

Google Fonts · weights 400, 500, 600, 700, 800 · headings

Aa 300 Aa 700

Josefin Sans

Google Fonts · weights 300, 400, 600, 700

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

Type scale

From the site’s CSS · root 10 px
Heading 1 36px / 1.1 weight 500

Maps of World

Heading 2 30px / 1.1 weight 500

World Maps, Geography, and Travel Information

Heading 3 24px / 1.1 weight 500

World Maps, Geography, and Travel Information

Heading 4 18px / 1.1 weight 500

World Maps, Geography, and Travel Information

Heading 5 14px / 1.1 weight 500

World Maps, Geography, and Travel Information

Heading 6 12px / 1.1 weight 500

World Maps, Geography, and Travel Information

Body 14px / 1.42857143 Helvetica Neue

Explore world maps, geographic insights, and travel information. Find accurate data for countries, continents, and cities. Start your journ…

Paragraph 21px / 21px weight 200 · Raleway

Explore world maps, geographic insights, and travel information. Find accurate data for countries, continents, and cities. Start your journ…

Small 85%

Explore world maps, geographic insights, and travel information. Find accurate data for countries, continents, and cities. Start your journ…

Link 13px / 1 weight 700 · uppercase · Josefin Sans

Read more about Maps of World

Sizes in use

Most common across the site
  • 28px3 rules
  • 21pxline inherit · 3 rules
  • 20px4 rules
  • 18pxline 1.3333333 · 23 rules
  • 16pxline 21px · 15 rules
  • 14pxline 1.42857143 · 14 rules
  • 13pxline 19px · 8 rules
  • 12pxline 1.5 · 15 rules

Back to top ↑

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

.btn-primary · #337AB7

Link

Read our latest news today.

a · #337AB7

Corner radius

  • 4px · 21×
  • 6px · 10×
  • 3px · 8×
  • 4px 4px 0 0 · 3×
  • 5px · 2×
  • 15px · 2×

Shadows

  • 2px 1px 3px #ccc
  • 0 6px 12px rgba(0,0,0,.175)
  • 0 1px 1px rgba(0,0,0,.05)
  • 0 3px 9px rgba(0,0,0,.5)

Back to top ↑

Layout

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

Grid

Breakpoints

767
768
770
991
992
1024
1199
1200

On a scale of 0 to 1440 px.

Content widths (max-width)

1040 px

Back to top ↑

Notes

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

Notes

  • ● FineThe title is 45 characters, short enough to show in full in search results.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Maps of World use?
Maps of World’s website uses two typefaces: Raleway (headings and body text), google Fonts; Josefin Sans, google Fonts.
What are Maps of World’s brand colours?
The main colours on mapsofworld.com are Olive Drab (#7F9C10), Red (#DF3A26), Midnight Blue (#241C5D), Gold (#FCD21C), Light Steel Blue (#337AB7) and Dark Olive Green (#3C763D).
What colour is Maps of World’s text and background?
Body text is #333333 on a #FFFFFF background.
Where is Maps of World’s logo from?
The logo shown in this guide was found on mapsofworld.com’s homepage. For official logo files and usage rules, check Maps of World’s own brand or press page.
Is this Maps of World’s official style guide?
No. SiteStyleGuide made it from mapsofworld.com’s public web pages on 22 October 2026, and isn’t affiliated with Maps of World. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

mapsofworld-com-tokens.css

Download

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

/* mapsofworld.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/mapsofworld.com) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-off-white: #DDDDDD;
  --colour-black: #000000;
  --colour-olive-drab: #7F9C10;
  --colour-red: #DF3A26;
  --colour-midnight-blue: #241C5D;
  --colour-gold: #FCD21C;
  --colour-light-steel-blue: #337AB7;
  --colour-dark-olive-green: #3C763D;
  --colour-dark-golden-rod: #8A6D3B;
  --colour-brown: #A94442;
  --colour-deep-steel-blue: #31708F;
  --colour-sky-blue: #5BC0DE;
  --colour-corn-silk: #FCF8E3;
  --colour-honey-dew: #DFF0D8;
  --gradient-1: linear-gradient(left,#7f9c10,#7f9c10 25%,#df3a26 25%,#df3a26 50%,#241c5d 50%,#241c5d 75%,#fcd21c 75%,#fcd21c);
  --gradient-2: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  --gradient-3: linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);

  /* Typefaces */
  --font-headings: 'Raleway';
  --font-other: 'Josefin Sans';

  /* Type scale */
  --text-h1: 36px;
  --leading-h1: 1.1;
  --text-h2: 30px;
  --leading-h2: 1.1;
  --text-h3: 24px;
  --leading-h3: 1.1;
  --text-h4: 18px;
  --leading-h4: 1.1;
  --text-h5: 14px;
  --leading-h5: 1.1;
  --text-h6: 12px;
  --leading-h6: 1.1;
  --text-body: 14px;
  --leading-body: 1.42857143;
  --text-p: 21px;
  --leading-p: 21px;
  --text-small: 85%;
  --text-a: 13px;
  --leading-a: 1;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 3px;
  --radius-4: 4px 4px 0 0;
  --radius-5: 5px;
  --radius-6: 15px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 767px;
  --breakpoint-2: 768px;
  --breakpoint-3: 770px;
  --breakpoint-4: 991px;
  --breakpoint-5: 992px;
  --breakpoint-6: 1024px;
  --breakpoint-7: 1199px;
  --breakpoint-8: 1200px;
  --max-width-1: 1040px;
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

Run mapsofworld.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

View our style guide on SiteStyleGuide
<a href="https://sitestyleguide.com/mapsofworld.com" title="Maps of World style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Other websites using Raleway as their main typeface
Websites whose lead colour is closest to Maps of World’s

Captured from mapsofworld.com on 22 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Maps of World; this guide describes the public website for reference.