SiteStyleGuide

Unofficial A style guide made by SiteStyleGuide from engoo.com’s public web pages. Not affiliated with or endorsed by Engoo. The real site is engoo.com ↗

Engoo logo

Unofficial style guide

Engoostyle guide

Engoo’s website (engoo.com) uses Helvetica Neue for its headings and body text. Its palette is led by Light Steel Blue (#337AB7), Brown (#A94442) and Dark Olive Green (#3C763D), with #000000 text on #FFFFFF. Captured from the live site on 21 October 2026.

Website
engoo.com
Typefaces
Helvetica Neue, Open Sans, ds-digital
Palette
4 neutrals, 12 colours, 3 gradients
Captured
21 Oct 2026 · added by @sitestyleguide
https://engoo.com/ Screenshot
Screenshot of the engoo.com homepage on a desktop screen
Screenshot of engoo.com on a 1440 px desktop screen, 21 Oct 2026.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title
Engoo | 1-on-1 Private Online English Lessons
● 45 / 60 characters
Meta description
Engoo is a private online English tutoring platform with 100,000+ learners. Learn or practice English every day, at your own pace. Japanese, Korean & Mandarin are also available.
▲ 178 / 160 characters
og:title
Engoo | 1-on-1 Private Online English Lessons
og:description
Learn what Engoo has to offer and start your online English Lessons today!
Language
en

In search results

Engoohttps://engoo.com/

Engoo | 1-on-1 Private Online English Lessons

Engoo is a private online English tutoring platform with 100,000+ learners. Learn or practice English every day, at your own pace. Japanese, Korean & Mandarin ar…

When shared

The image Engoo shares with links

engoo.com

Engoo | 1-on-1 Private Online English Lessons

Learn what Engoo has to offer and start your online English Lessons today!

Back to top ↑

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 (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used
  • White 45.8%
  • Grey 8.9%
  • Off White 7.6%
  • Black 6.3%
  • Light Steel Blue 5.4%
  • Brown 3.1%
  • Dark Olive Green 2.9%
  • Dark Golden Rod 2.9%
  • Dark Orange 2.6%
  • Indian Red 2.4%
  • Deep Steel Blue 2.4%
  • Lavender 2.3%
  • Corn Silk 2.1%
  • Honey Dew 1.9%
  • Sky Blue 1.8%
  • Medium Sea Green 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
    21.00:1 AAA
    On white
    —

    Background, text, border · .menu-list-item-link.active, .menu-dropdown-trigger.main-list.active

  • Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 53
    On text
    4.69:1 AA
    On white
    4.48:1 AA large

    Text, background, border · h1 small, .nav>li.disabled>a

  • Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 13
    On text
    15.46:1 AAA
    On white
    1.36:1 Fail

    Border, background · .nav .nav-divider, .button-default

  • Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 100
    On text
    —
    On white
    21.00:1 AAA

    Text, background, border · html, .slick-dots li button:before

Colours

Brand colours and accents, most used first
  • Light Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    72 33 0 28
    On text
    4.61:1 AA
    On white
    4.56:1 AA

    Background, text, border · .panel-primary>.panel-heading, .btn-primary

  • Brown

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 60 61 34
    On text
    3.59:1 AA large
    On white
    5.85:1 AA

    Text, background, border · .panel-danger>.panel-heading .badge, .panel-danger>.panel-heading

  • Dark Olive Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    49 0 48 54
    On text
    3.85:1 AA large
    On white
    5.45:1 AA

    Text, background, border · .panel-success>.panel-heading .badge, .panel-success>.panel-heading

  • Dark Golden Rod

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 21 57 46
    On text
    4.33:1 AA large
    On white
    4.85:1 AA

    Text, background, border · .panel-warning>.panel-heading .badge, .panel-warning>.panel-heading

  • Dark Orange

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 55 100 0
    On text
    7.75:1 AAA
    On white
    2.71:1 Fail

    Background, text, border · .menu.menu-new .menu-list-item-btn, .menu.menu-new .menu-etc .menu-list-item-btn

  • Indian Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 62 64 15
    On text
    5.30:1 AA
    On white
    3.96:1 AA large

    Background, text · .btn-danger, .button-danger

  • Deep Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    66 22 0 44
    On text
    3.84:1 AA large
    On white
    5.46:1 AA

    Text, background, border · .panel-info>.panel-heading .badge, .panel-info>.panel-heading

  • Lavender

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    15 15 0 0
    On text
    15.31:1 AAA
    On white
    1.37:1 Fail

    Background · .nwgstpg-ai, .nwgstpg-materials

  • Corn Silk

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 2 10 1
    On text
    19.68:1 AAA
    On white
    1.07:1 Fail

    Background, text · .panel-warning>.panel-heading, .panel-warning>.panel-heading .badge

  • Honey Dew

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    7 0 10 6
    On text
    17.59:1 AAA
    On white
    1.19:1 Fail

    Background, text · .panel-success>.panel-heading, .panel-success>.panel-heading .badge

  • Sky Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    59 14 0 13
    On text
    10.04:1 AAA
    On white
    2.09:1 Fail

    Background, text, border · .btn-info, .btn-info .badge

  • Medium Sea Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    50 0 50 28
    On text
    8.47:1 AAA
    On white
    2.48:1 Fail

    Background, text · .btn-success, .btn-success .badge

Gradients

  • linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)

  • linear-gradient(180deg, #D9D9FE 32.26%, #fff 96.97%)

  • linear-gradient(360deg, #D9D9FE 32.26%, #fff 96.97%)

Back to top ↑

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 · shown in a stand-in if you don’t have it

Aa 300 Aa 800

Open Sans

Google Fonts · weights 300, 400, 600, 700, 800 · body

Aa 400 Aa 600

ds-digital

Self-hosted · weights 400, 600 · shown in a stand-in if you don’t have it

Aa 400

Menlo

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 · root 10 px
Heading 1 36px / 1.1 weight 900 · uppercase

Engoo

Heading 2 30px / 1.1 weight 900 · uppercase

Engoo | 1-on-1 Private Online English Lessons

Heading 3 24px / 1.1 weight 900 · uppercase

Engoo | 1-on-1 Private Online English Lessons

Heading 4 18px / 1.1 weight 900 · uppercase

Engoo | 1-on-1 Private Online English Lessons

Heading 5 16px / 1.1 weight 300

Engoo | 1-on-1 Private Online English Lessons

Heading 6 14px / 1.1 weight 300 · uppercase

Engoo | 1-on-1 Private Online English Lessons

Body 10px / 1.66em Open Sans

Engoo is a private online English tutoring platform with 100,000+ learners. Learn or practice English every day, at your own pace. Japanese…

Paragraph 16px / 1.66em weight lighter

Engoo is a private online English tutoring platform with 100,000+ learners. Learn or practice English every day, at your own pace. Japanese…

Small 85%

Engoo is a private online English tutoring platform with 100,000+ learners. Learn or practice English every day, at your own pace. Japanese…

Button 0 · 0 px / 0 none

Get started

Link 14px / 1.5 weight 400

Read more about Engoo

Sizes in use

Most common across the site
  • 24pxline 1.2 · 5 rules
  • 20pxline 1 · 6 rules
  • 18pxline 1.3333333 · 18 rules
  • 16pxline 1.4 · 16 rules
  • 15pxline 1.4 · 4 rules
  • 14pxline 1.2 · 37 rules
  • 12pxline 1.5 · 20 rules
  • 10px5 rules

Back to top ↑

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 · 23×
  • 6px · 13×
  • 3px · 8×
  • 50% · 4×
  • 4px 4px 0 0 · 3×
  • 0 16px 0 16px · 3×

Shadows

  • 0px 1px 3px rgba(0,0,0,0.2)
  • 0 6px 12px rgba(0,0,0,0.175)
  • 0 1px 1px rgba(0,0,0,0.05)
  • 0 3px 9px rgba(0,0,0,0.5)

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

568
767
768
991
992
1024
1200
1280

On a scale of 0 to 1440 px.

Content widths (max-width)

1200 px
900 px
700 px
400 px
360 px
320 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

  • ● FineThe title is 45 characters, short enough to show in full in search results.
  • ▲ CheckThe description is 178 characters. Search results usually show about 160.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Engoo use?
Engoo’s website uses three typefaces: Helvetica Neue (headings and body text), a system font; Open Sans, google Fonts; ds-digital, self-hosted.
What are Engoo’s brand colours?
The main colours on engoo.com are Light Steel Blue (#337AB7), Brown (#A94442), Dark Olive Green (#3C763D), Dark Golden Rod (#8A6D3B), Dark Orange (#FF7400) and Indian Red (#D9534F).
What colour is Engoo’s text and background?
Body text is #000000 on a #FFFFFF background.
Where is Engoo’s logo from?
The logo shown in this guide was found on engoo.com’s homepage. For official logo files and usage rules, check Engoo’s own brand or press page.
Is this Engoo’s official style guide?
No. SiteStyleGuide made it from engoo.com’s public web pages on 21 October 2026, and isn’t affiliated with Engoo. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

engoo-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* engoo.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/engoo.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-grey: #777777;
  --colour-off-white: #DDDDDD;
  --colour-black: #000000;
  --colour-light-steel-blue: #337AB7;
  --colour-brown: #A94442;
  --colour-dark-olive-green: #3C763D;
  --colour-dark-golden-rod: #8A6D3B;
  --colour-dark-orange: #FF7400;
  --colour-indian-red: #D9534F;
  --colour-deep-steel-blue: #31708F;
  --colour-lavender: #D9D9FE;
  --colour-corn-silk: #FCF8E3;
  --colour-honey-dew: #DFF0D8;
  --colour-sky-blue: #5BC0DE;
  --colour-medium-sea-green: #5CB85C;
  --gradient-1: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
  --gradient-2: linear-gradient(180deg, #D9D9FE 32.26%, #fff 96.97%);
  --gradient-3: linear-gradient(360deg, #D9D9FE 32.26%, #fff 96.97%);

  /* Typefaces */
  --font-body: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-other: 'ds-digital';

  /* Type scale */
  --text-h1: 36px;
  --leading-h1: 1.1;
  --text-h2: 30px;
  --leading-h2: 1.1;
  --text-h3: 24px;
  --leading-h3: 1.1;
  --text-h4: 18px;
  --leading-h4: 1.1;
  --text-h5: 16px;
  --leading-h5: 1.1;
  --text-h6: 14px;
  --leading-h6: 1.1;
  --text-body: 10px;
  --leading-body: 1.66em;
  --text-p: 16px;
  --leading-p: 1.66em;
  --text-small: 85%;
  --text-button: 0;
  --leading-button: 0;
  --text-a: 14px;
  --leading-a: 1.5;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 3px;
  --radius-4: 50%;
  --radius-5: 4px 4px 0 0;
  --radius-6: 0 16px 0 16px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 568px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 991px;
  --breakpoint-5: 992px;
  --breakpoint-6: 1024px;
  --breakpoint-7: 1200px;
  --breakpoint-8: 1280px;
  --max-width-1: 1200px;
  --max-width-2: 900px;
  --max-width-3: 700px;
  --max-width-4: 400px;
  --max-width-5: 360px;
  --max-width-6: 320px;
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

Run engoo.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

View our style guide on SiteStyleGuide
<a href="https://sitestyleguide.com/engoo.com" title="Engoo style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Other websites using Helvetica Neue as their main typeface
Websites whose lead colour is closest to Engoo’s

Captured from engoo.com on 21 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Engoo; this guide describes the public website for reference.