What font does 브런치 use?

브런치’s website uses four typefaces: PT Serif (headings), a system font; Nanum Myeongjo, served from t1.kakaocdn.net; Noto Sans DemiLight, served from t1.kakaocdn.net; Apple SD Gothic Neo (body text), a system font.

What are 브런치’s brand colours?

The main colours on brunch.co.kr are Medium Turquoise (#00C6BE), Dark Slate Grey (#2A6358), Light Sea Green (#00A8A0), Indian Red (#EF4444), Tomato (#FF4444) and Slate Grey (#64748B).

What colour is 브런치’s text and background?

Body text is #333333 on a #FFFFFF background.

Where is 브런치’s logo from?

The logo shown in this guide was found on brunch.co.kr’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 brunch.co.kr’s public web pages on 28 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 brunch.co.kr’s public web pages. Not affiliated with or endorsed by 브런치. The real site is brunch.co.kr ↗

Unofficial style guide

브런치style guide

브런치’s website (brunch.co.kr) sets its headings in PT Serif and its body text in Apple SD Gothic Neo. Its palette is led by Medium Turquoise (#00C6BE), Dark Slate Grey (#2A6358) and Light Sea Green (#00A8A0), with #333333 text on #FFFFFF. Captured from the live site on 28 October 2026.

Website: brunch.co.kr
Typefaces: PT Serif, Nanum Myeongjo, Noto Sans DemiLight
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 28 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the brunch.co.kr homepage on a desktop screen — Screenshot of brunch.co.kr on a 1440 px desktop screen, 28 Oct 2026.

Screenshot of the brunch.co.kr 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: 브런치; ● 3 / 60 characters
Meta description: 작품이 되는 이야기; ▲ 10 / 160 characters
Site name: 브런치
og:title: 브런치
og:description: 작품이 되는 이야기
Language: ko
Theme colour: #ffffff

In search results

브런치https://brunch.co.kr/

브런치

작품이 되는 이야기

When shared

No og:image, so no picture

brunch.co.kr

브런치

작품이 되는 이야기

Logo & favicons

Found as: schema.org logo. PNG, 180 × 180.

Logo

On white

On black

On Medium Turquoise

Favicons

4 found

180 px · PNG apple-touch-icon-precomposed
152 px · PNG apple-touch-icon-precomposed
120 px · PNG apple-touch-icon-precomposed
64 px · ICO shortcut 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 (#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 32.6%
Charcoal 13.8%
Black 13.3%
Grey 13.1%
Medium Turquoise 12.8%
Dark Slate Grey 3.1%
Light Sea Green 1.8%
Indian Red 1.6%
Tomato 1.3%
Slate Grey 1.1%
Steel Blue 1.1%
Lime Green 0.9%
Black 0.9%
Light Slate Blue 0.9%
Deep Slate Blue 0.9%
Dark Cyan 0.7%

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 · body, .pc_home .book-cover .cover-title-sm
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
—

On white
12.63:1 AAA

Text, background, border · body, .news_letter .btn_subscribe
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.66:1 Fail

On white
21.00:1 AAA

Text, background, border · .pc_home .writers-title-en, .pc_home .recommended-title
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 42

On text
4.22:1 AA large

On white
3.00:1 AA large

Text, background, border · .pc_home .writers-title-ko, --color-text-tertiary

Colours

Brand colours and accents, most used first

Medium Turquoise

HEX

RGB

HSL

OKLCH

CMYK
100 0 4 22

On text
5.91:1 AA

On white
2.14:1 Fail

Text, background, border · .btn.btn_active, .gnb .wrap_custom_mship .btn_mship.active
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
58 0 11 61

On text
1.82:1 Fail

On white
6.94:1 AA

Background, text, border · #wrapSideMenu .btn_apply_mship, .service_header .btn_mship_request
Light Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 5 34

On text
4.28:1 AA large

On white
2.95:1 Fail

Text, background, border · --color-dark-primary, --color-primary-600
Indian Red

HEX

RGB

HSL

OKLCH

CMYK
0 72 72 6

On text
3.36:1 AA large

On white
3.76:1 AA large

Text, background, border · --color-error-500, .bg-error-500
Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 73 73 0

On text
3.71:1 AA large

On white
3.41:1 AA large

Background, text · --color-error-600, --color-error-hover
Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
28 17 0 45

On text
2.65:1 Fail

On white
4.76:1 AA

Background · --color-secondary-500, --color-muted-foreground
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 52 0 0

On text
3.15:1 AA large

On white
4.02:1 AA large

Text · --color-ios-accent, --color-primary-blue-500
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
83 0 52 23

On text
5.54:1 AA

On white
2.28:1 Fail

Background, text, border · --color-success-500, .bg-success-500
Black

HEX

RGB

HSL

OKLCH

CMYK
64 45 0 84

On text
1.41:1 Fail

On white
17.85:1 AAA

Text · --color-secondary-900, --color-foreground
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
32 19 0 59

On text
1.67:1 Fail

On white
7.58:1 AAA

Text · --color-secondary-600, --color-secondary-gray-600
Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
40 24 0 67

On text
1.22:1 Fail

On white
10.35:1 AAA

Text · --color-secondary-700, --color-secondary-gray-700
Dark Cyan

HEX

RGB

HSL

OKLCH

CMYK
100 0 6 46

On text
2.98:1 Fail

On white
4.24:1 AA large

Text, background · --color-primary-700, .text-primary-700

Gradients

linear-gradient(90deg,#f0f0f025%,#e0e0e050%,#f0f0f075%)
linear-gradient(initial)
linear-gradient(180deg,transparent,rgba(0,0,0,.26))

Dark mode

Switched on by the site

Off White

#E7E7E7
Dark Grey

#606060
Black

#000000
Off White

#F8F8F8
Near Black

#171717
Charcoal

#262626
Light Sea Green

#00AEA7
Charcoal

#383838
Grey

#828282
Cool Charcoal

#3F3F46
Medium Turquoise

#00C6BE
Grey

#959595

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.

PT Serif

Aa 400 Aa 700

PT Serif

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

Aa 300 Aa 700

Nanum Myeongjo

Served from t1.kakaocdn.net · weights 300, 400, 600, 700 · headings · shown in a stand-in if you don’t have it

Aa 400

Noto Sans DemiLight

Served from t1.kakaocdn.net · weights 400 · headings · shown in a stand-in if you don’t have it

Aa 300 Aa 600

Apple SD Gothic Neo

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

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

Type scale

From the site’s CSS

Heading 3 24px / 32px weight 600 · Nanum Myeongjo

브런치

Body — Apple SD Gothic Neo

작품이 되는 이야기

Small 80%

작품이 되는 이야기

Button 13px

Get started

Sizes in use

Most common across the site

32pxline 40px · 10 rules
22pxline 28px · 10 rules
16pxline 22px · 15 rules
15pxline 23px · 12 rules
14pxline 20px · 26 rules
13pxline 20px · 22 rules
12pxline 18px · 28 rules
11pxline normal · 17 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

#wrapSideMenu .btn_apply_mship · #2A6358 · radius 16px

Corner radius

50% · 18×
16px · 8×
20px · 5×
4px · 4×
2px 6px 6px 2px · 4×
2px · 3×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000
10px 4px 12px #0003
0 2px 8px #0000001a
0 10px 20px #0000001a

Layout

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

Grid

Breakpoints

640

720

767

768

769

1023

1024

1280

On a scale of 0 to 1440 px.

Content widths (max-width)

1600 px

920 px

768 px

700 px

640 px

600 px

Notes

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

Notes

● FineThe title is 3 characters, short enough to show in full in search results.
▲ CheckThe description is only 10 characters. There is room to say more.

Questions

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

Questions

What font does 브런치 use?: 브런치’s website uses four typefaces: PT Serif (headings), a system font; Nanum Myeongjo, served from t1.kakaocdn.net; Noto Sans DemiLight, served from t1.kakaocdn.net; Apple SD Gothic Neo (body text), a system font.
What are 브런치’s brand colours?: The main colours on brunch.co.kr are Medium Turquoise (#00C6BE), Dark Slate Grey (#2A6358), Light Sea Green (#00A8A0), Indian Red (#EF4444), Tomato (#FF4444) and Slate Grey (#64748B).
What colour is 브런치’s text and background?: Body text is #333333 on a #FFFFFF background.
Where is 브런치’s logo from?: The logo shown in this guide was found on brunch.co.kr’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 brunch.co.kr’s public web pages on 28 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

brunch-co-kr-tokens.css

Download

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

/* brunch.co.kr design tokens, from SiteStyleGuide (https://sitestyleguide.com/brunch.co.kr) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-black: #000000;
  --colour-grey: #959595;
  --colour-medium-turquoise: #00C6BE;
  --colour-dark-slate-grey: #2A6358;
  --colour-light-sea-green: #00A8A0;
  --colour-indian-red: #EF4444;
  --colour-tomato: #FF4444;
  --colour-slate-grey: #64748B;
  --colour-steel-blue: #007AFF;
  --colour-lime-green: #22C55E;
  --colour-black-2: #0F172A;
  --colour-light-slate-blue: #475569;
  --colour-deep-slate-blue: #334155;
  --colour-dark-cyan: #008A82;
  --gradient-1: linear-gradient(90deg,#f0f0f025%,#e0e0e050%,#f0f0f075%);
  --gradient-2: linear-gradient(initial);
  --gradient-3: linear-gradient(180deg,transparent,rgba(0,0,0,.26));

  /* Typefaces */
  --font-headings: 'PT Serif', 'Georgia', serif;
  --font-buttons: 'PT Serif', 'Georgia', serif;
  --font-body: 'Apple SD Gothic Neo', 'AppleSDGothicNeo-Light', 'Malgun Gothic', 'NanumBarunGothicOTF', sans-serif;

  /* Type scale */
  --text-h3: 24px;
  --leading-h3: 32px;
  --text-small: 80%;
  --text-button: 13px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 640px;
  --breakpoint-2: 720px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 769px;
  --breakpoint-6: 1023px;
  --breakpoint-7: 1024px;
  --breakpoint-8: 1280px;
  --max-width-1: 1600px;
  --max-width-2: 920px;
  --max-width-3: 768px;
  --max-width-4: 700px;
  --max-width-5: 640px;
  --max-width-6: 600px;
}

{
    "site": "brunch.co.kr",
    "source": "https://sitestyleguide.com/brunch.co.kr",
    "text": "#333333",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Grey",
            "hex": "#959595",
            "rgb": [
                149,
                149,
                149
            ]
        },
        {
            "name": "Medium Turquoise",
            "hex": "#00C6BE",
            "rgb": [
                0,
                198,
                190
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#2A6358",
            "rgb": [
                42,
                99,
                88
            ]
        },
        {
            "name": "Light Sea Green",
            "hex": "#00A8A0",
            "rgb": [
                0,
                168,
                160
            ]
        },
        {
            "name": "Indian Red",
            "hex": "#EF4444",
            "rgb": [
                239,
                68,
                68
            ]
        },
        {
            "name": "Tomato",
            "hex": "#FF4444",
            "rgb": [
                255,
                68,
                68
            ]
        },
        {
            "name": "Slate Grey",
            "hex": "#64748B",
            "rgb": [
                100,
                116,
                139
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#007AFF",
            "rgb": [
                0,
                122,
                255
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#22C55E",
            "rgb": [
                34,
                197,
                94
            ]
        },
        {
            "name": "Black",
            "hex": "#0F172A",
            "rgb": [
                15,
                23,
                42
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#475569",
            "rgb": [
                71,
                85,
                105
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#334155",
            "rgb": [
                51,
                65,
                85
            ]
        },
        {
            "name": "Dark Cyan",
            "hex": "#008A82",
            "rgb": [
                0,
                138,
                130
            ]
        }
    ],
    "fonts": [
        {
            "name": "PT Serif",
            "stack": "\"PT Serif\", Georgia, serif",
            "weights": [
                400,
                700
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Nanum Myeongjo",
            "stack": "Nanum Myeongjo, sans-serif",
            "weights": [
                300,
                400,
                600,
                700
            ],
            "source": "Served from t1.kakaocdn.net"
        },
        {
            "name": "Noto Sans DemiLight",
            "stack": "Noto Sans DemiLight, Malgun Gothic, sans-serif",
            "weights": [
                400
            ],
            "source": "Served from t1.kakaocdn.net"
        },
        {
            "name": "Apple SD Gothic Neo",
            "stack": "\"Apple SD Gothic Neo\", \"AppleSDGothicNeo-Light\", \"Malgun Gothic\", \"NanumBarunGothicOTF\", sans-serif",
            "weights": [
                300,
                600
            ],
            "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": "Noto Sans Light",
            "stack": "Noto Sans Light, sans-serif",
            "weights": [
                400
            ],
            "source": "Served from t1.kakaocdn.net"
        }
    ]
}

Other websites using PT Serif as their main typeface

San Francisco Examiner

sfexaminer.com · set in PT Serif
Save

Websites whose lead colour is closest to 브런치’s

Scoop.it

scoop.it · 6 days ago
Save
Chris Pirillo

pirillo.com · 5 days ago
Save
BlogVitals

blogvitals.com · 5 days ago
Save
Emote Digital

emotedigital.com.au · 19 hours ago
Save

Captured from brunch.co.kr on 28 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

Black

Grey

Colours

Medium Turquoise

Dark Slate Grey

Light Sea Green

Indian Red

Tomato

Slate Grey

Steel Blue

Lime Green

Black

Light Slate Blue

Deep Slate Blue

Dark Cyan

Gradients

Dark mode

PT Serif

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run brunch.co.kr?

Also set in PT Serif

San Francisco Examiner

Similar colours

Scoop.it

Chris Pirillo

BlogVitals

Emote Digital

Title &
description