Digg
digg.com · 1 day ago
SaveUnofficial A style guide made by SiteStyleGuide from webroot.com’s public web pages. Not affiliated with or endorsed by Webroot. The real site is webroot.com ↗
Unofficial style guide
Webrootstyle guide
Webroot’s website (webroot.com) uses Inter var for its headings and body text. Its palette is led by Light Royal Blue (#0066FF), Black (#101C2F) and Light Slate Blue (#3F4D62), with #3F4D62 text on #FFFFFF. Captured from the live site on 23 October 2026.
- Website
- webroot.com
- Typefaces
- Inter var, Inter
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 23 Oct 2026 · added by @sitestyleguide
https://www.webroot.com/
Screenshot
webroot.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
- Cybersecurity & Threat Intelligence Services | Webroot
- ● 54 / 60 characters
- Meta description
- Missing
- ▲ 0 / 160 characters
- Site name
- Cybersecurity & Threat Intelligence Services | Webroot
- og:title
- Cybersecurity & Threat Intelligence Services | Webroot
- Language
- en
In search results
Cybersecurity & Threat Intelligence Services | Webroothttps://www.webroot.com/
Cybersecurity & Threat Intelligence Services | Webroot
When shared
webroot.com
Cybersecurity & Threat Intelligence Services | Webroot
Logo & favicons
Found as: schema.org logo. SVG, 435 × 81.
Logo
On white
On black
On Light Royal Blue
Favicons
6 found-
512 px · PNG
manifest
-
192 px · PNG
manifest
-
180 px · PNG
apple-touch-icon
-
48 px · ICO icon
-
32 px · PNG
icon
-
16 px · PNG
icon
Cybersecurity & Threat Intelligence Services | Webroot
Light browser tab
Cybersecurity & Threat Intelligence Services | Webroot
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 (#3F4D62) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 31.9%
- Light Royal Blue 13.1%
- Cool Off White 9.9%
- Black 6.9%
- Light Slate Blue 6.9%
- Black 5.7%
- Cool Near Black 4.3%
- Orange 3.9%
- Deep Royal Blue 2.7%
- Deep Slate Blue 2.6%
- Dark Green 2.2%
- Fire Brick 2.1%
- Dark Violet 2%
- Aqua 2%
- Medium Violet Red 2%
- Navy 2%
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
- 8.57:1 AAA
- On white
- —
Text, background, border · .btn-outline-light, body
-
Cool Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 3 2 0 6
- On text
- 7.11:1 AAA
- On white
- 1.21:1 Fail
Background, border, text · .btn-secondary.disabled, .nav-slider-bar
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 2.45:1 Fail
- On white
- 21.00:1 AAA
Text, background, border · .section-pattern-hero-gr-dark:before, inline style on <p>
-
Cool Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 20 10 0 84
- On text
- 1.80:1 Fail
- On white
- 15.43:1 AAA
Text, background · .btn-neonteal, .btn-neonteal.disabled
Colours
Brand colours and accents, most used first-
Light Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 60 0 0
- On text
- 1.77:1 Fail
- On white
- 4.83:1 AA
Background, text, border · .btn-primary, .btn-primary.disabled
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 66 40 0 82
- On text
- 1.99:1 Fail
- On white
- 17.08:1 AAA
Text, background, border · .btn-dark, .btn-dark.disabled
-
Light Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 36 21 0 62
- On text
- —
- On white
- 8.57:1 AAA
Text, background, border · .btn-secondary, .btn-secondary.disabled
-
Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 31 88 2
- On text
- 4.52:1 AA
- On white
- 1.90:1 Fail
Background, text, border · .btn-gold, .btn-gold.disabled
-
Deep Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 99 59 0 27
- On text
- 1.12:1 Fail
- On white
- 7.63:1 AAA
Background, border · .btn-primary-gr, .text-primary-gr
-
Deep Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 49 29 0 70
- On text
- 1.43:1 Fail
- On white
- 12.22:1 AAA
Text, background, border · .btn-outline-light.disabled, .sitenav .navbar-toggler-line
-
Dark Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 79 0 79 60
- On text
- 1.20:1 Fail
- On white
- 7.13:1 AAA
Background, text, border · .btn-success, .btn-success.disabled
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 90 97 31
- On text
- 1.21:1 Fail
- On white
- 7.10:1 AAA
Background, text, border · .btn-danger, .btn-danger.disabled
-
Dark Violet
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 23 100 0 29
- On text
- 1.14:1 Fail
- On white
- 7.55:1 AAA
Background, text, border · .btn-ultraviolet, .btn-ultraviolet.disabled
-
Aqua
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 0 10
- On text
- 5.50:1 AA
- On white
- 1.56:1 Fail
Background, text, border · .btn-neonteal, .btn-neonteal.disabled
-
Medium Violet Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 90 41 13
- On text
- 1.87:1 Fail
- On white
- 4.59:1 AA
Background, text, border · .btn-fuschia, .btn-fuschia.disabled
-
Navy
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 100 0 60
- On text
- 2.05:1 Fail
- On white
- 17.62:1 AAA
Background, border · .btn-primary-gr, .text-primary-gr
Gradients
-
linear-gradient(135deg,#024cbb 12%,#006 47%,#006 63%,#024cbb 88%)
-
linear-gradient(75deg,#0b1328 55.48%,#27364c)
-
linear-gradient(180deg,hsla(0,0%,4%,0),#0a0a0a 30%,#0a0a0a 70%,hsla(0,0%,4%,0))
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.
Inter var
Aa
100
Aa
900
Inter var
Self-hosted · weights 100, 300, 400, 500, 600, 700, 900 · body, headings · shown in a stand-in if you don’t have it
Aa
100
Aa
900
Inter
Self-hosted · weights 100, 200, 300, 400, 500, 600, 700, 800, 900 · headings, body · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
40px / 0.8em
weight 800
Webroot
Heading 2
2.125rem · 34 px / 1.23529
weight 800
Cybersecurity & Threat Intelligence Services | …
Heading 3
1.75rem · 28 px / 1.14286
weight 800
Cybersecurity & Threat Intelligence Services | …
Heading 4
1.5rem · 24 px / 1.25
weight 700
Cybersecurity & Threat Intelligence Services | …
Heading 5
1.125rem · 18 px / 1.33333
weight 700
Cybersecurity & Threat Intelligence Services | …
Heading 6
1rem · 16 px / 1.5
weight 600
Cybersecurity & Threat Intelligence Services | …
Body
1rem · 16 px / 1.5
weight 300 · Inter var
The quick brown fox jumps over the lazy dog.
Small
80%
weight 400
The quick brown fox jumps over the lazy dog.
Button
.9rem · 14 px
weight 500 · none
Get started
Link
1rem · 16 px
Read more about Webroot
Sizes in use
Most common across the site- 32pxline 1.32 · 5 rules
- 24pxline 1.25 · 15 rules
- 20pxline 1 · 18 rules
- 18pxline 1.33333 · 20 rules
- 16pxline 1.5 · 38 rules
- 15pxline 168% · 11 rules
- 14pxline 1.5 · 30 rules
- 12pxline 0 · 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
Button
Get started
.btn-close-custom · #2D6B2D · radius 50%
Link
Read our latest news today.
a · #0066FF
Corner radius
- 1rem · 45×
- .5rem · 39×
- 50% · 17×
- .25rem · 12×
- 100px · 6×
- 100% · 5×
Shadows
- 0 10px 30px rgba(16,28,47,.08),0 8px 22px rgba(16,28,47,.06),0 5px 10px rgba(16,28,47,.04)
- 0 0 0 .2rem rgba(0,102,255,.5)
- 0 0 0 .2rem rgba(250,173,31,.5)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
576
720
767
768
967
968
1200
1376
On a scale of 0 to 1440 px.
Content widths (max-width)
1376 px
1140 px
900 px
524 px
348 px
300 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 meta description, so search engines will pick text from the page.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Webroot use?
- Webroot’s website uses two typefaces: Inter var (headings and body text), self-hosted; Inter, self-hosted.
- What are Webroot’s brand colours?
- The main colours on webroot.com are Light Royal Blue (#0066FF), Black (#101C2F), Light Slate Blue (#3F4D62), Orange (#FAAD1F), Deep Royal Blue (#024CBB) and Deep Slate Blue (#27364C).
- What colour is Webroot’s text and background?
- Body text is #3F4D62 on a #FFFFFF background.
- Where is Webroot’s logo from?
- The logo shown in this guide was found on webroot.com’s homepage. For official logo files and usage rules, check Webroot’s own brand or press page.
- Is this Webroot’s official style guide?
- No. SiteStyleGuide made it from webroot.com’s public web pages on 23 October 2026, and isn’t affiliated with Webroot. 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
webroot-com-tokens.css
/* webroot.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/webroot.com) */
:root {
/* Colours */
--text: #3F4D62;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-cool-off-white: #E7EAEF;
--colour-black: #000000;
--colour-cool-near-black: #212529;
--colour-light-royal-blue: #0066FF;
--colour-black-2: #101C2F;
--colour-light-slate-blue: #3F4D62;
--colour-orange: #FAAD1F;
--colour-deep-royal-blue: #024CBB;
--colour-deep-slate-blue: #27364C;
--colour-dark-green: #156615;
--colour-fire-brick: #B11206;
--colour-dark-violet: #8C00B5;
--colour-aqua: #00E6E6;
--colour-medium-violet-red: #DF1683;
--colour-navy: #000066;
--gradient-1: linear-gradient(135deg,#024cbb 12%,#006 47%,#006 63%,#024cbb 88%);
--gradient-2: linear-gradient(75deg,#0b1328 55.48%,#27364c);
--gradient-3: linear-gradient(180deg,hsla(0,0%,4%,0),#0a0a0a 30%,#0a0a0a 70%,hsla(0,0%,4%,0));
/* Typefaces */
--font-body: 'Inter var', sans-serif;
--font-headings: 'Inter var', sans-serif;
/* Type scale */
--text-h1: 40px;
--leading-h1: 0.8em;
--text-h2: 2.125rem;
--leading-h2: 1.23529;
--text-h3: 1.75rem;
--leading-h3: 1.14286;
--text-h4: 1.5rem;
--leading-h4: 1.25;
--text-h5: 1.125rem;
--leading-h5: 1.33333;
--text-h6: 1rem;
--leading-h6: 1.5;
--text-body: 1rem;
--leading-body: 1.5;
--text-small: 80%;
--text-button: .9rem;
--text-a: 1rem;
/* Shape */
--radius-1: 1rem;
--radius-2: .5rem;
--radius-3: 50%;
--radius-4: .25rem;
--radius-5: 100px;
--radius-6: 100%;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 576px;
--breakpoint-2: 720px;
--breakpoint-3: 767px;
--breakpoint-4: 768px;
--breakpoint-5: 967px;
--breakpoint-6: 968px;
--breakpoint-7: 1200px;
--breakpoint-8: 1376px;
--max-width-1: 1376px;
--max-width-2: 1140px;
--max-width-3: 900px;
--max-width-4: 524px;
--max-width-5: 348px;
--max-width-6: 300px;
}
{
"site": "webroot.com",
"source": "https://sitestyleguide.com/webroot.com",
"text": "#3F4D62",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Cool Off White",
"hex": "#E7EAEF",
"rgb": [
231,
234,
239
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Cool Near Black",
"hex": "#212529",
"rgb": [
33,
37,
41
]
},
{
"name": "Light Royal Blue",
"hex": "#0066FF",
"rgb": [
0,
102,
255
]
},
{
"name": "Black",
"hex": "#101C2F",
"rgb": [
16,
28,
47
]
},
{
"name": "Light Slate Blue",
"hex": "#3F4D62",
"rgb": [
63,
77,
98
]
},
{
"name": "Orange",
"hex": "#FAAD1F",
"rgb": [
250,
173,
31
]
},
{
"name": "Deep Royal Blue",
"hex": "#024CBB",
"rgb": [
2,
76,
187
]
},
{
"name": "Deep Slate Blue",
"hex": "#27364C",
"rgb": [
39,
54,
76
]
},
{
"name": "Dark Green",
"hex": "#156615",
"rgb": [
21,
102,
21
]
},
{
"name": "Fire Brick",
"hex": "#B11206",
"rgb": [
177,
18,
6
]
},
{
"name": "Dark Violet",
"hex": "#8C00B5",
"rgb": [
140,
0,
181
]
},
{
"name": "Aqua",
"hex": "#00E6E6",
"rgb": [
0,
230,
230
]
},
{
"name": "Medium Violet Red",
"hex": "#DF1683",
"rgb": [
223,
22,
131
]
},
{
"name": "Navy",
"hex": "#000066",
"rgb": [
0,
0,
102
]
}
],
"fonts": [
{
"name": "Inter var",
"stack": "\"Inter var\", sans-serif",
"weights": [
100,
300,
400,
500,
600,
700,
900
],
"source": "Self-hosted"
},
{
"name": "Inter",
"stack": "Inter",
"weights": [
100,
200,
300,
400,
500,
600,
700,
800,
900
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run webroot.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/webroot.com" title="Webroot 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 Webroot’s
CTV News
ctvnews.ca · 5 days ago
Save
WeTransfer
we.tl · 3 days ago
Save
Open Broadcaster Software
obsproject.com · 4 days ago
Save
Captured from webroot.com on 23 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Webroot; this guide describes the public website for reference.