What font does hotpepper.jp use?

hotpepper.jp’s website uses one typeface: メイリオ (headings and body text), a system font.

What are hotpepper.jp’s brand colours?

The main colours on hotpepper.jp are Royal Blue (#1470CC), Red (#E73820), Fire Brick (#D0111B), Deep Sky Blue (#34B6EB), Charcoal (#333333) and White (#FFFFFF).

What colour is hotpepper.jp’s text and background?

Body text is #333333 on a #FFFFFF background.

Where is hotpepper.jp’s logo from?

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

Is this hotpepper.jp’s official style guide?

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

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

Unofficial style guide

hotpepper.jpstyle guide

hotpepper.jp’s website (hotpepper.jp) uses メイリオ for its headings and body text. Its palette is led by Royal Blue (#1470CC), Red (#E73820) and Fire Brick (#D0111B), with #333333 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: hotpepper.jp
Typefaces: メイリオ
Palette: 4 neutrals, 4 colours, 2 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the hotpepper.jp homepage on a desktop screen — Screenshot of hotpepper.jp on a 1440 px desktop screen, 26 Oct 2026.

Screenshot of the hotpepper.jp 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: ホットペッパーグルメ; ● 10 / 60 characters
Meta description: ホットペッパーグルメは人気の特集や季節のおすすめ情報から簡単お店検索！ネット予約なら24時間利用可能でポイントもたまります！; ● 62 / 160 characters
Language: ja

In search results

hotpepper.jphttps://www.hotpepper.jp/

ホットペッパーグルメ

ホットペッパーグルメは人気の特集や季節のおすすめ情報から簡単お店検索！ネット予約なら24時間利用可能でポイントもたまります！

When shared

No og:image, so no picture

hotpepper.jp

ホットペッパーグルメ

ホットペッパーグルメは人気の特集や季節のおすすめ情報から簡単お店検索！ネット予約なら24時間利用可能でポイント…

Logo & favicons

Found as: image in the header. PNG, 264 × 45.

Logo

On white

On black

On Royal Blue

Favicons

1 found

128 px · ICO shortcut icon

ホットペッパーグルメ

Light browser tab

ホットペッパーグルメ

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

Colour

Balance

How much each colour is used

Charcoal 35.8%
White 13.5%
Light Grey 12.9%
Royal Blue 10.8%
Dark Grey 9.3%
Red 6.5%
Fire Brick 6%
Deep Sky Blue 5.3%

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

Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
—

On white
12.63:1 AAA

Text · .areaSelectWrap .areaSelectTitle, .quickSearchWrap .quickSearchTitle
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
12.63:1 AAA

On white
—

Background, border, text · .headerWrap, .areaSelectWrap
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 20

On text
7.87:1 AAA

On white
1.61:1 Fail

Background, border · .areaSelectWrap .areaSelectTitle:after, .quickSearchWrap .quickSelectBox.disabled:after
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 69

On text
1.52:1 Fail

On white
8.32:1 AAA

Text · .footerWrap > .footerRelatedLinkWrap, .footerWrap .linkForStoreWrap .linkForStoreText

Colours

Brand colours and accents, most used first

Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
90 45 0 20

On text
2.54:1 Fail

On white
4.98:1 AA

Text · .articleContent .articleSubTitleLink, a
Red

HEX

RGB

HSL

OKLCH

CMYK
0 76 86 9

On text
3.00:1 AA large

On white
4.21:1 AA large

Text, border · .articleTitle .articleTitleInner, .quickSearchWrap .quickSelectBoxList > li > a.selected:link
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 92 87 18

On text
2.27:1 Fail

On white
5.56:1 AA

Text, border, background · .keyVisualWrap .showMore > a, .keyVisualWrap .showMore > a::after
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
78 23 0 8

On text
5.44:1 AA

On white
2.32:1 Fail

Background · .quickSearchWrap .quickSearchBtn > a, .quickSearchWrap .quickSearchBtn > a:hover

Gradients

linear-gradient(to bottom, #34B6EB, #20A7DE)
linear-gradient(to bottom, #22AEE6, #0A92CC)

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.

メイリオ

Aa 700

メイリオ

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

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Body — メイリオ

ホットペッパーグルメは人気の特集や季節のおすすめ情報から簡単お店検索！ネット予約なら24時間利用可能でポイントもたまります！

Link 14px / 1.6 weight 700

Sizes in use

Most common across the site

16pxline 1.1 · 1 rules
14pxline 1 · 7 rules
13pxline 1 · 1 rules
12pxline 1.5 · 8 rules
11pxline 1.5 · 6 rules
10pxline 1 · 8 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 · #1470CC

Corner radius

2px · 2×
0 0 36px 36px · 2×
5px · 2×
20px · 1×
10px · 1×
3px · 1×

Shadows

4px 4px 6px 0 rgba(0, 0, 0, 0.1)
0 4px 4px 0 rgba(0, 0, 0, 0.2)

Layout

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

Grid

No breakpoints or content widths could be read.

Notes

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

Notes

● FineThe title is 10 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 hotpepper.jp use?: hotpepper.jp’s website uses one typeface: メイリオ (headings and body text), a system font.
What are hotpepper.jp’s brand colours?: The main colours on hotpepper.jp are Royal Blue (#1470CC), Red (#E73820), Fire Brick (#D0111B), Deep Sky Blue (#34B6EB), Charcoal (#333333) and White (#FFFFFF).
What colour is hotpepper.jp’s text and background?: Body text is #333333 on a #FFFFFF background.
Where is hotpepper.jp’s logo from?: The logo shown in this guide was found on hotpepper.jp’s homepage. For official logo files and usage rules, check hotpepper.jp’s own brand or press page.
Is this hotpepper.jp’s official style guide?: No. SiteStyleGuide made it from hotpepper.jp’s public web pages on 26 October 2026, and isn’t affiliated with hotpepper.jp. 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

hotpepper-jp-tokens.css

Download

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

/* hotpepper.jp design tokens, from SiteStyleGuide (https://sitestyleguide.com/hotpepper.jp) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-white: #FFFFFF;
  --colour-light-grey: #CCCCCC;
  --colour-dark-grey: #4E4E4E;
  --colour-royal-blue: #1470CC;
  --colour-red: #E73820;
  --colour-fire-brick: #D0111B;
  --colour-deep-sky-blue: #34B6EB;
  --gradient-1: linear-gradient(to bottom, #34B6EB, #20A7DE);
  --gradient-2: linear-gradient(to bottom, #22AEE6, #0A92CC);

  /* Typefaces */
  --font-body: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

  /* Type scale */
  --text-a: 14px;
  --leading-a: 1.6;

  /* Shape */
  --radius-1: 2px;
  --radius-2: 0 0 36px 36px;
  --radius-3: 5px;
  --radius-4: 20px;
  --radius-5: 10px;
  --radius-6: 3px;
}

{
    "site": "hotpepper.jp",
    "source": "https://sitestyleguide.com/hotpepper.jp",
    "text": "#333333",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CCCCCC",
            "rgb": [
                204,
                204,
                204
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#4E4E4E",
            "rgb": [
                78,
                78,
                78
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#1470CC",
            "rgb": [
                20,
                112,
                204
            ]
        },
        {
            "name": "Red",
            "hex": "#E73820",
            "rgb": [
                231,
                56,
                32
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#D0111B",
            "rgb": [
                208,
                17,
                27
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#34B6EB",
            "rgb": [
                52,
                182,
                235
            ]
        }
    ],
    "fonts": [
        {
            "name": "メイリオ",
            "stack": "\"メイリオ\", Meiryo, \"ヒラギノ角ゴ Pro W3\", \"ＭＳ Ｐゴシック\", MS PGothic, sans-serif",
            "weights": [
                700
            ],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using メイリオ as their main typeface

kakaku.com

kakaku.com · set in メイリオ
Save
mapion.co.jp

mapion.co.jp · set in メイリオ
Save

Websites whose lead colour is closest to hotpepper.jp’s

American Civil Liberties Union

aclu.org · 5 days ago
Save
FreshBooks

freshbooks.com · 5 days ago
Save
Apple

apple.co · 19 hours ago
Save
World Clock

24timezones.com · 4 days ago
Save

Captured from hotpepper.jp on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by hotpepper.jp; this guide describes the public website for reference.

hotpepper.jpstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Charcoal

White

Light Grey

Dark Grey

Colours

Royal Blue

Red

Fire Brick

Deep Sky Blue

Gradients

メイリオ

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run hotpepper.jp?

Also set in メイリオ

kakaku.com

mapion.co.jp

Similar colours

American Civil Liberties Union

FreshBooks

Apple

World Clock

Title &
description