What font does ニコニコ use?

ニコニコ’s website uses two typefaces: Avenir (headings and body text), a system font; M PLUS Rounded 1c, google Fonts.

What are ニコニコ’s brand colours?

The main colours on nicovideo.jp are Deep Dodger Blue (#0080FF), Golden Rod (#DAA400), Dark Orange (#FF8000), Sky Blue (#80AAC2), Peru (#D49266) and Light Dodger Blue (#4A90E2).

What colour is ニコニコ’s text and background?

Body text is #252525 on a #FFFFFF background.

Where is ニコニコ’s logo from?

The logo shown in this guide was found on nicovideo.jp’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 nicovideo.jp’s public web pages on 23 October 2026, and isn’t affiliated with ニコニコ. Members can refresh a guide after 90 days to pick up changes.

ニコニコ 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: ニコニコ; ● 4 / 60 characters
Meta description: 日本最大級の動画サービス、ニコニコ（niconico）。動画にコメントを付けて楽しむニコニコ動画や、生放送番組にリアルタイムでコメントを付けられるニコニコ生放送のほか、イラスト・マンガ・最新ニュース・ゲームなど、エンターテイメントを全て無料で楽しめる！; ● 126 / 160 characters
Site name: ニコニコ
og:title: ニコニコ
og:description: 日本最大級の動画サービス、ニコニコ（niconico）。動画にコメントを付けて楽しむニコニコ動画や、生放送番組にリアルタイムでコメントを付けられるニコニコ生放送のほか、イラスト・マンガ・最新ニュース・ゲームなど、エンターテイメントを全て無料で楽しめる！
Language: en-us

In search results

ニコニコhttps://www.nicovideo.jp/

ニコニコ

日本最大級の動画サービス、ニコニコ（niconico）。動画にコメントを付けて楽しむニコニコ動画や、生放送番組にリアルタイムでコメントを付けられるニコニコ生放送のほか、…

When shared

nicovideo.jp

ニコニコ

日本最大級の動画サービス、ニコニコ（niconico）。動画にコメントを付けて楽しむニコニコ動画や、生放送番組にリア…

Back to top ↑

Logo & favicons

Found as: CSS background on .logo. PNG, 100 × 100.

Logo

On white

On black

On Deep Dodger Blue

Favicons

6 found

144 px · PNG icon
96 px · PNG icon
48 px · PNG icon
32 px · PNG icon
16 px · ICO shortcut icon
16 px · ICO favicon.ico

ニコニコ

Light browser tab

ニコニコ

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

Colour

Balance

How much each colour is used

White 45.1%
Near Black 21.8%
Off White 10%
Grey 7.7%
Deep Dodger Blue 6.3%
Golden Rod 2.7%
Dark Orange 1.6%
Sky Blue 1.4%
Peru 1.4%
Light Dodger Blue 1%
Red 1%

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.33:1 AAA

On white
—

Background, text, border · .SponsorsBoard-titleText, .NicoAdCardSkeleton .NicoAdCardSkeleton-cardMetaTitleLine
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 85

On text
—

On white
15.33:1 AAA

Text, background, border · .NicoAdContainer-cardMetaTitle:before, .AuroraVisionCard-metaContentTitle
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 13

On text
11.29:1 AAA

On white
1.36:1 Fail

Border, background · .nicolib-SuggestSearch-item>button:hover, .AudioController-volumeBar
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 40

On text
5.38:1 AA

On white
2.85:1 Fail

Background, text, border · .RankingContainer-contentsDigestFrame .ContentsDigestFrame-card[data-rank="4"] ., .RankingContainer-contentsDigestFrame .ContentsDigestFrame-card[data-rank="5"] .

Colours

Brand colours and accents, most used first

Deep Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
100 50 0 0

On text
4.04:1 AA large

On white
3.80:1 AA large

Text, background, graphic · .NC-Snackbar-action button, .LiveWindowContainer-metaLink:hover>.LiveWindowContainer-metaTitle
Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 25 100 15

On text
6.78:1 AA

On white
2.26:1 Fail

Background, text · .RankingContainer-contentsDigestFrame .ContentsDigestFrame-card[data-rank="1"] ., .NicoAdContainer-card[data-nicoad-grade=gold]>.NicoAdContainer-cardHeader
Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 50 100 0

On text
6.09:1 AA

On white
2.52:1 Fail

Background, text, border · .NicoNewsContainer .Tabs-tab.is-active, .NicoNewsContainer-commentCount
Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
34 12 0 24

On text
6.17:1 AA

On white
2.49:1 Fail

Background · .RankingContainer-contentsDigestFrame .ContentsDigestFrame-card[data-rank="2"] .
Peru

HEX

RGB

HSL

OKLCH

CMYK
0 31 52 17

On text
5.91:1 AA

On white
2.59:1 Fail

Background · .RankingContainer-contentsDigestFrame .ContentsDigestFrame-card[data-rank="3"] .
Light Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
67 36 0 11

On text
4.66:1 AA

On white
3.29:1 AA large

Text, graphic, border · .PublishedEventArticlesContainer-seeMore:hover, .SeeMoreLink-text:hover
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 80 0

On text
3.87:1 AA large

On white
3.96:1 AA large

Background · .StageRecommendLiveCard-label[data-status=ON_AIR], .ContentThumbnail[data-type=live]>.ContentThumbnail-label

Gradients

linear-gradient(#0a0600 50%,transparent 0)
linear-gradient(-225deg,#ffc200,#dca000)
linear-gradient(-225deg,#b3c0c0,#889c9c)

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.

Avenir

Aa 400

Avenir

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

Aa 400

Microsoft JhengHei

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

Aa 800

M PLUS Rounded 1c

Google Fonts · weights 800

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

Type scale

From the site’s CSS

Heading 1 2em · 32 px

ニコニコ

Body 13px / 1.6 Avenir

日本最大級の動画サービス、ニコニコ（niconico）。動画にコメントを付けて楽しむニコニコ動画や、生放送番組にリアルタイムでコメントを付けられる…

Small 80%

日本最大級の動画サービス、ニコニコ（niconico）。動画にコメントを付けて楽しむニコニコ動画や、生放送番組にリアルタイムでコメントを付けられる…

Button 100% / 1.15 none

Get started

Link 18px / 1.6

Sizes in use

Most common across the site

22pxline 1.4 · 5 rules
18pxline 50px · 3 rules
16pxline 22px · 4 rules
15pxline 15px · 7 rules
14pxline 20px · 20 rules
13pxline 40px · 10 rules
12pxline 16px · 28 rules
10pxline 1.4 · 8 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 · #3B3B3B

Corner radius

4px · 33×
2px · 10×
4px 0 0 4px · 5×
100px · 4×
0 4px 4px 0 · 3×
9999px · 2×

Shadows

0 0 6px 0 rgba(0,0,0,.2)
0 0 5px 0 rgba(0,0,0,.2)
0 1px 2px rgba(0,0,0,.75)
0 1px 5px 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

1113

1217

1218

1259

1260

1345

1399

1400

On a scale of 0 to 1440 px.

Content widths (max-width)

1336 px

1004 px

960 px

500 px

344 px

Back to top ↑

Notes

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

Notes

● FineThe title is 4 characters, short enough to show in full in search results.
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Back to top ↑

Questions

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

Questions

What font does ニコニコ use?: ニコニコ’s website uses two typefaces: Avenir (headings and body text), a system font; M PLUS Rounded 1c, google Fonts.
What are ニコニコ’s brand colours?: The main colours on nicovideo.jp are Deep Dodger Blue (#0080FF), Golden Rod (#DAA400), Dark Orange (#FF8000), Sky Blue (#80AAC2), Peru (#D49266) and Light Dodger Blue (#4A90E2).
What colour is ニコニコ’s text and background?: Body text is #252525 on a #FFFFFF background.
Where is ニコニコ’s logo from?: The logo shown in this guide was found on nicovideo.jp’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 nicovideo.jp’s public web pages on 23 October 2026, and isn’t affiliated with ニコニコ. 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

nicovideo-jp-tokens.css

Download

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

/* nicovideo.jp design tokens, from SiteStyleGuide (https://sitestyleguide.com/nicovideo.jp) */
:root {
  /* Colours */
  --text: #252525;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #252525;
  --colour-off-white: #DDDDDD;
  --colour-grey: #999999;
  --colour-deep-dodger-blue: #0080FF;
  --colour-golden-rod: #DAA400;
  --colour-dark-orange: #FF8000;
  --colour-sky-blue: #80AAC2;
  --colour-peru: #D49266;
  --colour-light-dodger-blue: #4A90E2;
  --colour-red: #FF0033;
  --gradient-1: linear-gradient(#0a0600 50%,transparent 0);
  --gradient-2: linear-gradient(-225deg,#ffc200,#dca000);
  --gradient-3: linear-gradient(-225deg,#b3c0c0,#889c9c);

  /* Typefaces */
  --font-body: 'Avenir', 'Lato', -apple-system, blinkmacsystemfont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN';
  --font-other: 'Microsoft JhengHei', 'LiHei Pro', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --text-body: 13px;
  --leading-body: 1.6;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: 18px;
  --leading-a: 1.6;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 2px;
  --radius-3: 4px 0 0 4px;
  --radius-4: 100px;
  --radius-5: 0 4px 4px 0;
  --radius-6: 9999px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 1113px;
  --breakpoint-2: 1217px;
  --breakpoint-3: 1218px;
  --breakpoint-4: 1259px;
  --breakpoint-5: 1260px;
  --breakpoint-6: 1345px;
  --breakpoint-7: 1399px;
  --breakpoint-8: 1400px;
  --max-width-1: 1336px;
  --max-width-2: 1004px;
  --max-width-3: 960px;
  --max-width-4: 500px;
  --max-width-5: 344px;
}

{
    "site": "nicovideo.jp",
    "source": "https://sitestyleguide.com/nicovideo.jp",
    "text": "#252525",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#252525",
            "rgb": [
                37,
                37,
                37
            ]
        },
        {
            "name": "Off White",
            "hex": "#DDDDDD",
            "rgb": [
                221,
                221,
                221
            ]
        },
        {
            "name": "Grey",
            "hex": "#999999",
            "rgb": [
                153,
                153,
                153
            ]
        },
        {
            "name": "Deep Dodger Blue",
            "hex": "#0080FF",
            "rgb": [
                0,
                128,
                255
            ]
        },
        {
            "name": "Golden Rod",
            "hex": "#DAA400",
            "rgb": [
                218,
                164,
                0
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#FF8000",
            "rgb": [
                255,
                128,
                0
            ]
        },
        {
            "name": "Sky Blue",
            "hex": "#80AAC2",
            "rgb": [
                128,
                170,
                194
            ]
        },
        {
            "name": "Peru",
            "hex": "#D49266",
            "rgb": [
                212,
                146,
                102
            ]
        },
        {
            "name": "Light Dodger Blue",
            "hex": "#4A90E2",
            "rgb": [
                74,
                144,
                226
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0033",
            "rgb": [
                255,
                0,
                51
            ]
        }
    ],
    "fonts": [
        {
            "name": "Avenir",
            "stack": "Avenir, Lato, -apple-system, BlinkMacSystemFont, Helvetica Neue, Hiragino Kaku Gothic ProN, Meiryo, メイリオ, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Microsoft JhengHei",
            "stack": "Microsoft JhengHei, LiHei Pro, Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "M PLUS Rounded 1c",
            "stack": "'M PLUS Rounded 1c'",
            "weights": [
                800
            ],
            "source": "Google Fonts"
        }
    ]
}

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 nicovideo.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/nicovideo.jp" title="ニコニコ 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 ↑

ニコニコstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Off White

Grey

Colours

Deep Dodger Blue

Golden Rod

Dark Orange

Sky Blue

Peru

Light Dodger Blue

Red

Gradients

Avenir

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

MyAnimeList.net

Facebook

Facebook

Dillard's

Plarium

ニコニコstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Off White

Grey

Colours

Deep Dodger Blue

Golden Rod

Dark Orange

Sky Blue

Peru

Light Dodger Blue

Red

Gradients

Avenir

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run nicovideo.jp?

Also set in Avenir

MyAnimeList.net

Similar colours

Facebook

Facebook

Dillard's

Plarium

Title &
description