Open Broadcaster Software
obsproject.com · 4 days ago
SaveUnofficial A style guide made by SiteStyleGuide from zscaler.com’s public web pages. Not affiliated with or endorsed by zscaler.com. The real site is zscaler.com ↗
Unofficial style guide
zscaler.comstyle guide
zscaler.com’s website (zscaler.com) uses GTHaptikFont for its headings and body text. Its palette is led by Royal Blue (#256CF7), Medium Spring Green (#6BFFB3) and Deep Midnight Blue (#001744), with #323232 text on #FFFFFF. Captured from the live site on 25 October 2026.
- Website
- zscaler.com
- Typefaces
- GTHaptikFont, DM Mono
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 25 Oct 2026 · added by @sitestyleguide
https://www.zscaler.com/
Screenshot
zscaler.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
- Leading Cloud Enterprise Security Provider for Zero Trust
- ● 57 / 60 characters
- Meta description
- Zscaler is a leading cloud enterprise security provider helping global businesses adopt zero trust for secure digital transformation.
- ● 133 / 160 characters
- og:title
- Leading Cloud Enterprise Security Provider for Zero Trust
- og:description
- Zscaler is a leading cloud enterprise security provider helping global businesses adopt zero trust for secure digital transformation.
- Language
- en
- Theme colour
- #ffffff
In search results
zscaler.comhttps://www.zscaler.com/
Leading Cloud Enterprise Security Provider for Zero Trust
Zscaler is a leading cloud enterprise security provider helping global businesses adopt zero trust for secure digital transformation.
When shared
zscaler.com
Leading Cloud Enterprise Security Provider for Zero Trust
Zscaler is a leading cloud enterprise security provider helping global businesses adopt zero trust for secure…
Logo & favicons
Found as: schema.org logo. SVG, 208 × 43.
Logo
On white
On black
On Royal Blue
Favicons
4 found-
180 px · PNG
apple-touch-icon
-
32 px · SVG
mask-icon
-
32 px · ICO icon
-
16 px · ICO icon
Leading Cloud Enterprise Security Provider for Zero Trust
Light browser tab
Leading Cloud Enterprise Security Provider for Zero Trust
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 (#323232) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 20.9%
- Royal Blue 17.7%
- Medium Spring Green 11.5%
- Deep Midnight Blue 10.4%
- Fuchsia 8.1%
- Charcoal 7%
- Midnight Blue 3.2%
- Light Midnight Blue 2.9%
- Dark Slate Blue 2.9%
- Off White 2.6%
- Sky Blue 2.6%
- Cool Off White 2.3%
- Dark Grey 2.1%
- Light Cyan 1.9%
- Crimson 1.9%
- Slate Grey 1.9%
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.82:1 AAA
- On white
- —
Text, background, graphic · .zero-trust-blueprint-app .btn-outline-secondary, .\[\&\>h6\]\:text-white>h6
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 80
- On text
- —
- On white
- 12.82:1 AAA
Text, background · .not-found__heading, .not-found__sub-heading
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 13
- On text
- 9.44:1 AAA
- On white
- 1.36:1 Fail
Border, text, background · .sidebar_root__T6sub .sidebar_copyUrlWrapper__Q3_KE, .webinar_root__fu7fl
-
Cool Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 8 4 0 2
- On text
- 11.17:1 AAA
- On white
- 1.15:1 Fail
Background, border · .not-found__code-info, .\!bg-rebrandLightBlue
Colours
Brand colours and accents, most used first-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 85 56 0 3
- On text
- 2.79:1 Fail
- On white
- 4.60:1 AA
Text, background, border · .cta_root__p0oTC.cta_btnPrimary__qhst5.cta_btnLightOutline__2qdoQ, .zero-trust-blueprint-app .btn-outline-primary
-
Medium Spring Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 58 0 30 0
- On text
- 10.12:1 AAA
- On white
- 1.27:1 Fail
Background, text, border · .cta_root__p0oTC.cta_btnPrimary__qhst5.cta_btnLight__sa8LN, .zero-trust-blueprint-app .btn-solid-green
-
Deep Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 66 0 73
- On text
- 1.36:1 Fail
- On white
- 17.41:1 AAA
Text, background, graphic · .typo-panel-heading, .bg-\[linear-gradient\(180deg\2c _\#00143A_0\%\2c _\#001744_100\%\)\]
-
Fuchsia
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 100 11 0
- On text
- 3.85:1 AA large
- On white
- 3.33:1 AA large
Text, background, border · .cta_root__p0oTC.cta_btnPrimary__qhst5.cta_btnDark__4y0Sk, .cta_root__p0oTC.cta_btnPrimary__qhst5.cta_btnDark__4y0Sk:hover
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 89 66 0 52
- On text
- 1.01:1 Fail
- On white
- 12.89:1 AAA
Text, graphic, border · .zero-trust-blueprint-app .btn-outline-darkblue, .zero-trust-blueprint-app .btn-solid-green
-
Light Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 67 45 0 64
- On text
- 1.03:1 Fail
- On white
- 12.48:1 AAA
Background, text, border · .bg-navy-blue-80, .bg-\[\#172d56\]
-
Dark Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 51 34 0 59
- On text
- 1.34:1 Fail
- On white
- 9.56:1 AAA
Border, background, text · .bg-\[\#334569\], .bg-navyBlue-80
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 93 17 0 0
- On text
- 7.26:1 AAA
- On white
- 1.77:1 Fail
Background, text, border · .\!bg-rebrandSkyBlue, .bg-rebrandSkyBlue
-
Dark Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 15 10 0 29
- On text
- 5.00:1 AA
- On white
- 2.57:1 Fail
Text, graphic · .marketoForm_root__WvsoG.marketoForm_darkMode__DpmTv .mktoFieldWrap select.mktoF, .marketoForm_root__WvsoG.marketoForm_darkMode__DpmTv .mktoFieldWrap input[type=e
-
Light Cyan
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 18 4 0 0
- On text
- 11.18:1 AAA
- On white
- 1.15:1 Fail
Background · .node-blog .accordionSubtitle a:not([href^=https]), .node-blog .link-highlight a:not([href^=https])
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 69 74 20
- On text
- 2.67:1 Fail
- On white
- 4.79:1 AA
Text, background, border · .introHeroModule_root__E8hVJ .introHeroModule_tag--red__BvN8j, .announcementBanner_root___VjjC.announcementBanner_RED__W4YyZ
-
Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 29 19 0 44
- On text
- 2.72:1 Fail
- On white
- 4.71:1 AA
Text, graphic · .marketoForm_root__WvsoG.marketoForm_variant_default__AUsmn .mktoFieldWrap input, .\!text-navyBlue-60
Gradients
-
linear-gradient(#d0f6ff,#d0f6ff)
-
linear-gradient(to top,)
-
linear-gradient(180deg,#001744 10%,#256CF2 60%,#25D1F7)
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.
GTHaptikFont
Aa
400
Aa
700
GTHaptikFont
Self-hosted · weights 400, 500, 700 · body · shown in a stand-in if you don’t have it
Aa
400
Aa
500
DM Mono
Self-hosted · weights 400, 500 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS · root 10 px
Heading 1
4rem · 40 px / 100%
weight 500
zscaler.com
Heading 2
3.6rem · 36 px / 120%
weight 500
Leading Cloud Enterprise Security Provider for …
Heading 3
2.4rem · 24 px / 120%
weight 500
Leading Cloud Enterprise Security Provider for …
Heading 4
2rem · 20 px / 120%
weight 500
Leading Cloud Enterprise Security Provider for …
Heading 5
1.8rem · 18 px / 120%
weight 500 · uppercase
Leading Cloud Enterprise Security Provider for …
Heading 6
1.6rem · 16 px / 100%
weight 500
Leading Cloud Enterprise Security Provider for …
Paragraph
1.8rem · 18 px / 150%
weight 400
Zscaler is a leading cloud enterprise security provider helping global businesses adopt zero trust for secure digital transformation.
Small
80%
Zscaler is a leading cloud enterprise security provider helping global businesses adopt zero trust for secure digital transformation.
Button
100%
none
Get started
Link
1.6rem · 16 px
weight 500
Read more about zscaler.com
Sizes in use
Most common across the site- 26pxline 100% · 8 rules
- 24pxline 125% · 21 rules
- 20pxline 125% · 11 rules
- 18pxline 150% · 15 rules
- 16pxline 150% · 41 rules
- 14pxline 150% · 49 rules
- 12pxline 125% · 25 rules
- 10pxline normal · 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
.cta_root__p0oTC.cta_button__sbqZ5 · #2368F5
Corner radius
- 50% · 5×
- 1rem · 5×
- .5rem · 5×
- 2rem · 3×
- 20px · 3×
- 10px · 2×
Shadows
- 0 0 #0000,0 0 #0000,0 0 #0000
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
390
600
768
1024
1100
1280
1440
1920
On a scale of 0 to 1920 px.
Content widths (max-width)
1440 px
1280 px
1024 px
768 px
600 px
390 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 57 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 zscaler.com use?
- zscaler.com’s website uses two typefaces: GTHaptikFont (headings and body text), self-hosted; DM Mono, self-hosted.
- What are zscaler.com’s brand colours?
- The main colours on zscaler.com are Royal Blue (#256CF7), Medium Spring Green (#6BFFB3), Deep Midnight Blue (#001744), Fuchsia (#FE00E2), Midnight Blue (#0D2A7A) and Light Midnight Blue (#1E335C).
- What colour is zscaler.com’s text and background?
- Body text is #323232 on a #FFFFFF background.
- Where is zscaler.com’s logo from?
- The logo shown in this guide was found on zscaler.com’s homepage. For official logo files and usage rules, check zscaler.com’s own brand or press page.
- Is this zscaler.com’s official style guide?
- No. SiteStyleGuide made it from zscaler.com’s public web pages on 25 October 2026, and isn’t affiliated with zscaler.com. 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
zscaler-com-tokens.css
/* zscaler.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/zscaler.com) */
:root {
/* Colours */
--text: #323232;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-charcoal: #323232;
--colour-off-white: #DDDDDD;
--colour-cool-off-white: #E5F1FA;
--colour-royal-blue: #256CF7;
--colour-medium-spring-green: #6BFFB3;
--colour-deep-midnight-blue: #001744;
--colour-fuchsia: #FE00E2;
--colour-midnight-blue: #0D2A7A;
--colour-light-midnight-blue: #1E335C;
--colour-dark-slate-blue: #334569;
--colour-sky-blue: #12D4FF;
--colour-dark-grey: #99A2B4;
--colour-light-cyan: #D0F6FF;
--colour-crimson: #CD4035;
--colour-slate-grey: #66748F;
--gradient-1: linear-gradient(#d0f6ff,#d0f6ff);
--gradient-2: linear-gradient(to top,);
--gradient-3: linear-gradient(180deg,#001744 10%,#256CF2 60%,#25D1F7);
/* Typefaces */
--font-body: 'GTHaptikFont', 'GTHaptikFont Fallback', sans-serif;
--font-other: 'DM Mono', 'DM Mono Fallback';
/* Type scale */
--text-h1: 4rem;
--leading-h1: 100%;
--text-h2: 3.6rem;
--leading-h2: 120%;
--text-h3: 2.4rem;
--leading-h3: 120%;
--text-h4: 2rem;
--leading-h4: 120%;
--text-h5: 1.8rem;
--leading-h5: 120%;
--text-h6: 1.6rem;
--leading-h6: 100%;
--text-p: 1.8rem;
--leading-p: 150%;
--text-small: 80%;
--text-button: 100%;
--text-a: 1.6rem;
/* Shape */
--radius-1: 50%;
--radius-2: 1rem;
--radius-3: .5rem;
--radius-4: 2rem;
--radius-5: 20px;
--radius-6: 10px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 390px;
--breakpoint-2: 600px;
--breakpoint-3: 768px;
--breakpoint-4: 1024px;
--breakpoint-5: 1100px;
--breakpoint-6: 1280px;
--breakpoint-7: 1440px;
--breakpoint-8: 1920px;
--max-width-1: 1440px;
--max-width-2: 1280px;
--max-width-3: 1024px;
--max-width-4: 768px;
--max-width-5: 600px;
--max-width-6: 390px;
}
{
"site": "zscaler.com",
"source": "https://sitestyleguide.com/zscaler.com",
"text": "#323232",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Charcoal",
"hex": "#323232",
"rgb": [
50,
50,
50
]
},
{
"name": "Off White",
"hex": "#DDDDDD",
"rgb": [
221,
221,
221
]
},
{
"name": "Cool Off White",
"hex": "#E5F1FA",
"rgb": [
229,
241,
250
]
},
{
"name": "Royal Blue",
"hex": "#256CF7",
"rgb": [
37,
108,
247
]
},
{
"name": "Medium Spring Green",
"hex": "#6BFFB3",
"rgb": [
107,
255,
179
]
},
{
"name": "Deep Midnight Blue",
"hex": "#001744",
"rgb": [
0,
23,
68
]
},
{
"name": "Fuchsia",
"hex": "#FE00E2",
"rgb": [
254,
0,
226
]
},
{
"name": "Midnight Blue",
"hex": "#0D2A7A",
"rgb": [
13,
42,
122
]
},
{
"name": "Light Midnight Blue",
"hex": "#1E335C",
"rgb": [
30,
51,
92
]
},
{
"name": "Dark Slate Blue",
"hex": "#334569",
"rgb": [
51,
69,
105
]
},
{
"name": "Sky Blue",
"hex": "#12D4FF",
"rgb": [
18,
212,
255
]
},
{
"name": "Dark Grey",
"hex": "#99A2B4",
"rgb": [
153,
162,
180
]
},
{
"name": "Light Cyan",
"hex": "#D0F6FF",
"rgb": [
208,
246,
255
]
},
{
"name": "Crimson",
"hex": "#CD4035",
"rgb": [
205,
64,
53
]
},
{
"name": "Slate Grey",
"hex": "#66748F",
"rgb": [
102,
116,
143
]
}
],
"fonts": [
{
"name": "GTHaptikFont",
"stack": "'GTHaptikFont', 'GTHaptikFont Fallback', sans-serif",
"weights": [
400,
500,
700
],
"source": "Self-hosted"
},
{
"name": "DM Mono",
"stack": "'DM Mono', 'DM Mono Fallback'",
"weights": [
400,
500
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run zscaler.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/zscaler.com" title="zscaler.com 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 zscaler.com’s
Electronic Arts Home Page
ea.com · 3 days ago
Save
WeTransfer
we.tl · 3 days ago
Save
Digg
digg.com · 1 day ago
Save
Captured from zscaler.com on 25 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by zscaler.com; this guide describes the public website for reference.