What font does Wattpad use?

Wattpad’s website uses one typeface: Source Sans Pro (headings and body text), self-hosted.

What are Wattpad’s brand colours?

The main colours on wattpad.com are Deep Red (#E00000), Olive Drab (#51A800), Medium Blue (#3B19A9), Thistle (#D7CAFF), Deep Teal (#1C6F65) and Midnight Blue (#322864).

What colour is Wattpad’s text and background?

Body text is #121212 on a #FFFFFF background.

Where is Wattpad’s logo from?

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

Is this Wattpad’s official style guide?

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

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

Unofficial style guide

Wattpadstyle guide

Wattpad’s website (wattpad.com) uses Source Sans Pro for its headings and body text. Its palette is led by Deep Red (#E00000), Olive Drab (#51A800) and Medium Blue (#3B19A9), with #121212 text on #FFFFFF. Captured from the live site on 23 October 2026.

Website: wattpad.com
Typefaces: Source Sans Pro
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 23 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the wattpad.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: Wattpad - Stories to obsess over; ● 32 / 60 characters
Meta description: Wattpad connects a global community of millions of readers and writers through the power of story; ● 97 / 160 characters
Language: en-US

In search results

Wattpadhttps://www.wattpad.com/

Wattpad - Stories to obsess over

Wattpad connects a global community of millions of readers and writers through the power of story

When shared

No og:image, so no picture

wattpad.com

Wattpad - Stories to obsess over

Wattpad connects a global community of millions of readers and writers through the power of story

Logo & favicons

Found as: image in the header. SVG, 37 × 28.

Logo

On white

On black

On Deep Red

Favicons

1 found

48 px · ICO favicon.ico

Wattpad - Stories to obsess over

Light browser tab

Wattpad - Stories to obsess over

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

Colour

Balance

How much each colour is used

White 33.3%
Deep Red 16.5%
Near Black 10.9%
Olive Drab 9.4%
Off White 6.3%
Light Grey 4.5%
Medium Blue 3.9%
Thistle 3.9%
Deep Teal 2.7%
Midnight Blue 1.6%
Misty Rose 1.3%
Steel Blue 1.3%
Deep Sky Blue 1.1%
Light Red 1.1%
Light Teal 1.1%
Red 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
18.73:1 AAA

On white
—

Background, text, graphic · .textboxContainer__mbQss button svg path, .rYwVc
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 93

On text
—

On white
18.73:1 AAA

Text, background, graphic · .title-xl, ._4HgOw
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 11

On text
14.46:1 AAA

On white
1.30:1 Fail

Background, border · .tag-pill__yrFxu.with-icon__ygR4d.active__f6EKR, .primary-variant__NO4pv.default-accent__Pc0Pm:disabled
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 30

On text
8.93:1 AAA

On white
2.10:1 Fail

Text, graphic, border · .secondary-variant__KvdoY.default-accent__Pc0Pm:disabled, .secondary-filled-variant__X2T1P.default-accent__Pc0Pm:disabled

Colours

Brand colours and accents, most used first

Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 12

On text
3.72:1 AA large

On white
5.04:1 AA

Text, graphic, border · .menu-item-wrapper-alert__lhvTV .menu-item__skk6f, .menu-item-wrapper-alert__lhvTV .menu-item__skk6f path
Olive Drab

HEX

RGB

HSL

OKLCH

CMYK
52 0 100 34

On text
6.20:1 AA

On white
3.02:1 AA large

Background · .progress_bar_value__rnwN9.success__BzCzJ, .light-variant__fymht.default-accent__YcamO .indicator__RzTpW
Medium Blue

HEX

RGB

HSL

OKLCH

CMYK
65 85 0 34

On text
1.69:1 Fail

On white
11.06:1 AAA

Background, text, graphic · .textboxContainer__mbQss button, .secondary-variant__KvdoY.premium-accent__mT2OK
Thistle

HEX

RGB

HSL

OKLCH

CMYK
16 21 0 0

On text
12.29:1 AAA

On white
1.52:1 Fail

Background, text, graphic · .textboxContainer__mbQss button:disabled, .secondary-variant__KvdoY.premium-accent__mT2OK:disabled
Deep Teal

HEX

RGB

HSL

OKLCH

CMYK
75 0 9 56

On text
3.13:1 AA large

On white
5.98:1 AA

Text, background, graphic · .solid-variant__RGER9.base-3-accent__Xrbrb, .kOM5m
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
50 60 0 61

On text
1.45:1 Fail

On white
12.94:1 AAA

Background · .J3xQT, .tag-pill__yrFxu.with-icon__ygR4d.wattys-tag__AiGj_
Misty Rose

HEX

RGB

HSL

OKLCH

CMYK
0 15 21 0

On text
14.30:1 AAA

On white
1.31:1 Fail

Background, border · .tertiary-variant__Y9kWU.like-accent__TBsrm, .default-variant__ERiYv.base-1-accent__v_DA0
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
72 33 0 28

On text
4.11:1 AA large

On white
4.56:1 AA

Background · .styles-module_info__BWdHW, --rt-color-info
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 27 0 0

On text
8.52:1 AAA

On white
2.20:1 Fail

Border · .splide__slide:focus-visible, .splide.is-focus-in .splide__slide:focus
Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 68 81 9

On text
4.89:1 AA

On white
3.83:1 AA large

Background · .wlblx, .ZzUPU
Light Teal

HEX

RGB

HSL

OKLCH

CMYK
89 6 0 54

On text
3.17:1 AA large

On white
5.91:1 AA

Background · .primary-variant__NO4pv.download-accent__pILl3, .solid-variant__RGER9.base-6-accent__IJC8I
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
4.69:1 AA

On white
4.00:1 AA large

Background, text · .n5nnJ, .CJILD .iPYom .PhIzb &:after

Gradients

linear-gradient(90deg,#56bcc9 0%,#752fdf 100%)
linear-gradient(180deg,rgba(18,18,18,0) 0%, 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.

Source Sans Pro

Aa 400 Aa 700

Source Sans Pro

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

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

Type scale

From the site’s CSS

Heading 1 32px / weight 400 · Source Sans Pro

Wattpad

Heading 2 21px / 36px weight 700

Wattpad - Stories to obsess over

Heading 3 22px / 28px weight 700

Wattpad - Stories to obsess over

Heading 6 16px / 21px weight 600

Wattpad - Stories to obsess over

Body — Source Sans Pro

Wattpad connects a global community of millions of readers and writers through the power of story

Paragraph 18px / 24px weight 600

Wattpad connects a global community of millions of readers and writers through the power of story

Button 18px / 66px weight 600 · Source Sans Pro

Get started

Link 18px / 28px weight 600

Sizes in use

Most common across the site

24pxline · 20 rules
22pxline 28px · 11 rules
21pxline · 12 rules
18pxline 24px · 33 rules
16pxline 24px · 79 rules
15pxline · 14 rules
14pxline 20px · 73 rules
12pxline 16px · 36 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

.textboxContainer__mbQss button · #3B19A9 · radius 50%

Corner radius

8px · 38×
50% · 37×
4px · 33×
6px · 30×
24px · 17×

Shadows

0 4px 8px 0
0 1px 10px 0 ,0 4px 5px 0
0 4px 8px #1212121f
0 1px 12px

Layout

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

Grid

Breakpoints

440

575

625

626

767

768

960

991

On a scale of 0 to 1440 px.

Content widths (max-width)

1800 px

1560 px

559 px

420 px

400 px

300 px

Notes

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

Notes

● FineThe title is 32 characters, short enough to show in full in search results.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Questions

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

Questions

What font does Wattpad use?: Wattpad’s website uses one typeface: Source Sans Pro (headings and body text), self-hosted.
What are Wattpad’s brand colours?: The main colours on wattpad.com are Deep Red (#E00000), Olive Drab (#51A800), Medium Blue (#3B19A9), Thistle (#D7CAFF), Deep Teal (#1C6F65) and Midnight Blue (#322864).
What colour is Wattpad’s text and background?: Body text is #121212 on a #FFFFFF background.
Where is Wattpad’s logo from?: The logo shown in this guide was found on wattpad.com’s homepage. For official logo files and usage rules, check Wattpad’s own brand or press page.
Is this Wattpad’s official style guide?: No. SiteStyleGuide made it from wattpad.com’s public web pages on 23 October 2026, and isn’t affiliated with Wattpad. 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

wattpad-com-tokens.css

Download

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

/* wattpad.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/wattpad.com) */
:root {
  /* Colours */
  --text: #121212;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #121212;
  --colour-off-white: #E2E2E2;
  --colour-light-grey: #B3B3B3;
  --colour-deep-red: #E00000;
  --colour-olive-drab: #51A800;
  --colour-medium-blue: #3B19A9;
  --colour-thistle: #D7CAFF;
  --colour-deep-teal: #1C6F65;
  --colour-midnight-blue: #322864;
  --colour-misty-rose: #FFD9CA;
  --colour-steel-blue: #337AB7;
  --colour-deep-sky-blue: #00BBFF;
  --colour-light-red: #E94A2C;
  --colour-light-teal: #0D6F76;
  --colour-red: #FF0000;
  --gradient-1: linear-gradient(90deg,#56bcc9 0%,#752fdf 100%);
  --gradient-3: linear-gradient(180deg,rgba(18,18,18,0) 0%, 100%);

  /* Typefaces */
  --font-headings: 'Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-body: 'Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-buttons: 'Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 32px;
  --text-h2: 21px;
  --leading-h2: 36px;
  --text-h3: 22px;
  --leading-h3: 28px;
  --text-h6: 16px;
  --leading-h6: 21px;
  --text-p: 18px;
  --leading-p: 24px;
  --text-button: 18px;
  --leading-button: 66px;
  --text-a: 18px;
  --leading-a: 28px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 440px;
  --breakpoint-2: 575px;
  --breakpoint-3: 625px;
  --breakpoint-4: 626px;
  --breakpoint-5: 767px;
  --breakpoint-6: 768px;
  --breakpoint-7: 960px;
  --breakpoint-8: 991px;
  --max-width-1: 1800px;
  --max-width-2: 1560px;
  --max-width-3: 559px;
  --max-width-4: 420px;
  --max-width-5: 400px;
  --max-width-6: 300px;
}

{
    "site": "wattpad.com",
    "source": "https://sitestyleguide.com/wattpad.com",
    "text": "#121212",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#121212",
            "rgb": [
                18,
                18,
                18
            ]
        },
        {
            "name": "Off White",
            "hex": "#E2E2E2",
            "rgb": [
                226,
                226,
                226
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#B3B3B3",
            "rgb": [
                179,
                179,
                179
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#E00000",
            "rgb": [
                224,
                0,
                0
            ]
        },
        {
            "name": "Olive Drab",
            "hex": "#51A800",
            "rgb": [
                81,
                168,
                0
            ]
        },
        {
            "name": "Medium Blue",
            "hex": "#3B19A9",
            "rgb": [
                59,
                25,
                169
            ]
        },
        {
            "name": "Thistle",
            "hex": "#D7CAFF",
            "rgb": [
                215,
                202,
                255
            ]
        },
        {
            "name": "Deep Teal",
            "hex": "#1C6F65",
            "rgb": [
                28,
                111,
                101
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#322864",
            "rgb": [
                50,
                40,
                100
            ]
        },
        {
            "name": "Misty Rose",
            "hex": "#FFD9CA",
            "rgb": [
                255,
                217,
                202
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#337AB7",
            "rgb": [
                51,
                122,
                183
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00BBFF",
            "rgb": [
                0,
                187,
                255
            ]
        },
        {
            "name": "Light Red",
            "hex": "#E94A2C",
            "rgb": [
                233,
                74,
                44
            ]
        },
        {
            "name": "Light Teal",
            "hex": "#0D6F76",
            "rgb": [
                13,
                111,
                118
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "Source Sans Pro",
            "stack": "\"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
            "weights": [
                400,
                600,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Source Sans Pro as their main typeface

Hunter Store

hunterstore.com.au · set in Source Sans Pro
Save1
Internal Revenue Service

irs.gov · set in Source Sans Pro
Save
Sniply

snip.ly · set in Source Sans Pro
Save
Accessify

accessify.com · set in Source Sans Pro
Save

Websites whose lead colour is closest to Wattpad’s

163.com

163.com · 5 days ago
Save
BILD

bild.de · 6 days ago
Save
GSMArena.com

gsmarena.com · 3 days ago
Save
BBC Home

bbc.com · 3 days ago
Save

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

Wattpadstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Off White

Light Grey

Colours

Deep Red

Olive Drab

Medium Blue

Thistle

Deep Teal

Midnight Blue

Misty Rose

Steel Blue

Deep Sky Blue

Light Red

Light Teal

Red

Gradients

Source Sans Pro

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run wattpad.com?

Also set in Source Sans Pro

Hunter Store

Internal Revenue Service

Sniply

Accessify

Similar colours

163.com

BILD

GSMArena.com

BBC Home

Title &
description