Oxford University Press
oup.com · 4 days ago
SaveUnofficial A style guide made by SiteStyleGuide from visitscotland.com’s public web pages. Not affiliated with or endorsed by VisitScotland. The real site is visitscotland.com ↗
Unofficial style guide
VisitScotlandstyle guide
VisitScotland’s website (visitscotland.com) uses source sans pro for its headings and body text. Its palette is led by Slate Blue (#1F49D6), Deep Midnight Blue (#200F2E) and Medium Violet Red (#A8308C), with #200F2E text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- visitscotland.com
- Typefaces
- source sans pro, evelethclean-regular, Segoe UI
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://www.visitscotland.com/
Screenshot
visitscotland.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
- VisitScotland - Scotland's National Tourist Organisation | VisitScotland
- ▲ 72 / 60 characters
- Meta description
- Get all the information you need for your trip to Scotland! Discover new places to visit, find amazing things to do, pick your ideal accommodation and more!
- ● 156 / 160 characters
- Site name
- VisitScotland
- og:title
- VisitScotland - Scotland's National Tourist Organisation
- og:description
- Get all the information you need for your trip to Scotland! Discover new places to visit, find amazing things to do, pick your ideal accommodation and more!
- Language
- en-gb
In search results
VisitScotlandhttps://www.visitscotland.com/
VisitScotland - Scotland's National Tourist Organisation | Vi…
Get all the information you need for your trip to Scotland! Discover new places to visit, find amazing things to do, pick your ideal accommodation and more!
When shared
visitscotland.com
VisitScotland - Scotland's National Tourist Organisation
Get all the information you need for your trip to Scotland! Discover new places to visit, find amazing things…
Logo & favicons
Found as: image in the header. SVG, 1190 × 200.
Logo
On white
On black
On Slate Blue
Favicons
4 found-
512 px · PNG
manifest
-
256 px · ICO icon
-
234 px · SVG
icon
-
192 px · PNG
manifest
VisitScotland - Scotland's National Tourist Organisation | VisitScotland
Light browser tab
VisitScotland - Scotland's National Tourist Organisation | VisitScotland
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 (#200F2E) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 34.3%
- Slate Blue 15.7%
- Deep Midnight Blue 11.6%
- Off White 6.8%
- Medium Violet Red 5.3%
- Deep Cool Off White 3.3%
- Royal Blue 2.9%
- Rebecca Purple 2.8%
- Light Midnight Blue 2.5%
- Light Cool Off White 2.4%
- Lavender 2.4%
- Brown 2.4%
- Medium Sea Green 2%
- Yellow 2%
- Deep Slate Blue 2%
- Light Slate Blue 1.5%
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.96:1 AAA
- On white
- —
Text, background, border · .vs-product-search__heading, body
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 9
- On text
- 14.79:1 AAA
- On white
- 1.21:1 Fail
Border, background, text · .vs-button.btn-primary.disabled, .vs-tab-link.disabled
-
Deep Cool Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 5 5 0 6
- On text
- 14.37:1 AAA
- On white
- 1.25:1 Fail
Background, text, graphic · .link-info, --bs-btn-border-color
-
Light Cool Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 2 2 0 3
- On text
- 16.11:1 AAA
- On white
- 1.12:1 Fail
Background, border · .vs-map-filter__buttons::-webkit-scrollbar-track, .vs-map__filter-controls::-webkit-scrollbar-track
Colours
Brand colours and accents, most used first-
Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 86 66 0 16
- On text
- 2.55:1 Fail
- On white
- 7.04:1 AAA
Text, background, border · .vs-navigation-bar-menu-dropdown.vs-navigation-bar-menu-dropdown--subtle .btn.dr, .vs-button.btn-primary
-
Deep Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 30 67 0 82
- On text
- —
- On white
- 17.96:1 AAA
Text, background, border · .vs-mega-nav-accordion-item--level-1>.vs-accordion-item__card-header .vs-accordi, body
-
Medium Violet Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 71 17 34
- On text
- 2.96:1 Fail
- On white
- 6.06:1 AA
Text, background, border · .card.vs-stretched-link-card .vs-stretched-link-card__title .stretched-link .vs-, .vs-itinerary-day__header .vs-itinerary-day__title
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 80 59 0 0
- On text
- 3.94:1 AA large
- On white
- 4.56:1 AA
Background, border · .vs-button.btn-subtle:not(.vs-main-map-category__button).vs-button--active, .vs-toggle-button.btn-default.vs-button--active
-
Rebecca Purple
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 33 73 0 47
- On text
- 1.75:1 Fail
- On white
- 10.26:1 AAA
Background, text, graphic · .vs-global-menu__languages .btn-primary.dropdown-toggle, .vs-hero-section__text .vs-hero-section__heading.vs-heading
-
Light Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 86 66 0 54
- On text
- 1.36:1 Fail
- On white
- 13.22:1 AAA
Background, text, border · .vs-button.btn-primary.vs-button--active, .vs-button.btn-secondary.vs-button--active
-
Lavender
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 16 10 0 0
- On text
- 14.12:1 AAA
- On white
- 1.27:1 Fail
Background, border, text · .vs-mega-nav-accordion-item--level-1>.vs-accordion-item__card-header .vs-accordi, .vs-navigation-bar-menu-dropdown.vs-navigation-bar-menu-dropdown--subtle .btn.dr
-
Brown
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 90 70 42
- On text
- 2.02:1 Fail
- On white
- 8.88:1 AAA
Text, background, border · .link-danger, --bs-btn-border-color
-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 98 0 59 33
- On text
- 5.85:1 AA
- On white
- 3.07:1 AA large
Background, text, graphic · .link-success, --bs-btn-border-color
-
Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 7 67 1
- On text
- 14.80:1 AAA
- On white
- 1.21:1 Fail
Text, background, graphic · .link-warning, --bs-btn-border-color
-
Deep Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 85 66 0 39
- On text
- 1.73:1 Fail
- On white
- 10.37:1 AAA
Background, border, text · .vs-button.btn-primary:hover, .vs-button.btn-secondary:hover
-
Light Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 45 45 0 41
- On text
- 2.60:1 Fail
- On white
- 6.90:1 AA
Text, border · h4.vs-canned-search-sub-heading, .vs-icon.vs-icon--variant-tertiary
Gradients
-
linear-gradient(180deg, #ffffff26, #fff0)
-
linear-gradient(#0000 30.29%,#00000080 75%)
-
linear-gradient(270deg,#00000080,#0000)
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.
source sans pro
Aa
300
Aa
700
source sans pro
Self-hosted · weights 300, 400, 600, 700 · body, headings · shown in a stand-in if you don’t have it
Aa
400
Aa
600
evelethclean-regular
Self-hosted · weights 400, 600 · headings · shown in a stand-in if you don’t have it
Aa
400
Segoe UI
System font, or not loaded on this page · weights 400 · body · shown in a stand-in if you don’t have it
Aa
400
SFMono-Regular
System font, or not loaded on this page · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
calc(1.375rem + 1.5vw) / 1.2
weight 500
VisitScotland
Heading 2
calc(1.325rem + .9vw) / 1.2
weight 500
VisitScotland - Scotland's National Tourist Org…
Heading 3
calc(1.3rem + .6vw) / 1.2
weight 500
VisitScotland - Scotland's National Tourist Org…
Heading 4
calc(1.275rem + .3vw) / 1.2
weight 500
VisitScotland - Scotland's National Tourist Org…
Heading 5
1.25rem · 20 px / 1.2
weight 500
VisitScotland - Scotland's National Tourist Org…
Heading 6
1rem · 16 px / 1.2
weight 500
VisitScotland - Scotland's National Tourist Org…
Body
1rem · 16 px / 1.5
weight 400 · Source Sans Pro
Get all the information you need for your trip to Scotland! Discover new places to visit, find amazing things to do, pick your ideal accomm…
Paragraph
1rem · 16 px / 2
Get all the information you need for your trip to Scotland! Discover new places to visit, find amazing things to do, pick your ideal accomm…
Small
.875em · 14 px
Get all the information you need for your trip to Scotland! Discover new places to visit, find amazing things to do, pick your ideal accomm…
Button
1rem · 16 px
none
Get started
Link
1rem · 16 px
Read more about VisitScotland
Sizes in use
Most common across the site- 32pxline .03125em · 7 rules
- 24pxline .0416667em · 6 rules
- 23pxline 1.2 · 5 rules
- 20pxline 1.2 · 27 rules
- 18px17 rules
- 16pxline 1.5 · 61 rules
- 14pxline 1.3 · 51 rules
- 12pxline 0 · 17 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
.vs-global-menu__languages .btn-primary.dropdown-toggle · #5B2487
Link
Read our latest news today.
a · #1F49D6
Corner radius
- .25rem · 26×
- 1000rem · 21×
- .5rem · 9×
- 50% · 6×
- .75rem · 5×
- 1rem · 5×
Shadows
- 0 1px 2px #0000004d,0 1px 3px 1px #00000026
- 0 0 0 2px #fff,0 0 0 4px #3369ff
- 0 0 0 2px #3369ff
- 0 0 0 .25rem #0d6efd40
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Content widths (max-width)
1320 px
1140 px
960 px
720 px
540 px
360 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 72 characters. Google usually cuts titles near 60, so the end may not show in results.
- ▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does VisitScotland use?
- VisitScotland’s website uses two typefaces: source sans pro (headings and body text), self-hosted; evelethclean-regular, self-hosted.
- What are VisitScotland’s brand colours?
- The main colours on visitscotland.com are Slate Blue (#1F49D6), Deep Midnight Blue (#200F2E), Medium Violet Red (#A8308C), Royal Blue (#3369FF), Rebecca Purple (#5B2487) and Light Midnight Blue (#112876).
- What colour is VisitScotland’s text and background?
- Body text is #200F2E on a #FFFFFF background.
- Where is VisitScotland’s logo from?
- The logo shown in this guide was found on visitscotland.com’s homepage. For official logo files and usage rules, check VisitScotland’s own brand or press page.
- Is this VisitScotland’s official style guide?
- No. SiteStyleGuide made it from visitscotland.com’s public web pages on 27 October 2026, and isn’t affiliated with VisitScotland. 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
visitscotland-com-tokens.css
/* visitscotland.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/visitscotland.com) */
:root {
/* Colours */
--text: #200F2E;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-off-white: #E9E9E9;
--colour-deep-cool-off-white: #E5E5F0;
--colour-light-cool-off-white: #F2F2F8;
--colour-slate-blue: #1F49D6;
--colour-deep-midnight-blue: #200F2E;
--colour-medium-violet-red: #A8308C;
--colour-royal-blue: #3369FF;
--colour-rebecca-purple: #5B2487;
--colour-light-midnight-blue: #112876;
--colour-lavender: #D6E5FF;
--colour-brown: #940F2C;
--colour-medium-sea-green: #03AA46;
--colour-yellow: #FDEC53;
--colour-deep-slate-blue: #17359C;
--colour-light-slate-blue: #535396;
--gradient-1: linear-gradient(180deg, #ffffff26, #fff0);
--gradient-2: linear-gradient(#0000 30.29%,#00000080 75%);
--gradient-3: linear-gradient(270deg,#00000080,#0000);
/* Typefaces */
--font-body: 'Source Sans Pro', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Helvetica Neue';
--font-headings: 'Source Sans Pro', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Helvetica Neue';
--font-other: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New';
/* Type scale */
--text-h1: calc(1.375rem + 1.5vw);
--leading-h1: 1.2;
--text-h2: calc(1.325rem + .9vw);
--leading-h2: 1.2;
--text-h3: calc(1.3rem + .6vw);
--leading-h3: 1.2;
--text-h4: calc(1.275rem + .3vw);
--leading-h4: 1.2;
--text-h5: 1.25rem;
--leading-h5: 1.2;
--text-h6: 1rem;
--leading-h6: 1.2;
--text-body: 1rem;
--leading-body: 1.5;
--text-p: 1rem;
--leading-p: 2;
--text-small: .875em;
--text-button: 1rem;
--text-a: 1rem;
/* Shape */
--radius-1: .25rem;
--radius-2: 1000rem;
--radius-3: .5rem;
--radius-4: 50%;
--radius-5: .75rem;
--radius-6: 1rem;
}
{
"site": "visitscotland.com",
"source": "https://sitestyleguide.com/visitscotland.com",
"text": "#200F2E",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Off White",
"hex": "#E9E9E9",
"rgb": [
233,
233,
233
]
},
{
"name": "Deep Cool Off White",
"hex": "#E5E5F0",
"rgb": [
229,
229,
240
]
},
{
"name": "Light Cool Off White",
"hex": "#F2F2F8",
"rgb": [
242,
242,
248
]
},
{
"name": "Slate Blue",
"hex": "#1F49D6",
"rgb": [
31,
73,
214
]
},
{
"name": "Deep Midnight Blue",
"hex": "#200F2E",
"rgb": [
32,
15,
46
]
},
{
"name": "Medium Violet Red",
"hex": "#A8308C",
"rgb": [
168,
48,
140
]
},
{
"name": "Royal Blue",
"hex": "#3369FF",
"rgb": [
51,
105,
255
]
},
{
"name": "Rebecca Purple",
"hex": "#5B2487",
"rgb": [
91,
36,
135
]
},
{
"name": "Light Midnight Blue",
"hex": "#112876",
"rgb": [
17,
40,
118
]
},
{
"name": "Lavender",
"hex": "#D6E5FF",
"rgb": [
214,
229,
255
]
},
{
"name": "Brown",
"hex": "#940F2C",
"rgb": [
148,
15,
44
]
},
{
"name": "Medium Sea Green",
"hex": "#03AA46",
"rgb": [
3,
170,
70
]
},
{
"name": "Yellow",
"hex": "#FDEC53",
"rgb": [
253,
236,
83
]
},
{
"name": "Deep Slate Blue",
"hex": "#17359C",
"rgb": [
23,
53,
156
]
},
{
"name": "Light Slate Blue",
"hex": "#535396",
"rgb": [
83,
83,
150
]
}
],
"fonts": [
{
"name": "source sans pro",
"stack": "Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
"weights": [
300,
400,
600,
700
],
"source": "Self-hosted"
},
{
"name": "evelethclean-regular",
"stack": "evelethclean-regular, sans-serif, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
"weights": [
400,
600
],
"source": "Self-hosted"
},
{
"name": "Segoe UI",
"stack": "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
"weights": [
400
],
"source": "System font, or not loaded on this page"
},
{
"name": "SFMono-Regular",
"stack": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
"weights": [],
"source": "System font, or not loaded on this page"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run visitscotland.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/visitscotland.com" title="VisitScotland 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 VisitScotland’s
Captured from visitscotland.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by VisitScotland; this guide describes the public website for reference.