What font does マイベスト use?

マイベスト’s website uses one typeface: Roboto (headings and body text), a system font.

What are マイベスト’s brand colours?

The main colours on my-best.com are Coral (#FF7E33), Red (#FF2600), Sandy Brown (#FFAF54), White (#FFFFFF), Charcoal (#313131) and Grey (#999999).

What colour is マイベスト’s text and background?

Body text is #313131 on a #FFFFFF background.

Where is マイベスト’s logo from?

The logo shown in this guide was found on my-best.com’s homepage. For official logo files and usage rules, check マイベスト’s own brand or press page.

Is this マイベスト’s official style guide?

No. SiteStyleGuide made it from my-best.com’s public web pages on 22 October 2026, and isn’t affiliated with マイベスト. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from my-best.com’s public web pages. Not affiliated with or endorsed by マイベスト. The real site is my-best.com ↗

Unofficial style guide

マイベストstyle guide

マイベスト’s website (my-best.com) uses Roboto for its headings and body text. Its palette is led by Coral (#FF7E33), Red (#FF2600) and Sandy Brown (#FFAF54), with #313131 text on #FFFFFF. Captured from the live site on 22 October 2026.

Website: my-best.com
Typefaces: Roboto, Helvetica Neue
Palette: 4 neutrals, 3 colours, 3 gradients
Captured: 22 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the my-best.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: マイベスト - おすすめ商品比較サービス; ● 20 / 60 characters
Meta description: マイベストは「おすすめ商品比較サービス」です。実際に商品を購入して自社の施設で比較検証したり、専門家を中心としたクリエイターが自らの愛用品やおすすめ商品を紹介して、あなたの「選ぶ」をお手伝いします。; ● 99 / 160 characters
Site name: マイベスト
og:title: マイベスト - おすすめ商品比較サービス
og:description: マイベストは「おすすめ商品比較サービス」です。実際に商品を購入して自社の施設で比較検証したり、専門家を中心としたクリエイターが自らの愛用品やおすすめ商品を紹介して、あなたの「選ぶ」をお手伝いします。
Language: ja

In search results

マイベストhttps://my-best.com/

マイベスト - おすすめ商品比較サービス

マイベストは「おすすめ商品比較サービス」です。実際に商品を購入して自社の施設で比較検証したり、専門家を中心としたクリエイターが自らの愛用品やおすすめ商品を紹介し…

When shared

my-best.com

マイベスト - おすすめ商品比較サービス

マイベストは「おすすめ商品比較サービス」です。実際に商品を購入して自社の施設で比較検証したり、専門家を中心と…

Logo & favicons

Found as: schema.org logo. SVG, 637 × 132.

Logo

On white

On black

On Coral

Favicons

3 found

180 px · PNG apple-touch-icon
32 px · SVG icon
32 px · PNG 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 (#313131) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 30.9%
Charcoal 23.5%
Grey 19.8%
Near Black 18.2%
Coral 2.5%
Red 2.5%
Sandy Brown 2.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
13.01:1 AAA

On white
—

Text, background, border · .medium-editor-toolbar li button, .css-vm6mbi
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 81

On text
—

On white
13.01:1 AAA

Text, background, border · body, .fc-product-search-result__info-title
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 40

On text
4.57:1 AA

On white
2.85:1 Fail

Text · input:-ms-input-placeholder, .fc-product-search-result__info-mpn
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 86

On text
1.19:1 Fail

On white
15.52:1 AAA

Background, border · .medium-editor-toolbar li button, .medium-editor-toolbar

Colours

Brand colours and accents, most used first

Coral

HEX

RGB

HSL

OKLCH

CMYK
0 51 80 0

On text
5.13:1 AA

On white
2.53:1 Fail

Text · .css-1rtuows, .css-1okbc3n
Red

HEX

RGB

HSL

OKLCH

CMYK
0 85 100 0

On text
3.43:1 AA large

On white
3.80:1 AA large

Text · .css-k7ni8, .css-x4yo12
Sandy Brown

HEX

RGB

HSL

OKLCH

CMYK
0 31 67 0

On text
7.13:1 AAA

On white
1.82:1 Fail

Text · .css-1tt9050, .css-1wtz1xw

Gradients

linear-gradient(180deg,#242424,rgba(36,36,36,.89))
linear-gradient(180deg,#242424,rgba(36,36,36,.75))
linear-gradient(180deg,#242424,rgba(0,0,0,.89))

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.

Roboto

Aa 400

Roboto

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

Aa 400

Helvetica Neue

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

Body — / 1.5 Roboto

マイベストは「おすすめ商品比較サービス」です。実際に商品を購入して自社の施設で比較検証したり、専門家を中心としたクリエイターが自らの愛用品…

Button 14px / 1.33 Roboto

Get started

Link 24px weight bolder · Helvetica Neue

Sizes in use

Most common across the site

30px1 rules
24pxline 125% · 4 rules
20pxline 125% · 6 rules
16px2 rules
14pxline 125% · 12 rules
12pxline 125% · 21 rules
10pxline 125% · 7 rules
8pxline 125% · 1 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

.medium-editor-toolbar li button · #242424

Link

Read our latest news today.

a · #313131

Corner radius

4px · 7×
5px · 3×
9999px · 3×
100% · 1×
50% · 1×

Shadows

0 0 3px #000
0 2px 2px rgba(0,0,0,.3)

Layout

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

Grid

Breakpoints

767

768

On a scale of 0 to 1440 px.

Notes

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

Notes

● FineThe title is 20 characters, short enough to show in full in search results.

Questions

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

Questions

What font does マイベスト use?: マイベスト’s website uses one typeface: Roboto (headings and body text), a system font.
What are マイベスト’s brand colours?: The main colours on my-best.com are Coral (#FF7E33), Red (#FF2600), Sandy Brown (#FFAF54), White (#FFFFFF), Charcoal (#313131) and Grey (#999999).
What colour is マイベスト’s text and background?: Body text is #313131 on a #FFFFFF background.
Where is マイベスト’s logo from?: The logo shown in this guide was found on my-best.com’s homepage. For official logo files and usage rules, check マイベスト’s own brand or press page.
Is this マイベスト’s official style guide?: No. SiteStyleGuide made it from my-best.com’s public web pages on 22 October 2026, and isn’t affiliated with マイベスト. 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

my-best-com-tokens.css

Download

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

/* my-best.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/my-best.com) */
:root {
  /* Colours */
  --text: #313131;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #313131;
  --colour-grey: #999999;
  --colour-near-black: #242424;
  --colour-coral: #FF7E33;
  --colour-red: #FF2600;
  --colour-sandy-brown: #FFAF54;
  --gradient-1: linear-gradient(180deg,#242424,rgba(36,36,36,.89));
  --gradient-2: linear-gradient(180deg,#242424,rgba(36,36,36,.75));
  --gradient-3: linear-gradient(180deg,#242424,rgba(0,0,0,.89));

  /* Typefaces */
  --font-body: -apple-system, blinkmacsystemfont, 'Roboto', 'Segoe UI', 'BIZ UDPGothic', 'arial';
  --font-buttons: -apple-system, blinkmacsystemfont, 'Roboto', 'Segoe UI', 'BIZ UDPGothic', 'arial';
  --font-other: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-button: 14px;
  --leading-button: 1.33;
  --text-a: 24px;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 5px;
  --radius-3: 9999px;
  --radius-4: 100%;
  --radius-5: 50%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 767px;
  --breakpoint-2: 768px;
}

{
    "site": "my-best.com",
    "source": "https://sitestyleguide.com/my-best.com",
    "text": "#313131",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#313131",
            "rgb": [
                49,
                49,
                49
            ]
        },
        {
            "name": "Grey",
            "hex": "#999999",
            "rgb": [
                153,
                153,
                153
            ]
        },
        {
            "name": "Near Black",
            "hex": "#242424",
            "rgb": [
                36,
                36,
                36
            ]
        },
        {
            "name": "Coral",
            "hex": "#FF7E33",
            "rgb": [
                255,
                126,
                51
            ]
        },
        {
            "name": "Red",
            "hex": "#FF2600",
            "rgb": [
                255,
                38,
                0
            ]
        },
        {
            "name": "Sandy Brown",
            "hex": "#FFAF54",
            "rgb": [
                255,
                175,
                84
            ]
        }
    ],
    "fonts": [
        {
            "name": "Roboto",
            "stack": "-apple-system, BlinkMacSystemFont, Roboto, Segoe UI, BIZ UDPGothic, arial, helvetica, Hiragino Kaku Gothic ProN, \"ヒラギノ角ゴ ProN W3\", sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Helvetica Neue",
            "stack": "Helvetica Neue, Helvetica, Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Roboto as their main typeface

goo.gle

goo.gle · set in Roboto
Save1
google.rs

google.rs · set in Roboto
Save
google.com.my

google.com.my · set in Roboto
Save
google.se

google.se · set in Roboto
Save

Websites whose lead colour is closest to マイベスト’s

Resurf

resurf.so · 2 days ago
Save
ICICI Bank

icicibank.com · 4 days ago
Save
overcast.fm

overcast.fm · 2 days ago
Save
ADSCHEMIST

adschemist.com · 6 days ago
Save

Captured from my-best.com on 22 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by マイベスト; this guide describes the public website for reference.

マイベストstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Grey

Near Black

Colours

Coral

Red

Sandy Brown

Gradients

Roboto

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run my-best.com?

Also set in Roboto

goo.gle

google.rs

google.com.my

google.se

Similar colours

Resurf

ICICI Bank

overcast.fm

ADSCHEMIST

Title &
description