agoda.com
agoda.com · set in Helvetica Neue
SaveUnofficial A style guide made by SiteStyleGuide from youglish.com’s public web pages. Not affiliated with or endorsed by YouGlish. The real site is youglish.com ↗
Unofficial style guide
YouGlishstyle guide
YouGlish’s website (youglish.com) uses Helvetica Neue for its headings and body text. Its palette is led by Red (#FF0000), Steel Blue (#337AB7) and Indian Red (#DE5B5B), with #004373 text on #FFFFFF. Captured from the live site on 31 October 2026.
- Website
- youglish.com
- Typefaces
- Helvetica Neue, Arial, times
- Palette
- 4 neutrals, 12 colours
- Captured
- 31 Oct 2026 · added by @sitestyleguide
https://youglish.com/
Screenshot
youglish.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
- How to Pronounce English Like a Native | YouGlish
- ● 49 / 60 characters
- Meta description
- Master English Pronunciation Like a Native! YouGlish (100M+ clips)
- ● 66 / 160 characters
- og:title
- How to Pronounce English Naturally | YouGlish
- og:description
- Struggling with English pronunciation? YouGlish uses real people speaking real English to help you master tricky sounds. No more dictionary confusion!
- Language
- en
In search results
YouGlishhttps://youglish.com/
How to Pronounce English Like a Native | YouGlish
Master English Pronunciation Like a Native! YouGlish (100M+ clips)
When shared
youglish.com
How to Pronounce English Naturally | YouGlish
Struggling with English pronunciation? YouGlish uses real people speaking real English to help you master tri…
Logo & favicons
Found as: image in the header. PNG, 40 × 40.
Logo
On white
On black
On Red
Favicons
2 found-
-
16 px · PNG
icon
How to Pronounce English Like a Native | YouGlish
Light browser tab
How to Pronounce English Like a Native | YouGlish
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 (#004373) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 39%
- Off White 12.1%
- Near Black 10.8%
- Charcoal 6.9%
- Red 5.9%
- Steel Blue 4.8%
- Indian Red 4.3%
- Deep Slate Blue 3.8%
- Sky Blue 2.3%
- Deep Steel Blue 1.6%
- Medium Sea Green 1.6%
- Orange 1.6%
- Light Steel Blue 1.5%
- Green 1.3%
- Light Slate Blue 1.3%
- Yellow 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.24:1 AAA
- On white
- —
Text, background, border · body, .btn-default
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 10
- On text
- 8.21:1 AAA
- On white
- 1.25:1 Fail
Background, border · .partnereg, .theme_light #ac_container
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 93
- On text
- 1.84:1 Fail
- On white
- 18.88:1 AAA
Background, text, border · .navbar-default, header>.navbar.navbar-preheader .navbar-toggle
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 80
- On text
- 1.23:1 Fail
- On white
- 12.63:1 AAA
Text, background, border · .index h1, .btn-default
Colours
Brand colours and accents, most used first-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 100 100 0
- On text
- 2.56:1 Fail
- On white
- 4.00:1 AA large
Text, background, border · .lmsgerr, .vs-unit.selected-video .pos
-
Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 72 33 0 28
- On text
- 2.25:1 Fail
- On white
- 4.56:1 AA
Background, text, border · .btn-primary, .btn-link
-
Indian Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 59 59 13
- On text
- 2.81:1 Fail
- On white
- 3.65:1 AA large
Background, text · .wrd_title, .btn-danger
-
Deep Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 42 0 55
- On text
- —
- On white
- 10.24:1 AAA
Text · body, .GenDlg h1
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 59 14 0 13
- On text
- 4.90:1 AA
- On white
- 2.09:1 Fail
Background, border · .btn-info, .btn-info.disabled.focus
-
Deep Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 66 22 0 44
- On text
- 1.88:1 Fail
- On white
- 5.46:1 AA
Text · .panel-info>.panel-heading, .submenu
-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 50 0 50 28
- On text
- 4.13:1 AA large
- On white
- 2.48:1 Fail
Background · .btn-success, .btn-success.disabled.focus
-
Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 28 68 6
- On text
- 5.26:1 AA
- On white
- 1.95:1 Fail
Background · .btn-warning, .btn-warning.disabled.focus
-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 52 0 0
- On text
- 2.57:1 Fail
- On white
- 3.98:1 AA large
Background, border · .btn_acc.active
-
Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 100 50
- On text
- 1.99:1 Fail
- On white
- 5.14:1 AA
Text · .extended_search .ctrl.on, .green
-
Light Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 72 34 0 55
- On text
- 1.16:1 Fail
- On white
- 8.84:1 AAA
Text, background, border · .btn-primary.active.focus, .btn-link:focus
-
Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 100 0
- On text
- 9.54:1 AAA
- On white
- 1.07:1 Fail
Background, text · .ac_sr_highlight, .marker
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.
Helvetica Neue
Aa
400
Helvetica Neue
System font, or not loaded on this page · weights 400 · body, headings · shown in a stand-in if you don’t have it
Aa
400
Arial
System font, or not loaded on this page · headings · shown in a stand-in if you don’t have it
Aa
400
times
System font, or not loaded on this page · headings · shown in a stand-in if you don’t have it
Aa
400
LatoLight
System font, or not loaded on this page · weights 400 · 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
32px / 1.1
weight 500 · times
YouGlish
Heading 2
30px / 1.1
weight 500
How to Pronounce English Like a Native | YouGli…
Heading 3
24px / 1.1
weight 500
How to Pronounce English Like a Native | YouGli…
Heading 4
17px / 1.58
weight 500
How to Pronounce English Like a Native | YouGli…
Heading 5
14px / 1.1
weight 500
How to Pronounce English Like a Native | YouGli…
Heading 6
12px / 1.1
weight 500
How to Pronounce English Like a Native | YouGli…
Body
14px / 1.42857143
Helvetica Neue
Master English Pronunciation Like a Native! YouGlish (100M+ clips)
Sizes in use
Most common across the site- 30px3 rules
- 20pxline 1.42857143 · 7 rules
- 18pxline 1.3333333 · 12 rules
- 16pxline 1.7 · 9 rules
- 15px4 rules
- 14pxline 1.42857143 · 15 rules
- 13pxline 1.42857143 · 4 rules
- 12pxline 1.5 · 10 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-primary · #337AB7
Link
Read our latest news today.
a · #337AB7
Corner radius
- 4px · 9×
- 6px · 8×
- 5px · 6×
- 3px · 3×
- 15px · 3×
- 12px · 2×
Shadows
- 0 1px 1px rgba(0,0,0,.05)
- 0 3px 9px rgba(0,0,0,.5)
- 0 5px 15px rgba(0,0,0,.5)
- 0 2px 4px 0 rgba(0,0,0,.12)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
466
700
767
768
991
992
1199
1200
On a scale of 0 to 1440 px.
Content widths (max-width)
500 px
300 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 49 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 YouGlish use?
- YouGlish’s website uses one typeface: Helvetica Neue (headings and body text), a system font.
- What are YouGlish’s brand colours?
- The main colours on youglish.com are Red (#FF0000), Steel Blue (#337AB7), Indian Red (#DE5B5B), Deep Slate Blue (#004373), Sky Blue (#5BC0DE) and Deep Steel Blue (#31708F).
- What colour is YouGlish’s text and background?
- Body text is #004373 on a #FFFFFF background.
- Where is YouGlish’s logo from?
- The logo shown in this guide was found on youglish.com’s homepage. For official logo files and usage rules, check YouGlish’s own brand or press page.
- Is this YouGlish’s official style guide?
- No. SiteStyleGuide made it from youglish.com’s public web pages on 31 October 2026, and isn’t affiliated with YouGlish. 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
youglish-com-tokens.css
/* youglish.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/youglish.com) */
:root {
/* Colours */
--text: #004373;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-off-white: #E6E6E6;
--colour-near-black: #111111;
--colour-charcoal: #333333;
--colour-red: #FF0000;
--colour-steel-blue: #337AB7;
--colour-indian-red: #DE5B5B;
--colour-deep-slate-blue: #004373;
--colour-sky-blue: #5BC0DE;
--colour-deep-steel-blue: #31708F;
--colour-medium-sea-green: #5CB85C;
--colour-orange: #F0AD4E;
--colour-light-steel-blue: #007BFF;
--colour-green: #008000;
--colour-light-slate-blue: #204D74;
--colour-yellow: #FFFF00;
/* Typefaces */
--font-body: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--font-headings: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--font-other: 'LatoLight', 'Lato', 'Arial', sans-serif;
/* Type scale */
--text-h1: 32px;
--leading-h1: 1.1;
--text-h2: 30px;
--leading-h2: 1.1;
--text-h3: 24px;
--leading-h3: 1.1;
--text-h4: 17px;
--leading-h4: 1.58;
--text-h5: 14px;
--leading-h5: 1.1;
--text-h6: 12px;
--leading-h6: 1.1;
--text-body: 14px;
--leading-body: 1.42857143;
/* Shape */
--radius-1: 4px;
--radius-2: 6px;
--radius-3: 5px;
--radius-4: 3px;
--radius-5: 15px;
--radius-6: 12px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 466px;
--breakpoint-2: 700px;
--breakpoint-3: 767px;
--breakpoint-4: 768px;
--breakpoint-5: 991px;
--breakpoint-6: 992px;
--breakpoint-7: 1199px;
--breakpoint-8: 1200px;
--max-width-1: 500px;
--max-width-2: 300px;
}
{
"site": "youglish.com",
"source": "https://sitestyleguide.com/youglish.com",
"text": "#004373",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Off White",
"hex": "#E6E6E6",
"rgb": [
230,
230,
230
]
},
{
"name": "Near Black",
"hex": "#111111",
"rgb": [
17,
17,
17
]
},
{
"name": "Charcoal",
"hex": "#333333",
"rgb": [
51,
51,
51
]
},
{
"name": "Red",
"hex": "#FF0000",
"rgb": [
255,
0,
0
]
},
{
"name": "Steel Blue",
"hex": "#337AB7",
"rgb": [
51,
122,
183
]
},
{
"name": "Indian Red",
"hex": "#DE5B5B",
"rgb": [
222,
91,
91
]
},
{
"name": "Deep Slate Blue",
"hex": "#004373",
"rgb": [
0,
67,
115
]
},
{
"name": "Sky Blue",
"hex": "#5BC0DE",
"rgb": [
91,
192,
222
]
},
{
"name": "Deep Steel Blue",
"hex": "#31708F",
"rgb": [
49,
112,
143
]
},
{
"name": "Medium Sea Green",
"hex": "#5CB85C",
"rgb": [
92,
184,
92
]
},
{
"name": "Orange",
"hex": "#F0AD4E",
"rgb": [
240,
173,
78
]
},
{
"name": "Light Steel Blue",
"hex": "#007BFF",
"rgb": [
0,
123,
255
]
},
{
"name": "Green",
"hex": "#008000",
"rgb": [
0,
128,
0
]
},
{
"name": "Light Slate Blue",
"hex": "#204D74",
"rgb": [
32,
77,
116
]
},
{
"name": "Yellow",
"hex": "#FFFF00",
"rgb": [
255,
255,
0
]
}
],
"fonts": [
{
"name": "Helvetica Neue",
"stack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
"weights": [
400
],
"source": "System font, or not loaded on this page"
},
{
"name": "Arial",
"stack": "Arial, Tahoma",
"weights": [],
"source": "System font, or not loaded on this page"
},
{
"name": "times",
"stack": "times, Times New Roman, times-roman, georgia, serif",
"weights": [],
"source": "System font, or not loaded on this page"
},
{
"name": "LatoLight",
"stack": "LatoLight, Lato, Arial, sans-serif",
"weights": [
400
],
"source": "System font, or not loaded on this page"
},
{
"name": "Larsseit",
"stack": "Larsseit, Helvetica Neue, Helvetica, Arial, sans-serif",
"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 youglish.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/youglish.com" title="YouGlish style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in Helvetica Neue
Other websites using Helvetica Neue as their main typeface
Similar colours
Websites whose lead colour is closest to YouGlish’s
博客园
cnblogs.com · 5 days ago
Save
microdot.vision
microdot.vision · 5 days ago
Save
thetimes.com
thetimes.com · 5 days ago
Save
₽ МОСГОРКРЕДИТ
mosgorcredit.ru · 5 days ago
Save
Captured from youglish.com on 31 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by YouGlish; this guide describes the public website for reference.