What font does Fenty Beauty use?

Fenty Beauty’s website uses two typefaces: Brown (headings and body text), self-hosted; yotpo-widget-font, served from staticw2.yotpo.com.

What are Fenty Beauty’s brand colours?

The main colours on fentybeauty.com are Sienna (#AB4824), Fire Brick (#BD0100), Deep Slate Blue (#4B3DC4), Saddle Brown (#684537), Dark Slate Grey (#1F3521) and Brown (#A52A2A).

What colour is Fenty Beauty’s text and background?

Body text is #2B2727 on a #FFFFFF background.

Where is Fenty Beauty’s logo from?

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

Is this Fenty Beauty’s official style guide?

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

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

Unofficial style guide

Fenty Beautystyle guide

Fenty Beauty’s website (fentybeauty.com) uses Brown for its headings and body text. Its palette is led by Sienna (#AB4824), Fire Brick (#BD0100) and Deep Slate Blue (#4B3DC4), with #2B2727 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: fentybeauty.com
Typefaces: Brown, yotpo-widget-font
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the fentybeauty.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: Fenty Beauty by Rihanna | Beauty for All; ● 40 / 60 characters
Meta description: Fenty Beauty by Rihanna was created with promise of inclusion for all women. With an unmatched offering of shades and colors for ALL skin tones, you'll never look elsewhere for your beauty staples. Browse our foundation line, lip colors, and so much more.; ▲ 255 / 160 characters
Site name: Fenty Beauty
og:title: Fenty Beauty by Rihanna | Beauty for All
og:description: Fenty Beauty by Rihanna was created with promise of inclusion for all women. With an unmatched offering of shades and colors for ALL skin tones, you'll never look elsewhere for your beauty staples. Browse our foundation line, lip colors, and so much more.
Language: en

In search results

Fenty Beautyhttps://fentybeauty.com/en-au

Fenty Beauty by Rihanna | Beauty for All

Fenty Beauty by Rihanna was created with promise of inclusion for all women. With an unmatched offering of shades and colors for ALL skin tones, you'll never loo…

When shared

The image Fenty Beauty shares with links

fentybeauty.com

Fenty Beauty by Rihanna | Beauty for All

Fenty Beauty by Rihanna was created with promise of inclusion for all women. With an unmatched offering of sh…

Logo & favicons

Found as: schema.org logo. SVG, 218 × 12.

Logo

On white

On black

On Sienna

Favicons

1 found

32 px · PNG icon

Fenty Beauty by Rihanna | Beauty for All

Light browser tab

Fenty Beauty by Rihanna | Beauty for All

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

Colour

Balance

How much each colour is used

White 30.9%
Black 20.9%
Light Grey 16.5%
Charcoal 16%
Sienna 4.7%
Fire Brick 2.4%
Deep Slate Blue 1.7%
Saddle Brown 1.1%
Dark Slate Grey 0.9%
Brown 0.9%
Misty Rose 0.8%
Plum 0.8%
Lime Green 0.6%
Khaki 0.6%
Light Slate Blue 0.6%
Chocolate 0.5%

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

On white
—

Background, text, graphic · body, --color-background
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.42:1 Fail

On white
21.00:1 AAA

Text, background, border · .btn[variant=secondary-inverse], .btn[variant=secondary]
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 1 1 30

On text
6.97:1 AA

On white
2.12:1 Fail

Text, background, border · --color-disabled, .btn[variant=secondary]:disabled
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 9 9 83

On text
—

On white
14.77:1 AAA

Text, background, border · body, --color-foreground

Colours

Brand colours and accents, most used first

Sienna

HEX

RGB

HSL

OKLCH

CMYK
0 58 79 33

On text
2.59:1 Fail

On white
5.70:1 AA

Background, text · .btn[variant=primary-inverse], .btn[variant=primary-inverse]:hover
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 99 100 26

On text
2.23:1 Fail

On white
6.63:1 AA

Text, background · --color-danger, .text-danger
Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
62 69 0 23

On text
1.94:1 Fail

On white
7.60:1 AAA

Border, text · --color-focus, .text-focus
Saddle Brown

HEX

RGB

HSL

OKLCH

CMYK
0 34 47 59

On text
1.75:1 Fail

On white
8.42:1 AAA

Background · --color-accent-04, .bg-accent-04
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
42 0 38 79

On text
1.12:1 Fail

On white
13.21:1 AAA

Background, text · .rivo-gift-card-lookup-gift-card, .rivo-gift-card-lookup-tooltip
Brown

HEX

RGB

HSL

OKLCH

CMYK
0 75 75 35

On text
2.08:1 Fail

On white
7.08:1 AAA

Used · --font-family-primary, --gecx-agent-button-font-family
Misty Rose

HEX

RGB

HSL

OKLCH

CMYK
0 15 21 12

On text
8.56:1 AAA

On white
1.73:1 Fail

Used · --color-accent-01
Plum

HEX

RGB

HSL

OKLCH

CMYK
0 40 14 2

On text
7.36:1 AAA

On white
2.01:1 Fail

Used · --gecx-agent-button-shimmer-color, --gecx-agent-button-shimmer-color-hover
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 73 31

On text
5.04:1 AA

On white
2.93:1 Fail

Text · .text-green, --color-green
Khaki

HEX

RGB

HSL

OKLCH

CMYK
0 13 52 0

On text
11.24:1 AAA

On white
1.31:1 Fail

Text · .text-yellow, --color-yellow
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
4 31 0 56

On text
2.09:1 Fail

On white
7.08:1 AAA

Text · --gecx-agent-button-color, .text-\[\#6C4E71\]
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 51 80 20

On text
3.78:1 AA large

On white
3.90:1 AA large

Background · .rivo-gift-card-lookup-code-wrapper

Gradients

linear-gradient(to bottom, 0%,color-mix(in srgb, 6%,) 30%,color-mix(in srgb, 19%,) 50%,color-mix(in srgb, 39%,) 60%, 72%,color-mix(in srgb, 55%,) 86%, 100%)
linear-gradient(to bottom,#331c0f,#331c0f8c 45%,#331c0f00)
radial-gradient(ellipse closest-side, 12%,color-mix(in srgb, 50%,transparent) 45%,transparent 100%)

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.

Brown

Aa 300 Aa 700

Brown

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

Aa 400

yotpo-widget-font

Served from staticw2.yotpo.com · weights 400 · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 min(max(38px,5.55556vw),80px) · 80 px / 1.2 weight 700 · none · Brown

Fenty Beauty

Heading 2 min(max(36px,4.58333vw),66px) · 66 px / 1.2 weight 700 · none · Brown

Fenty Beauty by Rihanna | Beauty for All

Heading 3 min(max(32px,3.33333vw),48px) · 48 px / 1.2 weight 700 · none · Brown

Fenty Beauty by Rihanna | Beauty for All

Heading 4 min(max(24px,2.22222vw),32px) · 32 px / 1.2 weight 700 · none · Brown

Fenty Beauty by Rihanna | Beauty for All

Heading 5 min(max(18px,1.66667vw),24px) · 24 px / 1.2 weight 700 · none · Brown

Fenty Beauty by Rihanna | Beauty for All

Heading 6 min(max(14px,1.11111vw),16px) · 16 px / 1.2 weight 700 · none · Brown

Fenty Beauty by Rihanna | Beauty for All

Body — / 1.5 Brown

Fenty Beauty by Rihanna was created with promise of inclusion for all women. With an unmatched offering of shades and colors for ALL skin t…

Paragraph min(max(12px,.833333vw),12px) · 12 px / 1.17 weight 400 · none · Brown

Fenty Beauty by Rihanna was created with promise of inclusion for all women. With an unmatched offering of shades and colors for ALL skin t…

Small 80%

Fenty Beauty by Rihanna was created with promise of inclusion for all women. With an unmatched offering of shades and colors for ALL skin t…

Button .875rem · 14 px / initial weight 700 · math-auto · Brown

Get started

Link 11px / calc(.25rem*6)

Sizes in use

Most common across the site

48pxline 1 · 5 rules
24pxline 1 · 9 rules
20pxline 1.1 · 5 rules
18pxline 1 · 6 rules
16pxline 1 · 36 rules
14pxline 1.29 · 29 rules
13pxline 1.2 · 22 rules
12pxline 1.33 · 33 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

.btn[variant=primary-inverse] · #AB4824

Corner radius

4px · 12×
50% · 12×
.25rem · 9×
8px · 7×
3px · 7×
5px · 6×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000
0 0 #0000
1px 1px 4px #0003
0 0 1px #888

Layout

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

Grid

Breakpoints

450

480

640

767

768

840

1024

1280

On a scale of 0 to 1440 px.

Content widths (max-width)

1536 px

1280 px

1024 px

768 px

640 px

400 px

Notes

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

Notes

● FineThe title is 40 characters, short enough to show in full in search results.
▲ CheckThe description is 255 characters. Search results usually show about 160.
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Questions

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

Questions

What font does Fenty Beauty use?: Fenty Beauty’s website uses two typefaces: Brown (headings and body text), self-hosted; yotpo-widget-font, served from staticw2.yotpo.com.
What are Fenty Beauty’s brand colours?: The main colours on fentybeauty.com are Sienna (#AB4824), Fire Brick (#BD0100), Deep Slate Blue (#4B3DC4), Saddle Brown (#684537), Dark Slate Grey (#1F3521) and Brown (#A52A2A).
What colour is Fenty Beauty’s text and background?: Body text is #2B2727 on a #FFFFFF background.
Where is Fenty Beauty’s logo from?: The logo shown in this guide was found on fentybeauty.com’s homepage. For official logo files and usage rules, check Fenty Beauty’s own brand or press page.
Is this Fenty Beauty’s official style guide?: No. SiteStyleGuide made it from fentybeauty.com’s public web pages on 26 October 2026, and isn’t affiliated with Fenty Beauty. 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

fentybeauty-com-tokens.css

Download

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

/* fentybeauty.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/fentybeauty.com) */
:root {
  /* Colours */
  --text: #2B2727;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-light-grey: #B3B2B1;
  --colour-charcoal: #2B2727;
  --colour-sienna: #AB4824;
  --colour-fire-brick: #BD0100;
  --colour-deep-slate-blue: #4B3DC4;
  --colour-saddle-brown: #684537;
  --colour-dark-slate-grey: #1F3521;
  --colour-brown: #A52A2A;
  --colour-misty-rose: #E0BEB1;
  --colour-plum: #FB96D9;
  --colour-lime-green: #00AF2F;
  --colour-khaki: #FFDE7B;
  --colour-light-slate-blue: #6C4E71;
  --colour-chocolate: #CC6328;
  --gradient-1: linear-gradient(to bottom, 0%,color-mix(in srgb, 6%,) 30%,color-mix(in srgb, 19%,) 50%,color-mix(in srgb, 39%,) 60%, 72%,color-mix(in srgb, 55%,) 86%, 100%);
  --gradient-2: linear-gradient(to bottom,#331c0f,#331c0f8c 45%,#331c0f00);
  --gradient-3: radial-gradient(ellipse closest-side, 12%,color-mix(in srgb, 50%,transparent) 45%,transparent 100%);

  /* Typefaces */
  --font-headings: 'Brown';
  --font-buttons: 'Brown';
  --font-body: 'Brown';
  --font-other: 'yotpo-widget-font';

  /* Type scale */
  --text-h1: min(max(38px,5.55556vw),80px);
  --leading-h1: 1.2;
  --text-h2: min(max(36px,4.58333vw),66px);
  --leading-h2: 1.2;
  --text-h3: min(max(32px,3.33333vw),48px);
  --leading-h3: 1.2;
  --text-h4: min(max(24px,2.22222vw),32px);
  --leading-h4: 1.2;
  --text-h5: min(max(18px,1.66667vw),24px);
  --leading-h5: 1.2;
  --text-h6: min(max(14px,1.11111vw),16px);
  --leading-h6: 1.2;
  --text-p: min(max(12px,.833333vw),12px);
  --leading-p: 1.17;
  --text-small: 80%;
  --text-button: .875rem;
  --leading-button: initial;
  --text-a: 11px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 450px;
  --breakpoint-2: 480px;
  --breakpoint-3: 640px;
  --breakpoint-4: 767px;
  --breakpoint-5: 768px;
  --breakpoint-6: 840px;
  --breakpoint-7: 1024px;
  --breakpoint-8: 1280px;
  --max-width-1: 1536px;
  --max-width-2: 1280px;
  --max-width-3: 1024px;
  --max-width-4: 768px;
  --max-width-5: 640px;
  --max-width-6: 400px;
}

{
    "site": "fentybeauty.com",
    "source": "https://sitestyleguide.com/fentybeauty.com",
    "text": "#2B2727",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#B3B2B1",
            "rgb": [
                179,
                178,
                177
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#2B2727",
            "rgb": [
                43,
                39,
                39
            ]
        },
        {
            "name": "Sienna",
            "hex": "#AB4824",
            "rgb": [
                171,
                72,
                36
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#BD0100",
            "rgb": [
                189,
                1,
                0
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#4B3DC4",
            "rgb": [
                75,
                61,
                196
            ]
        },
        {
            "name": "Saddle Brown",
            "hex": "#684537",
            "rgb": [
                104,
                69,
                55
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#1F3521",
            "rgb": [
                31,
                53,
                33
            ]
        },
        {
            "name": "Brown",
            "hex": "#A52A2A",
            "rgb": [
                165,
                42,
                42
            ]
        },
        {
            "name": "Misty Rose",
            "hex": "#E0BEB1",
            "rgb": [
                224,
                190,
                177
            ]
        },
        {
            "name": "Plum",
            "hex": "#FB96D9",
            "rgb": [
                251,
                150,
                217
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#00AF2F",
            "rgb": [
                0,
                175,
                47
            ]
        },
        {
            "name": "Khaki",
            "hex": "#FFDE7B",
            "rgb": [
                255,
                222,
                123
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#6C4E71",
            "rgb": [
                108,
                78,
                113
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#CC6328",
            "rgb": [
                204,
                99,
                40
            ]
        }
    ],
    "fonts": [
        {
            "name": "Brown",
            "stack": "\"Brown\"",
            "weights": [
                300,
                400,
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "yotpo-widget-font",
            "stack": "yotpo-widget-font",
            "weights": [
                400
            ],
            "source": "Served from staticw2.yotpo.com"
        }
    ]
}

Other websites using Brown as their main typeface

Logitech

logitech.com · set in Brown
Save

Websites whose lead colour is closest to Fenty Beauty’s

Zia Tile

ziatile.com · 2 days ago
Save
Amazon.in

amazon.in · 4 days ago
Save
New Genre

newgenre.studio · 1 day ago
Save
BBC

bbc.co.uk · 2 days ago
Save

Captured from fentybeauty.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Fenty Beauty; this guide describes the public website for reference.

Fenty Beautystyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Light Grey

Charcoal

Colours

Sienna

Fire Brick

Deep Slate Blue

Saddle Brown

Dark Slate Grey

Brown

Misty Rose

Plum

Lime Green

Khaki

Light Slate Blue

Chocolate

Gradients

Brown

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run fentybeauty.com?

Also set in Brown

Logitech

Similar colours

Zia Tile

Amazon.in

New Genre

BBC

Title &
description