What font does Refinery29 use?

Refinery29’s website uses three typefaces: Playfair Display (headings and body text), self-hosted; Brown Bold, self-hosted; brown Regular, self-hosted.

What are Refinery29’s brand colours?

The main colours on refinery29.com are Indian Red (#EF4B4B), Light Spring Green (#27FFBC), Peru (#DB8000), Medium Violet Red (#E5059A), Orange (#F89D2B) and Fire Brick (#CB2027).

What colour is Refinery29’s text and background?

Body text is #000000 on a #F5F5F5 background.

Where is Refinery29’s logo from?

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

Is this Refinery29’s official style guide?

No. SiteStyleGuide made it from refinery29.com’s public web pages on 31 October 2026, and isn’t affiliated with Refinery29. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from refinery29.com’s public web pages. Not affiliated with or endorsed by Refinery29. The real site is refinery29.com ↗

Unofficial style guide

Refinery29style guide

Refinery29’s website (refinery29.com) uses Playfair Display for its headings and body text. Its palette is led by Indian Red (#EF4B4B), Light Spring Green (#27FFBC) and Peru (#DB8000), with #000000 text on #F5F5F5. Captured from the live site on 31 October 2026.

Website: refinery29.com
Typefaces: Playfair Display, Brown Bold, brown Regular
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 31 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the refinery29.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: Refinery29 Australia | See, Feel, And Claim Your Power; ● 54 / 60 characters
Meta description: Refinery29 Australia exists to inspire, entertain and empower through optimistic, diverse and inclusive storytelling on everything from fashion and beauty to menstruation and finance.; ▲ 183 / 160 characters
Site name: Refinery29
og:title: Refinery29 Australia | See, Feel, And Claim Your Power
og:description: Refinery29 Australia exists to inspire, entertain and empower through optimistic, diverse and inclusive storytelling on everything from fashion and beauty to menstruation and finance.
Language: en
Theme colour: #fd5b4e

In search results

Refinery29https://www.refinery29.com/en-au

Refinery29 Australia | See, Feel, And Claim Your Power

Refinery29 Australia exists to inspire, entertain and empower through optimistic, diverse and inclusive storytelling on everything from fashion and beauty to men…

When shared

refinery29.com

Refinery29 Australia | See, Feel, And Claim Your Power

Refinery29 Australia exists to inspire, entertain and empower through optimistic, diverse and inclusive story…

Logo & favicons

Found as: image in the header. PNG, 853 × 90.

Logo

On white

On black

On Indian Red

Favicons

1 found

144 px · ICO rich-pin-icon

Refinery29 Australia | See, Feel, And Claim Your Power

Light browser tab

Refinery29 Australia | See, Feel, And Claim Your Power

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 (#000000) 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.2%
Black 19.5%
Grey 17.4%
Charcoal 6.1%
Indian Red 5.5%
Light Spring Green 4.4%
Peru 2.7%
Medium Violet Red 2.2%
Orange 2.1%
Fire Brick 1.2%
Peach Puff 1.1%
Deep Spring Green 0.9%
Fuchsia 0.9%
Antique White 0.6%
Medium Orchid 0.6%
Royal Blue 0.6%

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 · .module.page-header, body
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Background, text, border · .video-series-container .show .season-carousel .slick-slider button.fa-angle-lef, .video-series-container .show .season-carousel .slick-slider button.fa-angle-rig
Grey

HEX

RGB

HSL

OKLCH

CMYK
1 2 0 53

On text
4.67:1 AA

On white
4.50:1 AA

Text, background, border · .reviews-wrapper .carousel-reviews .slick-dots li.slick-active button, .carousel-text-wrapper .product-images .slick-dots li button
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
1.66:1 Fail

On white
12.63:1 AAA

Text, background, border · #archives-nav button, .slideshow-wrapper .slideshow-nav .nav-left i

Colours

Brand colours and accents, most used first

Indian Red

HEX

RGB

HSL

OKLCH

CMYK
0 69 69 6

On text
5.78:1 AA

On white
3.63:1 AA large

Background, border, text · button.red, button.red:active
Light Spring Green

HEX

RGB

HSL

OKLCH

CMYK
85 0 26 0

On text
16.12:1 AAA

On white
1.30:1 Fail

Border, text, background · .slideshow-wrapper .non-desktop-layout .content-caption .description h3 a, .related-entry-title
Peru

HEX

RGB

HSL

OKLCH

CMYK
0 42 100 14

On text
7.10:1 AAA

On white
2.96:1 Fail

Text, background · .product-reviews .reviews-wrapper .review .quote-after, .product-list-navigation .filter-bar .browse-label.active:before
Medium Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 98 33 10

On text
4.82:1 AA

On white
4.36:1 AA large

Text, background, border · .module.series-module header .container .title, .row.four-video .four-video-title
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 37 83 3

On text
9.85:1 AAA

On white
2.13:1 Fail

Background, text, border · .product-list-navigation .hero-wrapper, .module.shopping-module .module-header .container .large-title
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 84 81 20

On text
3.78:1 AA large

On white
5.56:1 AA

Background, text · .story-share button.fa-pinterest-p, .story-share button.fa-youtube-play
Peach Puff

HEX

RGB

HSL

OKLCH

CMYK
0 11 18 9

On text
13.87:1 AAA

On white
1.51:1 Fail

Background, border, text · button.pink, button.pink:active
Deep Spring Green

HEX

RGB

HSL

OKLCH

CMYK
85 0 44 11

On text
12.48:1 AAA

On white
1.68:1 Fail

Background, border, text · .story-share button.fa-whatsapp:hover, .card.product .buy-details .buy-button
Fuchsia

HEX

RGB

HSL

OKLCH

CMYK
0 100 16 0

On text
6.22:1 AA

On white
3.37:1 AA large

Background · .cta-bar .cta-button:nth-of-type(1), .cta-bar .cta-button:nth-of-type(3)
Antique White

HEX

RGB

HSL

OKLCH

CMYK
0 7 16 0

On text
18.06:1 AAA

On white
1.16:1 Fail

Background · .product-list-navigation .subtitle
Medium Orchid

HEX

RGB

HSL

OKLCH

CMYK
0 66 4 29

On text
4.24:1 AA large

On white
4.95:1 AA

Background · .dash-pass-container .dash-pass, .hex-map.purple:before
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
61 41 0 40

On text
3.07:1 AA large

On white
6.84:1 AA

Background, text · .story-share button.fa-facebook, .global-footer .social-container .social-nav .fa.fa-facebook:hover

Gradients

linear-gradient(90deg,#000 0,transparent)
linear-gradient(270deg,#000 0,transparent)
linear-gradient(180deg,#fff,#f5f5f5)

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.

Playfair Display

Aa 400 Aa 900

Playfair Display

Self-hosted · weights 400, 700, 900 · headings · shown in a stand-in if you don’t have it

Aa 400 Aa 700

Brown Bold

Self-hosted · weights 400, 700 · headings, buttons · shown in a stand-in if you don’t have it

Aa 300 Aa 700

brown Regular

Self-hosted · weights 300, 400, 700 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 700

Georgia

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

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

Type scale

From the site’s CSS

Heading 1 25px / 1.3em weight 400 · uppercase · Brown Bold

Refinery29

Heading 2 12px / 1.2em weight 400 · uppercase · Brown Bold

Refinery29 Australia | See, Feel, And Claim You…

Heading 3 20px / 1.3em weight 700 · none · Playfair Display

Refinery29 Australia | See, Feel, And Claim You…

Heading 4 22px / 1.3em weight 700 · none · Playfair Display

Refinery29 Australia | See, Feel, And Claim You…

Paragraph 40px / 1.3em weight 700 · none · Playfair Display

Refinery29 Australia exists to inspire, entertain and empower through optimistic, diverse and inclusive storytelling on everything from fas…

Button 30px / 1.2em weight 400 · uppercase · Brown Bold

Get started

Link 10px / 1.5em weight 400 · none · Brown Regular

Sizes in use

Most common across the site

25pxline 1.3em · 15 rules
20pxline 1.5em · 24 rules
17pxline 1.65em · 18 rules
15pxline 1.2em · 16 rules
14pxline 1.2em · 15 rules
12pxline 1.2em · 64 rules
11pxline 1.2em · 14 rules
10pxline 1.2em · 31 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

#archives-nav button · #2B2B2B · radius 30px

Corner radius

50% · 12×
25px · 5×
5px · 5×
6px · 3×
30px · 2×
100px · 2×

Shadows

0 0 20px 0 rgba(0,0,0,.05)
0 0 10px 0 rgba(0,0,0,.2)
0 0 0 1px #fff
0 0 5px #787679

Layout

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

Grid

Breakpoints

321

431

500

761

800

1221

1800

On a scale of 0 to 1800 px.

Content widths (max-width)

1800 px

1100 px

760 px

720 px

400 px

375 px

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 183 characters. Search results usually show about 160.

Questions

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

Questions

What font does Refinery29 use?: Refinery29’s website uses three typefaces: Playfair Display (headings and body text), self-hosted; Brown Bold, self-hosted; brown Regular, self-hosted.
What are Refinery29’s brand colours?: The main colours on refinery29.com are Indian Red (#EF4B4B), Light Spring Green (#27FFBC), Peru (#DB8000), Medium Violet Red (#E5059A), Orange (#F89D2B) and Fire Brick (#CB2027).
What colour is Refinery29’s text and background?: Body text is #000000 on a #F5F5F5 background.
Where is Refinery29’s logo from?: The logo shown in this guide was found on refinery29.com’s homepage. For official logo files and usage rules, check Refinery29’s own brand or press page.
Is this Refinery29’s official style guide?: No. SiteStyleGuide made it from refinery29.com’s public web pages on 31 October 2026, and isn’t affiliated with Refinery29. 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

refinery29-com-tokens.css

Download

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

/* refinery29.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/refinery29.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #F5F5F5;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-grey: #787679;
  --colour-charcoal: #333333;
  --colour-indian-red: #EF4B4B;
  --colour-light-spring-green: #27FFBC;
  --colour-peru: #DB8000;
  --colour-medium-violet-red: #E5059A;
  --colour-orange: #F89D2B;
  --colour-fire-brick: #CB2027;
  --colour-peach-puff: #E7CDBE;
  --colour-deep-spring-green: #22E480;
  --colour-fuchsia: #FF00D6;
  --colour-antique-white: #FEEBD5;
  --colour-medium-orchid: #B53DAE;
  --colour-royal-blue: #3B5998;
  --gradient-1: linear-gradient(90deg,#000 0,transparent);
  --gradient-2: linear-gradient(270deg,#000 0,transparent);
  --gradient-3: linear-gradient(180deg,#fff,#f5f5f5);

  /* Typefaces */
  --font-headings: 'Playfair Display', serif;
  --font-buttons: 'Brown Bold', sans-serif;
  --font-other: 'Brown Light', sans-serif;

  /* Type scale */
  --text-h1: 25px;
  --leading-h1: 1.3em;
  --text-h2: 12px;
  --leading-h2: 1.2em;
  --text-h3: 20px;
  --leading-h3: 1.3em;
  --text-h4: 22px;
  --leading-h4: 1.3em;
  --text-p: 40px;
  --leading-p: 1.3em;
  --text-button: 30px;
  --leading-button: 1.2em;
  --text-a: 10px;
  --leading-a: 1.5em;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 25px;
  --radius-3: 5px;
  --radius-4: 6px;
  --radius-5: 30px;
  --radius-6: 100px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 321px;
  --breakpoint-2: 431px;
  --breakpoint-3: 500px;
  --breakpoint-4: 761px;
  --breakpoint-5: 800px;
  --breakpoint-6: 1221px;
  --breakpoint-7: 1800px;
  --max-width-1: 1800px;
  --max-width-2: 1100px;
  --max-width-3: 760px;
  --max-width-4: 720px;
  --max-width-5: 400px;
  --max-width-6: 375px;
}

{
    "site": "refinery29.com",
    "source": "https://sitestyleguide.com/refinery29.com",
    "text": "#000000",
    "background": "#F5F5F5",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Grey",
            "hex": "#787679",
            "rgb": [
                120,
                118,
                121
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Indian Red",
            "hex": "#EF4B4B",
            "rgb": [
                239,
                75,
                75
            ]
        },
        {
            "name": "Light Spring Green",
            "hex": "#27FFBC",
            "rgb": [
                39,
                255,
                188
            ]
        },
        {
            "name": "Peru",
            "hex": "#DB8000",
            "rgb": [
                219,
                128,
                0
            ]
        },
        {
            "name": "Medium Violet Red",
            "hex": "#E5059A",
            "rgb": [
                229,
                5,
                154
            ]
        },
        {
            "name": "Orange",
            "hex": "#F89D2B",
            "rgb": [
                248,
                157,
                43
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#CB2027",
            "rgb": [
                203,
                32,
                39
            ]
        },
        {
            "name": "Peach Puff",
            "hex": "#E7CDBE",
            "rgb": [
                231,
                205,
                190
            ]
        },
        {
            "name": "Deep Spring Green",
            "hex": "#22E480",
            "rgb": [
                34,
                228,
                128
            ]
        },
        {
            "name": "Fuchsia",
            "hex": "#FF00D6",
            "rgb": [
                255,
                0,
                214
            ]
        },
        {
            "name": "Antique White",
            "hex": "#FEEBD5",
            "rgb": [
                254,
                235,
                213
            ]
        },
        {
            "name": "Medium Orchid",
            "hex": "#B53DAE",
            "rgb": [
                181,
                61,
                174
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#3B5998",
            "rgb": [
                59,
                89,
                152
            ]
        }
    ],
    "fonts": [
        {
            "name": "Playfair Display",
            "stack": "Playfair Display, serif",
            "weights": [
                400,
                700,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Brown Bold",
            "stack": "Brown Bold, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "brown Regular",
            "stack": "Brown Regular, sans-serif",
            "weights": [
                300,
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Georgia",
            "stack": "Georgia, Times New Roman, serif",
            "weights": [
                400,
                700
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Brown Light",
            "stack": "Brown Light, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Playfair Display as their main typeface

TheWrap

thewrap.com · set in Playfair Display
Save

Websites whose lead colour is closest to Refinery29’s

Bustle

bustle.com · 4 days ago
Save
香港專業花式跳繩學校 Hong Kong Rope Skipping Academy

hkrsa.asia · 3 days ago
Save
EaseMyTrip

easemytrip.com · 4 days ago
Save
RedLight

redlight.dev · 5 days ago
Save

Captured from refinery29.com on 31 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Refinery29; this guide describes the public website for reference.

Refinery29style guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Grey

Charcoal

Colours

Indian Red

Light Spring Green

Peru

Medium Violet Red

Orange

Fire Brick

Peach Puff

Deep Spring Green

Fuchsia

Antique White

Medium Orchid

Royal Blue

Gradients

Playfair Display

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run refinery29.com?

Also set in Playfair Display

TheWrap

Similar colours

Bustle

香港專業花式跳繩學校 Hong Kong Rope Skipping Academy

EaseMyTrip

RedLight

Title &
description