What font does 博客园 use?

博客园’s website uses one typeface: PingFang SC (headings and body text), a system font.

What are 博客园’s brand colours?

The main colours on cnblogs.com are Light Red (#FF0000), Light Dodger Blue (#2F96FD), Steel Blue (#4A81B8), Light Royal Blue (#1F69FF), Slate Blue (#5252F0) and Deep Red (#E20018).

What colour is 博客园’s text and background?

Body text is #2B2B2B on a #F9F9F9 background.

Where is 博客园’s logo from?

The logo shown in this guide was found on cnblogs.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 cnblogs.com’s public web pages on 30 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 cnblogs.com’s public web pages. Not affiliated with or endorsed by 博客园. The real site is cnblogs.com ↗

Unofficial style guide

博客园style guide

博客园’s website (cnblogs.com) uses PingFang SC for its headings and body text. Its palette is led by Light Red (#FF0000), Light Dodger Blue (#2F96FD) and Steel Blue (#4A81B8), with #2B2B2B text on #F9F9F9. Captured from the live site on 30 October 2026.

Website: cnblogs.com
Typefaces: PingFang SC, Apple Color Emoji, PingFangSC-Regular
Palette: 4 neutrals, 12 colours
Captured: 30 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the cnblogs.com homepage on a desktop screen — Screenshot of cnblogs.com on a 1440 px desktop screen, 30 Oct 2026.

Screenshot of the cnblogs.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: 博客园 - 开发者的网上家园; ● 14 / 60 characters
Meta description: 博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。; ● 105 / 160 characters
og:description: 专注于为开发者服务，帮助开发者用代码改变世界
Language: zh-cn

In search results

博客园https://www.cnblogs.com/

博客园 - 开发者的网上家园

博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者…

When shared

cnblogs.com

博客园 - 开发者的网上家园

专注于为开发者服务，帮助开发者用代码改变世界

Logo & favicons

Found as: image in the header. SVG, 280 × 103.

Logo

On white

On black

On Light Red

Favicons

3 found

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

Colour

Balance

How much each colour is used

White 31.4%
Light Red 11%
Off White 10.6%
Grey 9.4%
Cool Near Black 7.7%
Light Dodger Blue 6.2%
Steel Blue 4.2%
Light Royal Blue 4.2%
Slate Blue 2.9%
Deep Red 2.8%
Fire Brick 2.2%
Deep Royal Blue 1.7%
Deep Dodger Blue 1.6%
Forest Green 1.6%
Orange Red 1.4%
Maroon 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
14.16:1 AAA

On white
—

Background, text, border · body, .dropdown > .dropdown-menu .card-title-line
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 7

On text
12.20:1 AAA

On white
1.16:1 Fail

Text, border, background · .body-dark .sidebar .card .card-title, .body-dark .navbar-dark>nav a
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 47

On text
3.99:1 AA large

On white
3.54:1 AA large

Text · .sidebar .editorpick .card-title, .sidebar .card .card-title
Cool Near Black

HEX

RGB

HSL

OKLCH

CMYK
14 17 0 86

On text
1.17:1 Fail

On white
16.54:1 AAA

Background, border · .body-dark .navbar-dark, .body-dark .navbar-dark .dropdown>.dropdown-menu

Colours

Brand colours and accents, most used first

Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
3.54:1 AA large

On white
4.00:1 AA large

Text, background · inline style on <span>, .navbar #msg_count
Light Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
81 41 0 1

On text
4.65:1 AA

On white
3.04:1 AA large

Text, background, border · .card-list>.card>ul.post-list, .headline-list>.headline-item>.headline-title>a:hover
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
60 30 0 28

On text
3.45:1 AA large

On white
4.10:1 AA large

Text, graphic · .card>.card-subtitle-block>.active, .post-list>.post-item>.post-item-body>.post-item-foot>.post-meta-item.btn:hover
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
88 59 0 0

On text
3.05:1 AA large

On white
4.64:1 AA

Text · .navbar>nav .nav-harmonyos, .navbar .navbar-mobile>.navbar-list .nav-harmonyos
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
66 66 0 6

On text
2.58:1 Fail

On white
5.49:1 AA

Text, border, background · .bg-primary-600, .text-primary-600
Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 89 11

On text
2.86:1 Fail

On white
4.94:1 AA

Background, text, border · .data-error\:disabled\:bg-alert-600:disabled[data-status~=error], .data-danger\:bg-alert-600[data-danger=true]
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 91 36

On text
1.74:1 Fail

On white
8.12:1 AAA

Background, text, border · .data-error\:disabled\:bg-alert-700:disabled[data-status~=error], .data-danger\:text-alert-700[data-danger=true]
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 44 0 35

On text
2.10:1 Fail

On white
6.74:1 AA

Text · .post-list>.post-item>.post-item-body>.post-item-text>.post-item-title:link
Deep Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
75 34 0 16

On text
4.05:1 AA large

On white
3.50:1 AA large

Text · .headline-list>.headline-item>.headline-title>a:visited, .card-list>.card>ul.post-list>li>a:visited
Forest Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 56 44

On text
3.37:1 AA large

On white
4.20:1 AA large

Background, text, border · .data-success\:disabled\:bg-ease-700:disabled[data-status~=success], .data-success\:disabled\:text-ease-700:disabled[data-status~=success]
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 60 100 0

On text
4.82:1 AA

On white
2.94:1 Fail

Text · .post-list>.post-item>.post-item-body>.post-item-text>.post-item-title:hover, .main-flow .headline a:hover
Maroon

HEX

RGB

HSL

OKLCH

CMYK
0 100 95 60

On text
1.06:1 Fail

On white
13.30:1 AAA

Text, background, border · .data-danger\:active\:bg-alert-800:active[data-danger=true], .data-danger\:hover\:text-alert-800:hover[data-danger=true]

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.

PingFang SC

Aa 400

PingFang SC

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

Aa 400

Apple Color Emoji

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

Aa 400

PingFangSC-Regular

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

Aa 400

Arial-Black

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

Body — weight 400 · PingFang SC

博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享…

Small 80%

Button 100% none

Get started

Link 14px / 24px weight 500

Sizes in use

Most common across the site

20px1 rules
18pxline 1.75rem · 2 rules
16pxline 32px · 8 rules
15pxline 46px · 4 rules
14pxline 22.5px · 16 rules
13pxline 20px · 7 rules
12pxline 28px · 8 rules
8pxline 11px · 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

Corner radius

5px · 2×
50% · 2×
4px · 2×
6px · 1×
10px · 1×
1rem · 1×

Shadows

2px 2px 13px 0 rgba(212,212,212,.5)
rgba(200,200,200,.2) 1px 2px 4px 1px
0 2px 4px 1px rgba(200,200,200,.2)
0 2px 4px 1px rgba(200,200,200,.5)

Layout

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

Grid

Breakpoints

475

640

768

769

1199

On a scale of 0 to 1440 px.

Content widths (max-width)

768 px

576 px

329 px

300 px

Notes

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

Notes

● FineThe title is 14 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: PingFang SC (headings and body text), a system font.
What are 博客园’s brand colours?: The main colours on cnblogs.com are Light Red (#FF0000), Light Dodger Blue (#2F96FD), Steel Blue (#4A81B8), Light Royal Blue (#1F69FF), Slate Blue (#5252F0) and Deep Red (#E20018).
What colour is 博客园’s text and background?: Body text is #2B2B2B on a #F9F9F9 background.
Where is 博客园’s logo from?: The logo shown in this guide was found on cnblogs.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 cnblogs.com’s public web pages on 30 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

cnblogs-com-tokens.css

Download

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

/* cnblogs.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/cnblogs.com) */
:root {
  /* Colours */
  --text: #2B2B2B;
  --background: #F9F9F9;
  --colour-white: #FFFFFF;
  --colour-off-white: #EEEEEE;
  --colour-grey: #888888;
  --colour-cool-near-black: #1F1E24;
  --colour-light-red: #FF0000;
  --colour-light-dodger-blue: #2F96FD;
  --colour-steel-blue: #4A81B8;
  --colour-light-royal-blue: #1F69FF;
  --colour-slate-blue: #5252F0;
  --colour-deep-red: #E20018;
  --colour-fire-brick: #A4000E;
  --colour-deep-royal-blue: #005DA6;
  --colour-deep-dodger-blue: #358ED7;
  --colour-forest-green: #008F3F;
  --colour-orange-red: #FF6600;
  --colour-maroon: #670005;

  /* Typefaces */
  --font-body: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-other: 'PingFangSC-Regular', sans-serif;

  /* Type scale */
  --text-small: 80%;
  --text-button: 100%;
  --text-a: 14px;
  --leading-a: 24px;

  /* Shape */
  --radius-1: 5px;
  --radius-2: 50%;
  --radius-3: 4px;
  --radius-4: 6px;
  --radius-5: 10px;
  --radius-6: 1rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 475px;
  --breakpoint-2: 640px;
  --breakpoint-3: 768px;
  --breakpoint-4: 769px;
  --breakpoint-5: 1199px;
  --max-width-1: 768px;
  --max-width-2: 576px;
  --max-width-3: 329px;
  --max-width-4: 300px;
}

{
    "site": "cnblogs.com",
    "source": "https://sitestyleguide.com/cnblogs.com",
    "text": "#2B2B2B",
    "background": "#F9F9F9",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Off White",
            "hex": "#EEEEEE",
            "rgb": [
                238,
                238,
                238
            ]
        },
        {
            "name": "Grey",
            "hex": "#888888",
            "rgb": [
                136,
                136,
                136
            ]
        },
        {
            "name": "Cool Near Black",
            "hex": "#1F1E24",
            "rgb": [
                31,
                30,
                36
            ]
        },
        {
            "name": "Light Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        },
        {
            "name": "Light Dodger Blue",
            "hex": "#2F96FD",
            "rgb": [
                47,
                150,
                253
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#4A81B8",
            "rgb": [
                74,
                129,
                184
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#1F69FF",
            "rgb": [
                31,
                105,
                255
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#5252F0",
            "rgb": [
                82,
                82,
                240
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#E20018",
            "rgb": [
                226,
                0,
                24
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#A4000E",
            "rgb": [
                164,
                0,
                14
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#005DA6",
            "rgb": [
                0,
                93,
                166
            ]
        },
        {
            "name": "Deep Dodger Blue",
            "hex": "#358ED7",
            "rgb": [
                53,
                142,
                215
            ]
        },
        {
            "name": "Forest Green",
            "hex": "#008F3F",
            "rgb": [
                0,
                143,
                63
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF6600",
            "rgb": [
                255,
                102,
                0
            ]
        },
        {
            "name": "Maroon",
            "hex": "#670005",
            "rgb": [
                103,
                0,
                5
            ]
        }
    ],
    "fonts": [
        {
            "name": "PingFang SC",
            "stack": "\"PingFang SC\", \"Microsoft YaHei\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Apple Color Emoji",
            "stack": "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", Segoe UI Symbol, \"Noto Color Emoji\"",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "PingFangSC-Regular",
            "stack": "PingFangSC-Regular, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Arial-Black",
            "stack": "Arial-Black, Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "SFMono-Regular",
            "stack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using PingFang SC as their main typeface

bilibili.com

bilibili.com · set in PingFang SC
Save
qq.com

qq.com · set in PingFang SC
Save
淘宝网

cnzz.com · set in PingFang SC
Save
xinhuanet.com

xinhuanet.com · set in PingFang SC
Save

Websites whose lead colour is closest to 博客园’s

YouGlish

youglish.com · 4 days ago
Save
microdot.vision

microdot.vision · 5 days ago
Save
thetimes.com

thetimes.com · 5 days ago
Save
₽ МОСГОРКРЕДИТ

mosgorcredit.ru · 5 days ago
Save

Captured from cnblogs.com on 30 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

Off White

Grey

Cool Near Black

Colours

Light Red

Light Dodger Blue

Steel Blue

Light Royal Blue

Slate Blue

Deep Red

Fire Brick

Deep Royal Blue

Deep Dodger Blue

Forest Green

Orange Red

Maroon

PingFang SC

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run cnblogs.com?

Also set in PingFang SC

bilibili.com

qq.com

淘宝网

xinhuanet.com

Similar colours

YouGlish

microdot.vision

thetimes.com

₽ МОСГОРКРЕДИТ

Title &
description