What font does So-net(ソネット) use?

So-net(ソネット)’s website uses one typeface: Hiragino Kaku Gothic ProN (headings and body text), a system font.

What are So-net(ソネット)’s brand colours?

The main colours on so-net.ne.jp are Light Violet Red (#D32A76), Deep Pink (#F3CED5), Crimson (#D32A41), Light Pink (#FBD3E5), Deep Orange Red (#F04205) and Light Orange Red (#EB5505).

What colour is So-net(ソネット)’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is So-net(ソネット)’s logo from?

The logo shown in this guide was found on so-net.ne.jp’s homepage. For official logo files and usage rules, check So-net(ソネット)’s own brand or press page.

Is this So-net(ソネット)’s official style guide?

No. SiteStyleGuide made it from so-net.ne.jp’s public web pages on 1 November 2026, and isn’t affiliated with So-net(ソネット). Members can refresh a guide after 90 days to pick up changes.

So-net(ソネット) Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: So-net; ● 6 / 60 characters
Meta description: インターネットサービスプロバイダー「So-net（ソネット）」は、光ファイバー、ADSL、高速モバイルによる接続サービスを中心に、便利で楽しいサービスを提供しています。; ● 84 / 160 characters
Site name: So-net(ソネット)
og:title: So-net
og:description: インターネットサービスプロバイダー「So-net（ソネット）」は、光ファイバー、ADSL、高速モバイルによる接続サービスを中心に、便利で楽しいサービスを提供しています。
Language: ja

In search results

So-net(ソネット)https://www.so-net.ne.jp/

So-net

インターネットサービスプロバイダー「So-net（ソネット）」は、光ファイバー、ADSL、高速モバイルによる接続サービスを中心に、便利で楽しいサービスを提供しています。

When shared

so-net.ne.jp

So-net

インターネットサービスプロバイダー「So-net（ソネット）」は、光ファイバー、ADSL、高速モバイルによる接続サービ…

Back to top ↑

Logo & favicons

Found as: image in the header. SVG, 230 × 71.

Logo

On white

On black

On Light Violet Red

Favicons

2 found

180 px · PNG apple-touch-icon
32 px · ICO icon

So-net

Light browser tab

So-net

Dark browser tab

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

Light Violet Red 39.3%
White 28.1%
Black 10%
Cool Off White 7.5%
Deep Pink 4.7%
Dark Grey 4.1%
Crimson 1.9%
Light Pink 1.2%
Deep Orange Red 1%
Light Orange Red 0.7%
Green 0.6%
Deep Violet Red 0.5%
Fire Brick 0.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 · body, --local-background-color
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · body, :where(.theme-main:not(.theme-main--shift-heading) .theme-main__contents) h6:not
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
0 2 1 1

On text
19.86:1 AAA

On white
1.06:1 Fail

Background · .mod-heading-navigation__navigation, .str-header__navigation-content-head
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 60

On text
3.60:1 AA large

On white
5.83:1 AA

Text, background · .mod-checkbox-area__title::after, a

Colours

Brand colours and accents, most used first

Light Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 80 44 17

On text
4.36:1 AA large

On white
4.81:1 AA

Background, text, border · --local-border-color, :where(.theme-main:not(.theme-main--shift-heading) .theme-main__contents) h2:not
Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 15 12 5

On text
14.60:1 AAA

On white
1.44:1 Fail

Background, border · :where(.theme-main:not(.theme-main--shift-heading) .theme-main__contents) h4:not, .theme-main--shift-heading :where(.theme-main__contents) h5:not([class^=mod-], [
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 80 69 17

On text
4.18:1 AA large

On white
5.03:1 AA

Text, background, border · .mod-box__heading--emphasis, .mod-box-04__heading--emphasis
Light Pink

HEX

RGB

HSL

OKLCH

CMYK
0 16 9 2

On text
15.55:1 AAA

On white
1.35:1 Fail

Background, text, border · .mod-panel-issue__reason-term, --local-box-border-color
Deep Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 73 98 6

On text
5.49:1 AA

On white
3.83:1 AA large

Used · --local-border-color, --local-forground-color
Light Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 64 98 8

On text
5.83:1 AA

On white
3.60:1 AA large

Text, background · .unq-top-card--au .unq-top-card__heading, .unq-top-card--au .unq-top-card__lead
Green

HEX

RGB

HSL

OKLCH

CMYK
54 0 90 49

On text
4.44:1 AA large

On white
4.72:1 AA

Background, text · .mod-tab-emphasis__tab--green[aria-selected=true], .mod-tab-emphasis__tab--green
Deep Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 80 44 27

On text
3.55:1 AA large

On white
5.91:1 AA

Background · .str-header__navigation-button--search[aria-expanded=true], .str-header__user-login:focus-visible
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 20

On text
3.57:1 AA large

On white
5.89:1 AA

Background, text, border · .mf_finder_drilldown_reset_badge>a, .mf_finder_drilldown_selected .mf_finder_drilldown_toggle .mf_toggle_button_wrap

Gradients

linear-gradient(0deg,rgba(0,0,0,.5) 30%,transparent 0 70%,#000 0) 50%/8% 100%,linear-gradient(90deg,rgba(0,0,0,.25) 30%,transparent 0 70%,rgba(0,0,0,.75) 0)

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.

Hiragino Kaku Gothic ProN

Aa 400

Hiragino Kaku Gothic ProN

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

Aa 400

Arial

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

Body 1.5rem · 15 px / 1.5 Hiragino Kaku Gothic ProN

インターネットサービスプロバイダー「So-net（ソネット）」は、光ファイバー、ADSL、高速モバイルによる接続サービスを中心に、便利で楽しいサービ…

Small 80%

インターネットサービスプロバイダー「So-net（ソネット）」は、光ファイバー、ADSL、高速モバイルによる接続サービスを中心に、便利で楽しいサービ…

Link 1.6rem · 16 px / 1 weight 700

Sizes in use

Most common across the site

20px15 rules
18pxline 1.3 · 19 rules
16px41 rules
15pxline 1.5 · 11 rules
14pxline 1.75 · 23 rules
12pxline 1.5 · 19 rules
10pxline 1.2 · 15 rules
9pxline 1.45 · 14 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

Link

Read our latest news today.

a · #656565

Corner radius

50vh · 31×
5px · 31×
3px · 12×
20px · 12×
2px · 8×
0 0 5px 5px · 7×

Shadows

0 3px 6px rgba(0,0,0,.16)
0 4px 6px rgba(0,0,0,.16)
0 0 2px 0 rgba(204,0,0,.9)
0 0 2px 0 rgba(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

481

576

640

767

769

1000

1024

1200

On a scale of 0 to 1440 px.

Back to top ↑

Notes

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

Notes

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

Back to top ↑

Questions

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

Questions

What font does So-net(ソネット) use?: So-net(ソネット)’s website uses one typeface: Hiragino Kaku Gothic ProN (headings and body text), a system font.
What are So-net(ソネット)’s brand colours?: The main colours on so-net.ne.jp are Light Violet Red (#D32A76), Deep Pink (#F3CED5), Crimson (#D32A41), Light Pink (#FBD3E5), Deep Orange Red (#F04205) and Light Orange Red (#EB5505).
What colour is So-net(ソネット)’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is So-net(ソネット)’s logo from?: The logo shown in this guide was found on so-net.ne.jp’s homepage. For official logo files and usage rules, check So-net(ソネット)’s own brand or press page.
Is this So-net(ソネット)’s official style guide?: No. SiteStyleGuide made it from so-net.ne.jp’s public web pages on 1 November 2026, and isn’t affiliated with So-net(ソネット). 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

so-net-ne-jp-tokens.css

Download

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

/* so-net.ne.jp design tokens, from SiteStyleGuide (https://sitestyleguide.com/so-net.ne.jp) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-cool-off-white: #FDF7FA;
  --colour-dark-grey: #656565;
  --colour-light-violet-red: #D32A76;
  --colour-deep-pink: #F3CED5;
  --colour-crimson: #D32A41;
  --colour-light-pink: #FBD3E5;
  --colour-deep-orange-red: #F04205;
  --colour-light-orange-red: #EB5505;
  --colour-green: #3C830D;
  --colour-deep-violet-red: #BA2568;
  --colour-fire-brick: #CC0000;
  --gradient-1: linear-gradient(0deg,rgba(0,0,0,.5) 30%,transparent 0 70%,#000 0) 50%/8% 100%,linear-gradient(90deg,rgba(0,0,0,.25) 30%,transparent 0 70%,rgba(0,0,0,.75) 0);

  /* Typefaces */
  --font-body: 'Hiragino Kaku Gothic ProN', 'Helvetica Neue', 'arial', 'Hiragino Sans', 'meiryo', sans-serif;
  --font-other: 'Arial', sans-serif;

  /* Type scale */
  --text-body: 1.5rem;
  --leading-body: 1.5;
  --text-small: 80%;
  --text-a: 1.6rem;
  --leading-a: 1;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 481px;
  --breakpoint-2: 576px;
  --breakpoint-3: 640px;
  --breakpoint-4: 767px;
  --breakpoint-5: 769px;
  --breakpoint-6: 1000px;
  --breakpoint-7: 1024px;
  --breakpoint-8: 1200px;
}

{
    "site": "so-net.ne.jp",
    "source": "https://sitestyleguide.com/so-net.ne.jp",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#FDF7FA",
            "rgb": [
                253,
                247,
                250
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#656565",
            "rgb": [
                101,
                101,
                101
            ]
        },
        {
            "name": "Light Violet Red",
            "hex": "#D32A76",
            "rgb": [
                211,
                42,
                118
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#F3CED5",
            "rgb": [
                243,
                206,
                213
            ]
        },
        {
            "name": "Crimson",
            "hex": "#D32A41",
            "rgb": [
                211,
                42,
                65
            ]
        },
        {
            "name": "Light Pink",
            "hex": "#FBD3E5",
            "rgb": [
                251,
                211,
                229
            ]
        },
        {
            "name": "Deep Orange Red",
            "hex": "#F04205",
            "rgb": [
                240,
                66,
                5
            ]
        },
        {
            "name": "Light Orange Red",
            "hex": "#EB5505",
            "rgb": [
                235,
                85,
                5
            ]
        },
        {
            "name": "Green",
            "hex": "#3C830D",
            "rgb": [
                60,
                131,
                13
            ]
        },
        {
            "name": "Deep Violet Red",
            "hex": "#BA2568",
            "rgb": [
                186,
                37,
                104
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#CC0000",
            "rgb": [
                204,
                0,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "Hiragino Kaku Gothic ProN",
            "stack": "Hiragino Kaku Gothic ProN, Helvetica Neue, arial, Hiragino Sans, meiryo, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Arial",
            "stack": "Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Back to top ↑

Share

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

Share

X LinkedIn Facebook Pinterest Reddit Email

Run so-net.ne.jp?

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.

<a href="https://sitestyleguide.com/so-net.ne.jp" title="So-net(ソネット) 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 ↑

So-net(ソネット)style guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Cool Off White

Dark Grey

Colours

Light Violet Red

Deep Pink

Crimson

Light Pink

Deep Orange Red

Light Orange Red

Green

Deep Violet Red

Fire Brick

Gradients

Hiragino Kaku Gothic ProN

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

エキテン byGMO

Intercom

Us

KapanLagi.com

Ubie

Check Point Software

So-net(ソネット)style guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Cool Off White

Dark Grey

Colours

Light Violet Red

Deep Pink

Crimson

Light Pink

Deep Orange Red

Light Orange Red

Green

Deep Violet Red

Fire Brick

Gradients

Hiragino Kaku Gothic ProN

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run so-net.ne.jp?

Also set in Hiragino Kaku Gothic ProN

エキテン byGMO

Intercom

Similar colours

Us

KapanLagi.com

Ubie

Check Point Software

Title &
description