What font does CliffsNotes use?

CliffsNotes’s website uses one typeface: Segoe UI (headings and body text), a system font.

What are CliffsNotes’s brand colours?

The main colours on cliffsnotes.com are Yellow (#FEF135), Dodger Blue (#589AD4), Dark Slate Grey (#006450), Slate Grey (#6C7687), Deep Royal Blue (#4B6BEA) and Light Lavender (#EAE2FF).

What colour is CliffsNotes’s text and background?

Body text is #212529 on a #FFFFFF background.

Where is CliffsNotes’s logo from?

The logo shown in this guide was found on cliffsnotes.com’s homepage. For official logo files and usage rules, check CliffsNotes’s own brand or press page.

Is this CliffsNotes’s official style guide?

No. SiteStyleGuide made it from cliffsnotes.com’s public web pages on 22 October 2026, and isn’t affiliated with CliffsNotes. Members can refresh a guide after 90 days to pick up changes.

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

Unofficial style guide

CliffsNotesstyle guide

CliffsNotes’s website (cliffsnotes.com) uses Segoe UI for its headings and body text. Its palette is led by Yellow (#FEF135), Dodger Blue (#589AD4) and Dark Slate Grey (#006450), with #212529 text on #FFFFFF. Captured from the live site on 22 October 2026.

Website: cliffsnotes.com
Typefaces: Segoe UI, SFMono-Regular
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 22 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the cliffsnotes.com homepage on a desktop screen — Screenshot of cliffsnotes.com on a 1440 px desktop screen, 22 Oct 2026.

Screenshot of the cliffsnotes.com homepage on a phone — On a phone, 390 px.

Identity & metadata

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

Title &
description

Page title: CliffsNotes | CliffsNotes Study Guides | Book Summaries, Test Preparation & Homework Help | Written by Teachers; ▲ 111 / 60 characters
Meta description: CliffsNotes is the original (and most widely imitated) study guide. CliffsNotes study guides are written by real teachers and professors, so no matter what you're studying, CliffsNotes can ease your homework headaches and help you score high on exams. Founded in 1958 by Clifton Keith Hillegass, CliffsNotes is the original company that produced study guides and book summaries ranging from Shakespeare to Algebra and the SAT!; ▲ 430 / 160 characters
Site name: CliffsNotes
Language: en
Theme colour: #fff603

In search results

CliffsNoteshttps://www.cliffsnotes.com/

CliffsNotes | CliffsNotes Study Guides | Book Summaries, Test…

CliffsNotes is the original (and most widely imitated) study guide. CliffsNotes study guides are written by real teachers and professors, so no matter what you&#…

When shared

No og:image, so no picture

cliffsnotes.com

CliffsNotes | CliffsNotes Study Guides | Book Summaries, Test Preparation & Homework Help…

CliffsNotes is the original (and most widely imitated) study guide. CliffsNotes study guides are written by r…

Logo & favicons

Found as: schema.org logo. PNG, 400 × 400.

Logo

On white

On black

On Yellow

Favicons

1 found

16 px · ICO shortcut icon

CliffsNotes | CliffsNotes Study Guides | Book Summaries, Test Preparation & Homework Help | Written by Teachers

Light browser tab

CliffsNotes | CliffsNotes Study Guides | Book Summaries, Test Preparation & Homework Help | Written by Teachers

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

Colour

Balance

How much each colour is used

White 48.5%
Black 10.8%
Cool Near Black 9.9%
Cool Off White 7.3%
Yellow 6.5%
Dodger Blue 2.3%
Dark Slate Grey 1.7%
Slate Grey 1.7%
Deep Royal Blue 1.5%
Light Lavender 1.4%
Deep Lavender 1.4%
Fuchsia 1.4%
Light Royal Blue 1.4%
Crimson 1.4%
Gold 1.4%
Sea Green 1.4%

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
15.43:1 AAA

On white
—

Background, text, border · body, --tw-gradient-to
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.36:1 Fail

On white
21.00:1 AAA

Background, text, border · .tw-bg-black, .tw-text-black
Cool Near Black

HEX

RGB

HSL

OKLCH

CMYK
20 10 0 84

On text
—

On white
15.43:1 AAA

Text · body, .tw-text-\[\#1E1F24\]
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
3 2 0 4

On text
13.50:1 AAA

On white
1.14:1 Fail

Background, border · .\!tw-bg-\[\#EDF0F5\], .tw-bg-\[\#EDF0F5\]

Colours

Brand colours and accents, most used first

Yellow

HEX

RGB

HSL

OKLCH

CMYK
0 5 79 0

On text
13.11:1 AAA

On white
1.18:1 Fail

Background, theme, text · theme-color meta tag, a
Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
58 27 0 17

On text
5.13:1 AA

On white
3.01:1 AA large

Background, text, border · .\!tw-bg-\[\#589AD4\], .\!tw-text-\[\#589AD4\]
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
100 0 20 61

On text
2.16:1 Fail

On white
7.15:1 AAA

Text · .uq-landing-card-badge, .tw-text-\[\#006450\]
Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
20 13 0 47

On text
3.36:1 AA large

On white
4.59:1 AA

Text · .tw-text-\[\#6c7687\], .out-of-views-modal--cn .out-of-views-thumbnail-meta
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
68 54 0 8

On text
3.37:1 AA large

On white
4.57:1 AA

Border · --tw-gradient-from, .focus\:tw-outline-\[\#5573eb\]:focus
Light Lavender

HEX

RGB

HSL

OKLCH

CMYK
8 11 0 0

On text
12.36:1 AAA

On white
1.25:1 Fail

Used · --tw-gradient-from
Deep Lavender

HEX

RGB

HSL

OKLCH

CMYK
13 11 0 0

On text
12.23:1 AAA

On white
1.26:1 Fail

Used · --tw-gradient-to
Fuchsia

HEX

RGB

HSL

OKLCH

CMYK
0 89 23 0

On text
4.56:1 AA

On white
3.38:1 AA large

Used · --tw-gradient-to
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
95 57 0 1

On text
3.43:1 AA large

On white
4.50:1 AA

Used · --bs-blue, --bs-primary
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 76 69 14

On text
3.41:1 AA large

On white
4.53:1 AA

Used · --bs-red, --bs-danger
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 24 97 0

On text
9.46:1 AAA

On white
1.63:1 Fail

Used · --bs-yellow, --bs-warning
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
81 0 38 47

On text
3.40:1 AA large

On white
4.53:1 AA

Used · --bs-green, --bs-success

Gradients

linear-gradient(top,)
linear-gradient(to bottom,)
linear-gradient(left,)

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.

Segoe UI

Aa 400

Segoe UI

System font, or not loaded on this page · weights 400 · body · shown in a stand-in if you don’t have it

Aa 400

SFMono-Regular

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 8 px

Body / weight 400

CliffsNotes is the original (and most widely imitated) study guide. CliffsNotes study guides are written by real teachers and professors, s…

Small 80%

CliffsNotes is the original (and most widely imitated) study guide. CliffsNotes study guides are written by real teachers and professors, s…

Button 100% none

Get started

Sizes in use

Most common across the site

24px3 rules
18px3 rules
16pxline 28px · 7 rules
14pxline 20px · 11 rules
12px2 rules
11px2 rules
10px4 rules
8px3 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Link

Read our latest news today.

a · #FEF135

Corner radius

4px · 2×
8px · 2×
16px · 2×
24px · 2×
14px · 1×

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

360

480

640

768

980

999

1200

1441

On a scale of 0 to 1441 px.

Content widths (max-width)

1600 px

1280 px

800 px

768 px

640 px

448 px

Notes

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

Notes

▲ CheckThe title is 111 characters. Google usually cuts titles near 60, so the end may not show in results.
▲ CheckThe description is 430 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 CliffsNotes use?: CliffsNotes’s website uses one typeface: Segoe UI (headings and body text), a system font.
What are CliffsNotes’s brand colours?: The main colours on cliffsnotes.com are Yellow (#FEF135), Dodger Blue (#589AD4), Dark Slate Grey (#006450), Slate Grey (#6C7687), Deep Royal Blue (#4B6BEA) and Light Lavender (#EAE2FF).
What colour is CliffsNotes’s text and background?: Body text is #212529 on a #FFFFFF background.
Where is CliffsNotes’s logo from?: The logo shown in this guide was found on cliffsnotes.com’s homepage. For official logo files and usage rules, check CliffsNotes’s own brand or press page.
Is this CliffsNotes’s official style guide?: No. SiteStyleGuide made it from cliffsnotes.com’s public web pages on 22 October 2026, and isn’t affiliated with CliffsNotes. 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

cliffsnotes-com-tokens.css

Download

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

/* cliffsnotes.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/cliffsnotes.com) */
:root {
  /* Colours */
  --text: #212529;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-cool-near-black: #212529;
  --colour-cool-off-white: #EDF0F5;
  --colour-yellow: #FEF135;
  --colour-dodger-blue: #589AD4;
  --colour-dark-slate-grey: #006450;
  --colour-slate-grey: #6C7687;
  --colour-deep-royal-blue: #4B6BEA;
  --colour-light-lavender: #EAE2FF;
  --colour-deep-lavender: #DEE4FF;
  --colour-fuchsia: #FF1BC4;
  --colour-light-royal-blue: #0D6EFD;
  --colour-crimson: #DC3545;
  --colour-gold: #FFC107;
  --colour-sea-green: #198754;
  --gradient-1: linear-gradient(top,);
  --gradient-2: linear-gradient(to bottom,);
  --gradient-3: linear-gradient(left,);

  /* Typefaces */
  --font-body: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial';
  --font-other: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono';

  /* Type scale */
  --text-small: 80%;
  --text-button: 100%;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 16px;
  --radius-4: 24px;
  --radius-5: 14px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 360px;
  --breakpoint-2: 480px;
  --breakpoint-3: 640px;
  --breakpoint-4: 768px;
  --breakpoint-5: 980px;
  --breakpoint-6: 999px;
  --breakpoint-7: 1200px;
  --breakpoint-8: 1441px;
  --max-width-1: 1600px;
  --max-width-2: 1280px;
  --max-width-3: 800px;
  --max-width-4: 768px;
  --max-width-5: 640px;
  --max-width-6: 448px;
}

{
    "site": "cliffsnotes.com",
    "source": "https://sitestyleguide.com/cliffsnotes.com",
    "text": "#212529",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Cool Near Black",
            "hex": "#212529",
            "rgb": [
                33,
                37,
                41
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#EDF0F5",
            "rgb": [
                237,
                240,
                245
            ]
        },
        {
            "name": "Yellow",
            "hex": "#FEF135",
            "rgb": [
                254,
                241,
                53
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#589AD4",
            "rgb": [
                88,
                154,
                212
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#006450",
            "rgb": [
                0,
                100,
                80
            ]
        },
        {
            "name": "Slate Grey",
            "hex": "#6C7687",
            "rgb": [
                108,
                118,
                135
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#4B6BEA",
            "rgb": [
                75,
                107,
                234
            ]
        },
        {
            "name": "Light Lavender",
            "hex": "#EAE2FF",
            "rgb": [
                234,
                226,
                255
            ]
        },
        {
            "name": "Deep Lavender",
            "hex": "#DEE4FF",
            "rgb": [
                222,
                228,
                255
            ]
        },
        {
            "name": "Fuchsia",
            "hex": "#FF1BC4",
            "rgb": [
                255,
                27,
                196
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#0D6EFD",
            "rgb": [
                13,
                110,
                253
            ]
        },
        {
            "name": "Crimson",
            "hex": "#DC3545",
            "rgb": [
                220,
                53,
                69
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFC107",
            "rgb": [
                255,
                193,
                7
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#198754",
            "rgb": [
                25,
                135,
                84
            ]
        }
    ],
    "fonts": [
        {
            "name": "Segoe UI",
            "stack": "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "SFMono-Regular",
            "stack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Segoe UI as their main typeface

S

SORT

sort-office.com · set in Segoe UI
Save
CodeCanyon

codecanyon.net · set in Segoe UI
Save
xbox.com

xbox.com · set in Segoe UI
Save
orbitz

orbitz.com · set in Segoe UI
Save

Websites whose lead colour is closest to CliffsNotes’s

Lulu

lulu.com · 6 days ago
Save
Adcash

adcash.com · 6 days ago
Save
iMore

imore.com · 6 days ago
Save
Onet

onet.pl · 2 days ago
Save

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

CliffsNotesstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Cool Near Black

Cool Off White

Colours

Yellow

Dodger Blue

Dark Slate Grey

Slate Grey

Deep Royal Blue

Light Lavender

Deep Lavender

Fuchsia

Light Royal Blue

Crimson

Gold

Sea Green

Gradients

Segoe UI

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run cliffsnotes.com?

Also set in Segoe UI

SORT

CodeCanyon

xbox.com

orbitz

Similar colours

Lulu

Adcash

iMore

Onet

Title &
description