DaFont
dafont.com · set in Arial
Save3Unofficial A style guide made by SiteStyleGuide from lexiconlearning.com’s public web pages. Not affiliated with or endorsed by Lexicon Learning. The real site is lexiconlearning.com ↗
Unofficial style guide
Lexicon Learningstyle guide
Lexicon Learning’s website (lexiconlearning.com) uses Arial for its headings and body text. Its palette is led by Midnight Blue (#1E293B), Blue (#0000FF) and Deep Steel Blue (#0073B1), with #1E293B text on #FFFFFF. Captured from the live site on 28 October 2026.
- Website
- lexiconlearning.com
- Typefaces
- Arial, Inter
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 28 Oct 2026 · added by @sitestyleguide
https://www.lexiconlearning.com/home/
Screenshot
lexiconlearning.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
- Lexicon Learning - Master English Vocabulary & Communication Skills
- ▲ 67 / 60 characters
- Meta description
- Transform your professional communication with AI-powered English language training. Master vocabulary, grammar, and business communication skills with our comprehensive online courses.
- ▲ 185 / 160 characters
- Language
- en
In search results
Lexicon Learninghttps://www.lexiconlearning.com/home/
Lexicon Learning - Master English Vocabulary & Communication …
Transform your professional communication with AI-powered English language training. Master vocabulary, grammar, and business communication skills with our compr…
When shared
No og:image, so no picture
lexiconlearning.com
Lexicon Learning - Master English Vocabulary & Communication Skills
Transform your professional communication with AI-powered English language training. Master vocabulary, gramm…
Logo & favicons
Found as: image linked to the homepage. PNG, 32 × 32.
Logo
On white
On black
On Midnight Blue
Favicons
2 found-
972 px · PNG
icon
-
Lexicon Learning - Master English Vocabulary & Communication Skills
Light browser tab
Lexicon Learning - Master English Vocabulary & Communication Skills
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 (#1E293B) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 44.3%
- Midnight Blue 7.4%
- Blue 5.6%
- Cool Off White 5.3%
- Charcoal 5%
- Deep Steel Blue 4.2%
- Slate Grey 4.1%
- Black 4%
- Beige 4%
- Cornflower Blue 3.7%
- Rebecca Purple 3.7%
- Light Royal Blue 2.9%
- Red 1.9%
- Light Steel Blue 1.4%
- Deep Royal Blue 1.4%
- Orange 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
- 14.63:1 AAA
- On white
- —
Background, text, border · body, .hero-title
-
Cool Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 5 2 0 0
- On text
- 13.80:1 AAA
- On white
- 1.06:1 Fail
Background · .editRelatedForm, .editRelatedRight
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 80
- On text
- 1.16:1 Fail
- On white
- 12.63:1 AAA
Text · body, .appinfo h3
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.44:1 Fail
- On white
- 21.00:1 AAA
Text · h1, .menu li .submenu
Colours
Brand colours and accents, most used first-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 49 31 0 77
- On text
- —
- On white
- 14.63:1 AAA
Text · body, .section-title
-
Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 100 0 0
- On text
- 1.70:1 Fail
- On white
- 8.59:1 AAA
Text · .dropmenu button, .dropmenu-content button
-
Deep Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 35 0 31
- On text
- 2.85:1 Fail
- On white
- 5.14:1 AA
Text · .navbar .logo h1, .appinfo h2
-
Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 28 17 0 45
- On text
- 3.07:1 AA large
- On white
- 4.76:1 AA
Text · .section-subtitle, .stat-label
-
Beige
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 2 0 11 2
- On text
- 13.52:1 AAA
- On white
- 1.08:1 Fail
Background · .relatedmodulelistForm, #relatedmoduleform > input
-
Cornflower Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 56 46 0 8
- On text
- 4.00:1 AA large
- On white
- 3.66:1 AA large
Background · .hero-section, .cta-section
-
Rebecca Purple
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 27 54 0 36
- On text
- 2.30:1 Fail
- On white
- 6.37:1 AA
Background · .hero-section, .cta-section
-
Light Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 84 58 0 8
- On text
- 2.83:1 Fail
- On white
- 5.17:1 AA
Background, text, border · .feature-card::before, .feature-icon
-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 100 100 0
- On text
- 3.66:1 AA large
- On white
- 4.00:1 AA large
Background, text · inline style on <a>, .notification .badge
-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 84 32 0 22
- On text
- 3.68:1 AA large
- On white
- 3.97:1 AA large
Background, text · .dropmenu-content button:hover, .dropmenu-content a:hover
-
Deep Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 87 64 0 15
- On text
- 2.18:1 Fail
- On white
- 6.70:1 AA
Background, text · .feature-icon, --primary-dark
-
Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 36 96 4
- On text
- 6.81:1 AA
- On white
- 2.15:1 Fail
Background · .feature-card::before, --accent-color
Gradients
-
linear-gradient(135deg, #667eea 0%, #764ba2 100%)
-
linear-gradient(45deg, #fff, #e2e8f0)
-
linear-gradient(90deg, #2563eb, #f59e0b)
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.
Arial
Aa
400
Arial
System font, or not loaded on this page · body, headings, buttons · shown in a stand-in if you don’t have it
Aa
300
Aa
800
Inter
Google Fonts · weights 300, 400, 500, 600, 700, 800 · body
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
2.4rem · 38 px
weight 700 · Arial
Lexicon Learning
Heading 2
2rem · 32 px
weight 700 · Arial
Lexicon Learning - Master English Vocabulary & …
Heading 3
1.6rem · 26 px
weight 700 · Arial
Lexicon Learning - Master English Vocabulary & …
Heading 4
—
weight 700 · Arial
Lexicon Learning - Master English Vocabulary & …
Heading 5
—
weight 700 · Arial
Lexicon Learning - Master English Vocabulary & …
Heading 6
—
weight 700 · Arial
Lexicon Learning - Master English Vocabulary & …
Body
— / 1.6
Inter
Transform your professional communication with AI-powered English language training. Master vocabulary, grammar, and business communication…
Paragraph
0.95rem · 15 px / 1.6
Arial
Transform your professional communication with AI-powered English language training. Master vocabulary, grammar, and business communication…
Button
12px
Arial
Get started
Link
14px
weight 700 · Arial
Read more about Lexicon Learning
Sizes in use
Most common across the site- 48px2 rules
- 32pxline .03125em · 5 rules
- 24pxline .04167em · 11 rules
- 20pxline .05em · 7 rules
- 18px5 rules
- 16px10 rules
- 14pxline .07143em · 4 rules
- 12pxline .08333em · 2 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-section · #667EEA
Link
Read our latest news today.
a · #4183C4
Corner radius
- 5px · 5×
- 12px · 3×
- 8px · 2×
- 45px · 2×
- 50% · 2×
- 20px · 2×
Shadows
- 0 2px 5px rgba(0, 0, 0, 0.1)
- -2px 0 5px rgba(0, 0, 0, 0.1)
- 0 1px 2px 0 rgba(0, 0, 0, 0.05)
- 0 10px 15px -3px rgba(0, 0, 0, 0.1)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
480
600
768
1080
On a scale of 0 to 1440 px.
Content widths (max-width)
1200 px
800 px
600 px
500 px
400 px
300 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 67 characters. Google usually cuts titles near 60, so the end may not show in results.
- ▲ CheckThe description is 185 characters. Search results usually show about 160.
- ▲ CheckThere is no og:image, so links shared on social media show no picture.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Lexicon Learning use?
- Lexicon Learning’s website uses two typefaces: Arial (headings and body text), a system font; Inter, google Fonts.
- What are Lexicon Learning’s brand colours?
- The main colours on lexiconlearning.com are Midnight Blue (#1E293B), Blue (#0000FF), Deep Steel Blue (#0073B1), Slate Grey (#64748B), Beige (#F3F9DD) and Cornflower Blue (#667EEA).
- What colour is Lexicon Learning’s text and background?
- Body text is #1E293B on a #FFFFFF background.
- Where is Lexicon Learning’s logo from?
- The logo shown in this guide was found on lexiconlearning.com’s homepage. For official logo files and usage rules, check Lexicon Learning’s own brand or press page.
- Is this Lexicon Learning’s official style guide?
- No. SiteStyleGuide made it from lexiconlearning.com’s public web pages on 28 October 2026, and isn’t affiliated with Lexicon Learning. 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
lexiconlearning-com-tokens.css
/* lexiconlearning.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/lexiconlearning.com) */
:root {
/* Colours */
--text: #1E293B;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-cool-off-white: #F3F9FF;
--colour-charcoal: #333333;
--colour-black: #000000;
--colour-midnight-blue: #1E293B;
--colour-blue: #0000FF;
--colour-deep-steel-blue: #0073B1;
--colour-slate-grey: #64748B;
--colour-beige: #F3F9DD;
--colour-cornflower-blue: #667EEA;
--colour-rebecca-purple: #764BA2;
--colour-light-royal-blue: #2563EB;
--colour-red: #FF0000;
--colour-light-steel-blue: #1F86C6;
--colour-deep-royal-blue: #1D4ED8;
--colour-orange: #F59E0B;
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-2: linear-gradient(45deg, #fff, #e2e8f0);
--gradient-3: linear-gradient(90deg, #2563eb, #f59e0b);
/* Typefaces */
--font-body: 'Arial', sans-serif;
--font-headings: 'Arial', sans-serif;
--font-buttons: 'Arial', sans-serif;
/* Type scale */
--text-h1: 2.4rem;
--text-h2: 2rem;
--text-h3: 1.6rem;
--text-p: 0.95rem;
--leading-p: 1.6;
--text-button: 12px;
--text-a: 14px;
/* Shape */
--radius-1: 5px;
--radius-2: 12px;
--radius-3: 8px;
--radius-4: 45px;
--radius-5: 50%;
--radius-6: 20px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 480px;
--breakpoint-2: 600px;
--breakpoint-3: 768px;
--breakpoint-4: 1080px;
--max-width-1: 1200px;
--max-width-2: 800px;
--max-width-3: 600px;
--max-width-4: 500px;
--max-width-5: 400px;
--max-width-6: 300px;
}
{
"site": "lexiconlearning.com",
"source": "https://sitestyleguide.com/lexiconlearning.com",
"text": "#1E293B",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Cool Off White",
"hex": "#F3F9FF",
"rgb": [
243,
249,
255
]
},
{
"name": "Charcoal",
"hex": "#333333",
"rgb": [
51,
51,
51
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Midnight Blue",
"hex": "#1E293B",
"rgb": [
30,
41,
59
]
},
{
"name": "Blue",
"hex": "#0000FF",
"rgb": [
0,
0,
255
]
},
{
"name": "Deep Steel Blue",
"hex": "#0073B1",
"rgb": [
0,
115,
177
]
},
{
"name": "Slate Grey",
"hex": "#64748B",
"rgb": [
100,
116,
139
]
},
{
"name": "Beige",
"hex": "#F3F9DD",
"rgb": [
243,
249,
221
]
},
{
"name": "Cornflower Blue",
"hex": "#667EEA",
"rgb": [
102,
126,
234
]
},
{
"name": "Rebecca Purple",
"hex": "#764BA2",
"rgb": [
118,
75,
162
]
},
{
"name": "Light Royal Blue",
"hex": "#2563EB",
"rgb": [
37,
99,
235
]
},
{
"name": "Red",
"hex": "#FF0000",
"rgb": [
255,
0,
0
]
},
{
"name": "Light Steel Blue",
"hex": "#1F86C6",
"rgb": [
31,
134,
198
]
},
{
"name": "Deep Royal Blue",
"hex": "#1D4ED8",
"rgb": [
29,
78,
216
]
},
{
"name": "Orange",
"hex": "#F59E0B",
"rgb": [
245,
158,
11
]
}
],
"fonts": [
{
"name": "Arial",
"stack": "Arial, sans-serif",
"weights": [],
"source": "System font, or not loaded on this page"
},
{
"name": "Inter",
"stack": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
"weights": [
300,
400,
500,
600,
700,
800
],
"source": "Google Fonts"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run lexiconlearning.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/lexiconlearning.com" title="Lexicon Learning 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 Arial
Other websites using Arial as their main typeface
Similar colours
Websites whose lead colour is closest to Lexicon Learning’s
Captured from lexiconlearning.com on 28 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Lexicon Learning; this guide describes the public website for reference.