What are mixi’s brand colours?

The main colours on mixi.jp are Deep Golden Rod (#CFA34C), Red (#EE0000), Coral (#FF8A4F), Orange (#FFB827), Dark Golden Rod (#966400) and Sandy Brown (#FF9944).

What colour is mixi’s text and background?

Body text is #333333 on a #FFFFFF background.

Where is mixi’s logo from?

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

Is this mixi’s official style guide?

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

mixi 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: ¥½¡¼¥·¥ã¥ë¡¦¥Í¥Ã¥È¥ï¡¼¥¥ó¥° ¥µ¡¼¥Ó¥¹ [mixi(¥ß¥¯¥·¥£)]; ● 54 / 60 characters
Meta description: mixi(¥ß¥¯¥·¥£)¤Ï¡¢Æüµ¡¢¼Ì¿¿¶¦Í¡¢¥²¡¼¥à¤äÊØÍø¥Ä¡¼¥ëËþºÜ¤Î¥¢¥×¥ê¤Ê¤É¡¢¤µ¤Þ¤¶¤Þ¤Ê¥µ¡¼¥Ó¥¹¤ÇÍ§¿Í¡¦ÃÎ¿Í¤È¤Î¥³¥ß¥å¥Ë¥±¡¼¥·¥ç¥ó¤ò¤µ¤é¤ËÊØÍø¤Ë³Ú¤·¤¯¤¹¤ë¡¢ÆüËÜºÇÂçµ¬ÌÏ¤Î¥½¡¼¥·¥ã¥ë¡¦¥Í¥Ã¥È¥ï¡¼¥¥ó¥°¥µ¡¼¥Ó¥¹¤Ç¤¹¡£; ▲ 204 / 160 characters
Site name: mixi
og:title: mixi(¥ß¥¯¥·¥£)
og:description: mixi(¥ß¥¯¥·¥£)¤Ï¡¢Í§¿Í¡¦ÃÎ¿Í¤È¤Î¥³¥ß¥å¥Ë¥±¡¼¥·¥ç¥ó¤ò¤µ¤é¤ËÊØÍø¤Ë³Ú¤·¤¯¤¹¤ëSNS¤È¤¤¤¦¥µ¡¼¥Ó¥¹¤Ç¤¹¡£
Language: ja

In search results

mixihttps://mixi.jp/

¥½¡¼¥·¥ã¥ë¡¦¥Í¥Ã¥È¥ï¡¼¥¥ó¥° ¥µ¡¼¥Ó¥¹ [mixi(¥ß¥¯¥·¥£)]

mixi(¥ß¥¯¥·¥£)¤Ï¡¢Æüµ¡¢¼Ì¿¿¶¦Í¡¢¥²¡¼¥à¤äÊØÍø¥Ä¡¼¥ëËþºÜ¤Î¥¢¥×¥ê¤Ê¤É¡¢¤µ¤Þ¤¶¤Þ¤Ê¥µ¡¼¥Ó¥¹¤ÇÍ§¿Í¡¦ÃÎ¿Í¤È¤Î¥³¥ß¥å¥Ë¥±¡¼¥·¥ç¥ó¤ò¤µ¤é¤ËÊØÍø¤Ë³Ú¤·¤¯¤¹¤ë¡¢ÆüËÜºÇÂçµ¬ÌÏ¤…

When shared

mixi.jp

mixi(¥ß¥¯¥·¥£)

mixi(¥ß¥¯¥·¥£)¤Ï¡¢Í§¿Í¡¦ÃÎ¿Í¤È¤Î¥³¥ß¥å¥Ë¥±¡¼¥·¥ç¥ó¤ò¤µ¤é¤ËÊØÍø¤Ë³Ú¤·¤¯¤¹¤ëSNS¤È¤¤¤¦¥µ¡¼¥Ó¥¹¤Ç¤¹¡£

Back to top ↑

Logo & favicons

Found as: image in the header. SVG, 42 × 18.

Logo

On white

On black

On Deep Golden Rod

Favicons

2 found

129 px · PNG apple-touch-icon-precomposed
64 px · ICO icon

¥½¡¼¥·¥ã¥ë¡¦¥Í¥Ã¥È¥ï¡¼¥¥ó¥° ¥µ¡¼¥Ó¥¹ [mixi(¥ß¥¯¥·¥£)]

Light browser tab

¥½¡¼¥·¥ã¥ë¡¦¥Í¥Ã¥È¥ï¡¼¥¥ó¥° ¥µ¡¼¥Ó¥¹ [mixi(¥ß¥¯¥·¥£)]

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

Colour

Balance

How much each colour is used

White 34.3%
Charcoal 17.9%
Off White 11.6%
Dark Grey 9.1%
Deep Golden Rod 7.9%
Red 4.7%
Coral 2.7%
Orange 2.7%
Dark Golden Rod 2.2%
Sandy Brown 2.2%
Royal Blue 2.1%
Light Golden Rod 1.5%
Medium Violet Red 1.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

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
12.63:1 AAA

On white
—

Background, text, border · .COMMONDOC_header2017_wideHeaderLoginButton, .FRAME2016_header .searchArea .wordList
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
—

On white
12.63:1 AAA

Text · body, .FRAME2016_header ul.menu li a
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 10

On text
10.12:1 AAA

On white
1.25:1 Fail

Border, background · .newsContent .photoNews ul li h3, .COMMONDOC_header2017_mainNavListTitle
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 60

On text
2.20:1 Fail

On white
5.74:1 AA

Text · .newsContent .photoNews ul li h3, .COMMONDOC_header2017_mainNavListTitle

Colours

Brand colours and accents, most used first

Deep Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 21 63 19

On text
5.41:1 AA

On white
2.33:1 Fail

Text, border, background · .COMMONDOC_header2017_loginButton, .COMMONDOC_header2017_addButton
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 7

On text
2.79:1 Fail

On white
4.53:1 AA

Border, background · .PORTAL_loginForm__inputText:user-invalid, --MXVAR-BASE-COLOR--text-alert
Coral

HEX

RGB

HSL

OKLCH

CMYK
0 46 69 0

On text
5.42:1 AA

On white
2.33:1 Fail

Background · .COMMONDOC_header2017_mainNavHeader, .COMMONDOC_header2017_prArea
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 28 85 0

On text
7.30:1 AAA

On white
1.73:1 Fail

Background · .COMMONDOC_header2017_mainNavHeader, .COMMONDOC_header2017_prArea
Dark Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 33 100 41

On text
2.48:1 Fail

On white
5.10:1 AA

Text · .FRAME2016_header ul.menu li a:hover, --MXVAR-BASE-COLOR--text-link-focused
Sandy Brown

HEX

RGB

HSL

OKLCH

CMYK
0 40 73 0

On text
5.95:1 AA

On white
2.12:1 Fail

Text · .COMMONDOC_header2017_wideHeaderRegisterButton, .COMMONDOC_header2017_wideHeaderRegisterButton:link
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
90 59 0 16

On text
2.04:1 Fail

On white
6.18:1 AA

Text · a:link, --MXVAR-BASE-COLOR--text-link
Light Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 15 65 12

On text
7.13:1 AAA

On white
1.77:1 Fail

Border · .sideSection h2, .sectionHeader
Medium Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 34 0 48

On text
2.25:1 Fail

On white
5.63:1 AA

Text · a:visited, --MXVAR-BASE-COLOR--text-link-visited

Gradients

linear-gradient(-45deg, #ff8a4f 0%, #ffb827 100%)
linear-gradient(-130deg, #ff8a4f 0%, #ffb827 100%)

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.

Typefaces

No typefaces could be read from this site’s stylesheets. It may set them with JavaScript.

Type scale

From the site’s CSS · root 10 px

Heading 1 150% / 1.3 weight 700

mixi

Heading 2 100% / 1.3 weight 700

¥½¡¼¥·¥ã¥ë¡¦¥Í¥Ã¥È¥ï¡¼¥¥ó¥° ¥µ¡¼¥Ó¥¹ [mixi(¥ß¥…

Heading 3 100% weight 700

¥½¡¼¥·¥ã¥ë¡¦¥Í¥Ã¥È¥ï¡¼¥¥ó¥° ¥µ¡¼¥Ó¥¹ [mixi(¥ß¥…

Body 1.2rem · 12 px / 1.5

mixi(¥ß¥¯¥·¥£)¤Ï¡¢Æüµ¡¢¼Ì¿¿¶¦Í¡¢¥²¡¼¥à¤äÊØÍø¥Ä¡¼¥ëËþºÜ¤Î¥¢¥×¥ê¤Ê¤É¡¢¤µ¤Þ¤¶¤Þ¤Ê¥µ¡¼¥Ó¥¹¤ÇÍ§¿Í¡¦ÃÎ¿Í¤È¤Î¥³¥ß¥å¥Ë¥±¡¼¥·¥ç¥ó¤ò¤µ¤é¤ËÊØÍø¤Ë³Ú¤…

Paragraph 116% weight 700

mixi(¥ß¥¯¥·¥£)¤Ï¡¢Æüµ¡¢¼Ì¿¿¶¦Í¡¢¥²¡¼¥à¤äÊØÍø¥Ä¡¼¥ëËþºÜ¤Î¥¢¥×¥ê¤Ê¤É¡¢¤µ¤Þ¤¶¤Þ¤Ê¥µ¡¼¥Ó¥¹¤ÇÍ§¿Í¡¦ÃÎ¿Í¤È¤Î¥³¥ß¥å¥Ë¥±¡¼¥·¥ç¥ó¤ò¤µ¤é¤ËÊØÍø¤Ë³Ú¤…

Button 100%

Get started

Link 100%

Sizes in use

Most common across the site

24pxline 1 · 1 rules
14pxline 24px · 8 rules
12pxline 1.5 · 11 rules
10px2 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 · #1558D6

Corner radius

4px · 8×
2px · 2×
50% · 2×
4px 0 0 4px · 1×
0 4px 4px 0 · 1×

Shadows

1px 3px 10px 1px rgba(0, 0, 0, 0.4)

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

Content widths (max-width)

540 px

Back to top ↑

Notes

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

Notes

● FineThe title is 54 characters, short enough to show in full in search results.
▲ CheckThe description is 204 characters. Search results usually show about 160.
▲ CheckNo typefaces could be read from the stylesheets. The site may set them with JavaScript.

Back to top ↑

Questions

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

Questions

What are mixi’s brand colours?: The main colours on mixi.jp are Deep Golden Rod (#CFA34C), Red (#EE0000), Coral (#FF8A4F), Orange (#FFB827), Dark Golden Rod (#966400) and Sandy Brown (#FF9944).
What colour is mixi’s text and background?: Body text is #333333 on a #FFFFFF background.
Where is mixi’s logo from?: The logo shown in this guide was found on mixi.jp’s homepage. For official logo files and usage rules, check mixi’s own brand or press page.
Is this mixi’s official style guide?: No. SiteStyleGuide made it from mixi.jp’s public web pages on 3 November 2026, and isn’t affiliated with mixi. 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

mixi-jp-tokens.css

Download

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

/* mixi.jp design tokens, from SiteStyleGuide (https://sitestyleguide.com/mixi.jp) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-off-white: #E6E6E6;
  --colour-dark-grey: #666666;
  --colour-deep-golden-rod: #CFA34C;
  --colour-red: #EE0000;
  --colour-coral: #FF8A4F;
  --colour-orange: #FFB827;
  --colour-dark-golden-rod: #966400;
  --colour-sandy-brown: #FF9944;
  --colour-royal-blue: #1558D6;
  --colour-light-golden-rod: #E1C04F;
  --colour-medium-violet-red: #855885;
  --gradient-1: linear-gradient(-45deg, #ff8a4f 0%, #ffb827 100%);
  --gradient-2: linear-gradient(-130deg, #ff8a4f 0%, #ffb827 100%);

  /* Type scale */
  --text-h1: 150%;
  --leading-h1: 1.3;
  --text-h2: 100%;
  --leading-h2: 1.3;
  --text-h3: 100%;
  --text-body: 1.2rem;
  --leading-body: 1.5;
  --text-p: 116%;
  --text-button: 100%;
  --text-a: 100%;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 2px;
  --radius-3: 50%;
  --radius-4: 4px 0 0 4px;
  --radius-5: 0 4px 4px 0;
}

{
    "site": "mixi.jp",
    "source": "https://sitestyleguide.com/mixi.jp",
    "text": "#333333",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Off White",
            "hex": "#E6E6E6",
            "rgb": [
                230,
                230,
                230
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#666666",
            "rgb": [
                102,
                102,
                102
            ]
        },
        {
            "name": "Deep Golden Rod",
            "hex": "#CFA34C",
            "rgb": [
                207,
                163,
                76
            ]
        },
        {
            "name": "Red",
            "hex": "#EE0000",
            "rgb": [
                238,
                0,
                0
            ]
        },
        {
            "name": "Coral",
            "hex": "#FF8A4F",
            "rgb": [
                255,
                138,
                79
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFB827",
            "rgb": [
                255,
                184,
                39
            ]
        },
        {
            "name": "Dark Golden Rod",
            "hex": "#966400",
            "rgb": [
                150,
                100,
                0
            ]
        },
        {
            "name": "Sandy Brown",
            "hex": "#FF9944",
            "rgb": [
                255,
                153,
                68
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#1558D6",
            "rgb": [
                21,
                88,
                214
            ]
        },
        {
            "name": "Light Golden Rod",
            "hex": "#E1C04F",
            "rgb": [
                225,
                192,
                79
            ]
        },
        {
            "name": "Medium Violet Red",
            "hex": "#855885",
            "rgb": [
                133,
                88,
                133
            ]
        }
    ],
    "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 mixi.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/mixi.jp" title="mixi 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 ↑

mixistyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Off White

Dark Grey

Colours

Deep Golden Rod

Red

Coral

Orange

Dark Golden Rod

Sandy Brown

Royal Blue

Light Golden Rod

Medium Violet Red

Gradients

Typefaces

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Tasting Table

Miraheze

ViV MGMT

mysql.com

mixistyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Off White

Dark Grey

Colours

Deep Golden Rod

Red

Coral

Orange

Dark Golden Rod

Sandy Brown

Royal Blue

Light Golden Rod

Medium Violet Red

Gradients

Typefaces

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run mixi.jp?

Similar colours

Tasting Table

Miraheze

ViV MGMT

mysql.com

Title &
description