What font does Hopper use?

Hopper’s website uses one typeface: SFMono-Regular (headings and body text), a system font.

What are Hopper’s brand colours?

The main colours on hopper.com are Steel Blue (#1878EC), Deep Sky Blue (#00ABE5), Medium Slate Blue (#964DFF), Dark Orange (#FF7900), Red (#FF3633) and Medium Sea Green (#37A14A).

What colour is Hopper’s text and background?

Body text is #111111 on a #FFFFFF background.

Is this Hopper’s official style guide?

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

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

Unofficial style guide

Hopperstyle guide

Hopper’s website (hopper.com) uses SFMono-Regular for its headings and body text. Its palette is led by Steel Blue (#1878EC), Deep Sky Blue (#00ABE5) and Medium Slate Blue (#964DFF), with #111111 text on #FFFFFF. Captured from the live site on 27 October 2026.

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

Save Add to collection Share Report

Identity & metadata

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

Title &
description

Page title: Hopper | Book Hotels, Flights, Car Rentals & More; ● 49 / 60 characters
Meta description: Join 120 million travelers in planning your next trip. Get the best price on hotels, homes, flights, and car rentals.; ● 117 / 160 characters
Language: en

In search results

Hopperhttps://hopper.com/

Hopper | Book Hotels, Flights, Car Rentals & More

Join 120 million travelers in planning your next trip. Get the best price on hotels, homes, flights, and car rentals.

When shared

No og:image, so no picture

hopper.com

Hopper | Book Hotels, Flights, Car Rentals & More

Join 120 million travelers in planning your next trip. Get the best price on hotels, homes, flights, and car …

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

1 found

48 px · ICO favicon.ico

Hopper | Book Hotels, Flights, Car Rentals & More

Light browser tab

Hopper | Book Hotels, Flights, Car Rentals & More

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

Colour

Balance

How much each colour is used

White 35.1%
Near Black 15%
Steel Blue 12.1%
Off White 8%
Light Grey 4.6%
Deep Sky Blue 3.7%
Medium Slate Blue 3.6%
Dark Orange 2.9%
Red 2.6%
Medium Sea Green 2.6%
Crimson 2.2%
Royal Blue 2.2%
Chocolate 1.4%
Gold 1.4%
Indian Red 1.4%
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
18.88:1 AAA

On white
—

Background, text, border · .merge-account-container .create-new-user-button button[class*=MuiButton-contain, .phone-additional-option-content .additional-method-card .action-button button
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 93

On text
—

On white
18.88:1 AAA

Background, text, border · .status-pro-offer, .surface-accent
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 9

On text
15.27:1 AAA

On white
1.24:1 Fail

Background, border · .skeleton, .background-shimmer
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 24

On text
10.71:1 AAA

On white
1.76:1 Fail

Border, background · .bg-gray-30, .phone-additional-option-content .additional-method-card .action-button button

Colours

Brand colours and accents, most used first

Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
90 49 0 7

On text
4.44:1 AA large

On white
4.25:1 AA large

Text, background, border · .merge-account-container .create-new-user-button button[class*=MuiButton-contain, .bg-primary-main
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 25 0 10

On text
7.15:1 AAA

On white
2.64:1 Fail

Background, border · .program-pro-text-gradient, .program-pro-border:before
Medium Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
41 70 0 0

On text
4.32:1 AA large

On white
4.37:1 AA large

Background, text, border · .program-pro-text-gradient, .program-pro-border:before
Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 53 100 0

On text
7.18:1 AAA

On white
2.63:1 Fail

Background, border · .program-pro-text-gradient, .program-pro-border:before
Red

HEX

RGB

HSL

OKLCH

CMYK
0 79 80 0

On text
5.24:1 AA

On white
3.60:1 AA large

Background · .program-pro-text-gradient, .program-pro-border:before
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
66 0 54 37

On text
5.72:1 AA

On white
3.30:1 AA large

Text, background · .status-success, .text-green-50
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 85 85 16

On text
3.70:1 AA large

On white
5.10:1 AA

Background, text, border · .status-error, .text-red-50
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
90 51 0 24

On text
3.10:1 AA large

On white
6.08:1 AA

Text, background · .text-link, --blue-60
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 59 100 23

On text
4.04:1 AA large

On white
4.67:1 AA

Background · .status-warning, --orange-50
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 18 98 4

On text
12.02:1 AAA

On white
1.57:1 Fail

Background · .status-offer, --yellow-20
Indian Red

HEX

RGB

HSL

OKLCH

CMYK
0 64 65 6

On text
5.57:1 AA

On white
3.39:1 AA large

Background · .status-strikethrough, --coral-50
Green

HEX

RGB

HSL

OKLCH

CMYK
77 0 58 53

On text
3.45:1 AA large

On white
5.48:1 AA

Background · .status-discount, --green-60

Gradients

linear-gradient(90deg,#fff0,#ffffff8c 50%,#fff0)
linear-gradient(90deg,#ff7900 -.43%,#ff3633 31.73%,#964dff 65.76%,#00abe5 99.57%)
linear-gradient(135deg,#ff790014 0,#ff363314 32.16%,#964dff14 66.2%,#00abe514 100%)

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.

SFMono-Regular

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

Small 80%

Join 120 million travelers in planning your next trip. Get the best price on hotels, homes, flights, and car rentals.

Sizes in use

Most common across the site

38px1 rules
30px3 rules
22px3 rules
16pxline 1.5rem · 7 rules
15px1 rules
14px3 rules
12px1 rules
11px1 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

.phone-additional-option-content .additional-method-card .action-button button · #FFFFFF · radius 8px

Corner radius

8px · 7×
var(--radius-md) · 3×
var(--radius-3xl) · 2×
var(--radius-lg) · 2×
var(--radius-sm) · 2×
var(--radius-none) · 2×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000
0 4px 14px #00000040
0 1px 2px #50505026,0 1px 8px #50505026

Layout

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

Grid

Breakpoints

320

480

744

992

On a scale of 0 to 1440 px.

Content widths (max-width)

992 px

744 px

720 px

398 px

384 px

370 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.
▲ 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 Hopper use?: Hopper’s website uses one typeface: SFMono-Regular (headings and body text), a system font.
What are Hopper’s brand colours?: The main colours on hopper.com are Steel Blue (#1878EC), Deep Sky Blue (#00ABE5), Medium Slate Blue (#964DFF), Dark Orange (#FF7900), Red (#FF3633) and Medium Sea Green (#37A14A).
What colour is Hopper’s text and background?: Body text is #111111 on a #FFFFFF background.
Is this Hopper’s official style guide?: No. SiteStyleGuide made it from hopper.com’s public web pages on 27 October 2026, and isn’t affiliated with Hopper. 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

hopper-com-tokens.css

Download

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

/* hopper.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/hopper.com) */
:root {
  /* Colours */
  --text: #111111;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #111111;
  --colour-off-white: #E7E7E7;
  --colour-light-grey: #C3C3C3;
  --colour-steel-blue: #1878EC;
  --colour-deep-sky-blue: #00ABE5;
  --colour-medium-slate-blue: #964DFF;
  --colour-dark-orange: #FF7900;
  --colour-red: #FF3633;
  --colour-medium-sea-green: #37A14A;
  --colour-crimson: #D72021;
  --colour-royal-blue: #135FC3;
  --colour-chocolate: #C45000;
  --colour-gold: #F6CA05;
  --colour-indian-red: #F05754;
  --colour-green: #1C7933;
  --gradient-1: linear-gradient(90deg,#fff0,#ffffff8c 50%,#fff0);
  --gradient-2: linear-gradient(90deg,#ff7900 -.43%,#ff3633 31.73%,#964dff 65.76%,#00abe5 99.57%);
  --gradient-3: linear-gradient(135deg,#ff790014 0,#ff363314 32.16%,#964dff14 66.2%,#00abe514 100%);

  /* Typefaces */
  --font-other: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono';

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

  /* Shape */
  --radius-1: 8px;
  --radius-2: var(--radius-md);
  --radius-3: var(--radius-3xl);
  --radius-4: var(--radius-lg);
  --radius-5: var(--radius-sm);
  --radius-6: var(--radius-none);

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 480px;
  --breakpoint-3: 744px;
  --breakpoint-4: 992px;
  --max-width-1: 992px;
  --max-width-2: 744px;
  --max-width-3: 720px;
  --max-width-4: 398px;
  --max-width-5: 384px;
  --max-width-6: 370px;
}

{
    "site": "hopper.com",
    "source": "https://sitestyleguide.com/hopper.com",
    "text": "#111111",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#111111",
            "rgb": [
                17,
                17,
                17
            ]
        },
        {
            "name": "Off White",
            "hex": "#E7E7E7",
            "rgb": [
                231,
                231,
                231
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#C3C3C3",
            "rgb": [
                195,
                195,
                195
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#1878EC",
            "rgb": [
                24,
                120,
                236
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00ABE5",
            "rgb": [
                0,
                171,
                229
            ]
        },
        {
            "name": "Medium Slate Blue",
            "hex": "#964DFF",
            "rgb": [
                150,
                77,
                255
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#FF7900",
            "rgb": [
                255,
                121,
                0
            ]
        },
        {
            "name": "Red",
            "hex": "#FF3633",
            "rgb": [
                255,
                54,
                51
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#37A14A",
            "rgb": [
                55,
                161,
                74
            ]
        },
        {
            "name": "Crimson",
            "hex": "#D72021",
            "rgb": [
                215,
                32,
                33
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#135FC3",
            "rgb": [
                19,
                95,
                195
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#C45000",
            "rgb": [
                196,
                80,
                0
            ]
        },
        {
            "name": "Gold",
            "hex": "#F6CA05",
            "rgb": [
                246,
                202,
                5
            ]
        },
        {
            "name": "Indian Red",
            "hex": "#F05754",
            "rgb": [
                240,
                87,
                84
            ]
        },
        {
            "name": "Green",
            "hex": "#1C7933",
            "rgb": [
                28,
                121,
                51
            ]
        }
    ],
    "fonts": [
        {
            "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 SFMono-Regular as their main typeface

Untappd

untappd.com · set in SFMono-Regular
Save
New Genre

newgenre.studio · set in SFMono-Regular
Save
Vercel

vercel.com · set in SFMono-Regular
Save
NFL International Homepage

nfl.com · set in SFMono-Regular
Save

Websites whose lead colour is closest to Hopper’s

Waze

waze.com · 4 hours ago
Save
Google

thinkwithgoogle.com · 14 hours ago
Save
blog.google

blog.google · 1 day ago
Save
Google Design

design.google · 1 day ago
Save

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

Hopperstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Off White

Light Grey

Colours

Steel Blue

Deep Sky Blue

Medium Slate Blue

Dark Orange

Red

Medium Sea Green

Crimson

Royal Blue

Chocolate

Gold

Indian Red

Green

Gradients

SFMono-Regular

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run hopper.com?

Also set in SFMono-Regular

Untappd

New Genre

Vercel

NFL International Homepage

Similar colours

Waze

Google

blog.google

Google Design

Title &
description