What font does afterpay.com use?

afterpay.com’s website uses three typefaces: Italian Plate No2 Expanded (headings and body text), self-hosted; ItalianPlateNo2Expanded-Regular, served from cdn.builder.io; Cash Sans, self-hosted.

What are afterpay.com’s brand colours?

The main colours on afterpay.com are Light Aqua Marine (#B2FCE4), Midnight Blue (#0E245B), Orange (#FFB600), Corn Silk (#FFF9D9), Steel Blue (#3375C9) and Tomato (#F5643B).

What colour is afterpay.com’s text and background?

Body text is #000000 on a #FFFFFF background.

Is this afterpay.com’s official style guide?

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

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

Unofficial style guide

afterpay.comstyle guide

afterpay.com’s website (afterpay.com) uses Italian Plate No2 Expanded for its headings and body text. Its palette is led by Light Aqua Marine (#B2FCE4), Midnight Blue (#0E245B) and Orange (#FFB600), with #000000 text on #FFFFFF. Captured from the live site on 27 October 2026.

Website: afterpay.com
Typefaces: Italian Plate No2 Expanded, Segoe UI, ItalianPlateNo2Expanded-Regular
Palette: 4 neutrals, 12 colours
Captured: 27 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the afterpay.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: Buy Now Pay Later with Afterpay; ● 31 / 60 characters
Meta description: Afterpay allows you to buy now and pay in 4 payments over 6 weeks with Pay in 4. No interest with Pay in 4. Use online and in-store. No fees when you pay on-time. Smart Pay in 4 spend limits. Simply download the Afterpay App and start shopping.; ▲ 244 / 160 characters
og:title: Buy Now Pay Later with Afterpay
Language: en-AU

In search results

afterpay.comhttps://www.afterpay.com/en-AU

Buy Now Pay Later with Afterpay

Afterpay allows you to buy now and pay in 4 payments over 6 weeks with Pay in 4. No interest with Pay in 4. Use online and in-store. No fees when you pay on-time…

When shared

No og:image, so no picture

afterpay.com

Buy Now Pay Later with Afterpay

Afterpay allows you to buy now and pay in 4 payments over 6 weeks with Pay in 4. No interest with Pay in 4. U…

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

0 found

The site doesn’t seem to have a favicon.

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 30%
Black 24.3%
Light Aqua Marine 7.1%
Midnight Blue 5.8%
Cool Off White 5.1%
Orange 4.9%
Corn Silk 4.4%
Light Grey 3.9%
Steel Blue 3.6%
Tomato 2.9%
Lavender 2.5%
Deep Aqua Marine 1.6%
Aqua Marine 1.4%
Medium Sea Green 0.9%
Thistle 0.8%
Plum 0.8%

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 · .buttons_ghost__r9WGk, .new-user-modal_newUserModal__Ljojt .new-user-modal_subTitleSection__Q_8tG .new-
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · .buttons_black__6A7fD, .buttons_cardBlack__91RxC
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
5 3 0 2

On text
19.00:1 AAA

On white
1.11:1 Fail

Background · .ctaCluster_ctaClusterContainer__xkzbd.ctaCluster_bgOrcaDark__tcd_S .ctaCluster_, .ctaDivider_backgroundOrcaPastel__zZgPq
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 20

On text
13.08:1 AAA

On white
1.61:1 Fail

Border, background, text · .buttons_disabled__zNUyj, .searchInput_input__hCR2J:disabled

Colours

Brand colours and accents, most used first

Light Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
29 0 10 1

On text
17.94:1 AAA

On white
1.17:1 Fail

Background, border, text · .buttons_primary__wk22n, .buttons_searchSuggestion__RkvDo
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
85 60 0 64

On text
1.42:1 Fail

On white
14.77:1 AAA

Background · .ctaCluster_ctaClusterContainer__xkzbd.ctaCluster_bgNone__JwiN0 .ctaCluster_ctaC, .ctaCluster_ctaClusterContainer__xkzbd.ctaCluster_bgOrcaDark__tcd_S
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 29 100 0

On text
11.94:1 AAA

On white
1.76:1 Fail

Background · .ctaCluster_ctaClusterContainer__xkzbd.ctaCluster_bgLemonDark__qlawA, .ctaCluster_ctaClusterContainer__xkzbd.ctaCluster_bgLemonPastel__y88H6 .ctaClust
Corn Silk

HEX

RGB

HSL

OKLCH

CMYK
0 2 15 0

On text
19.80:1 AAA

On white
1.06:1 Fail

Background · .ctaCluster_ctaClusterContainer__xkzbd.ctaCluster_bgLemonDark__qlawA .ctaCluster, .ctaDivider_backgroundLemonPastel__r6btO
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
75 42 0 21

On text
4.53:1 AA

On white
4.64:1 AA

Text, background, border · .buttons_tertiary__NFPyR, .buttons_ghost__r9WGk
Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 59 76 4

On text
6.77:1 AA

On white
3.10:1 AA large

Text, background, border · .messageBanner_backgroundFire__PFvQA, .fire-default
Lavender

HEX

RGB

HSL

OKLCH

CMYK
3 9 0 5

On text
16.12:1 AAA

On white
1.30:1 Fail

Background, border · .buttons_secondary__8o9u6, .plum-default
Deep Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
69 0 22 3

On text
15.52:1 AAA

On white
1.35:1 Fail

Background · .buttons_primary__wk22n:active, .mint-press
Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
49 0 16 2

On text
16.51:1 AAA

On white
1.27:1 Fail

Background · .buttons_chip__Xc_hq:hover, .buttons_primary__wk22n:hover
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 63 34

On text
6.74:1 AA

On white
3.11:1 AA large

Used · --global-hover-state-border-color, --global-hover-state-background
Thistle

HEX

RGB

HSL

OKLCH

CMYK
7 19 0 11

On text
11.86:1 AAA

On white
1.77:1 Fail

Background · .buttons_secondary__8o9u6:hover, .plum-hover
Plum

HEX

RGB

HSL

OKLCH

CMYK
12 31 0 16

On text
8.37:1 AAA

On white
2.51:1 Fail

Background · .buttons_secondary__8o9u6:active, .plum-press

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.

Italian Plate No2 Expanded

Aa 400 Aa 700

Italian Plate No2 Expanded

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

Aa 400

Segoe UI

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

Aa 400 Aa 700

ItalianPlateNo2Expanded-Regular

Served from cdn.builder.io · weights 400, 700 · shown in a stand-in if you don’t have it

Aa 300 Aa 900

Cash Sans

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

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

Type scale

From the site’s CSS

Heading 1 2.625rem · 42 px / 110% weight 700 · Italian Plate No2 Expanded

afterpay.com

Heading 2 56px / 64px weight 700 · none · Italian Plate No2 Expanded

Buy Now Pay Later with Afterpay

Heading 3 3.125rem · 50 px / 112% weight 700 · Italian Plate No2 Expanded

Buy Now Pay Later with Afterpay

Heading 4 1.875rem · 30 px / 110% weight 700 · Italian Plate No2 Expanded

Buy Now Pay Later with Afterpay

Heading 5 1.5rem · 24 px / 115% weight 700 · Italian Plate No2 Expanded

Buy Now Pay Later with Afterpay

Heading 6 1.375rem · 22 px / 115% weight 700 · Italian Plate No2 Expanded

Buy Now Pay Later with Afterpay

Paragraph 20px / 28px weight 400 · none · Italian Plate No2 Expanded

Afterpay allows you to buy now and pay in 4 payments over 6 weeks with Pay in 4. No interest with Pay in 4. Use online and in-store. No fee…

Small 80%

Afterpay allows you to buy now and pay in 4 payments over 6 weeks with Pay in 4. No interest with Pay in 4. Use online and in-store. No fee…

Button 100% none

Get started

Link .8125rem · 13 px / 1.375rem weight 700 · none · Italian Plate No2 Expanded

Sizes in use

Most common across the site

64pxline 4.5rem · 6 rules
32pxline 2.5rem · 8 rules
24pxline 2rem · 14 rules
20pxline 1.75rem · 18 rules
14pxline 1.5rem · 33 rules
13pxline 1.375rem · 20 rules
12pxline 1.25rem · 24 rules
10pxline 1rem · 8 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

.buttons_primary__wk22n · #B2FCE4

Corner radius

.75rem · 38×
1rem · 25×
1.5rem · 17×
.5rem · 7×
3rem · 5×
9999px · 5×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000
0 0 5px rgba(0,0,0,.35)
0 4px 12px rgba(0, 0, 0, 0.08)
0 2px 12px rgba(0, 0, 0, 0.16)

Layout

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

Grid

Breakpoints

640

767

768

991

1024

1025

1160

1200

On a scale of 0 to 1440 px.

Content widths (max-width)

1440 px

1025 px

768 px

512 px

480 px

448 px

Notes

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

Notes

● FineThe title is 31 characters, short enough to show in full in search results.
▲ CheckThe description is 244 characters. Search results usually show about 160.
▲ CheckThere is no og:image, so links shared on social media show no picture.
▲ CheckNo favicon could be found.

Questions

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

Questions

What font does afterpay.com use?: afterpay.com’s website uses three typefaces: Italian Plate No2 Expanded (headings and body text), self-hosted; ItalianPlateNo2Expanded-Regular, served from cdn.builder.io; Cash Sans, self-hosted.
What are afterpay.com’s brand colours?: The main colours on afterpay.com are Light Aqua Marine (#B2FCE4), Midnight Blue (#0E245B), Orange (#FFB600), Corn Silk (#FFF9D9), Steel Blue (#3375C9) and Tomato (#F5643B).
What colour is afterpay.com’s text and background?: Body text is #000000 on a #FFFFFF background.
Is this afterpay.com’s official style guide?: No. SiteStyleGuide made it from afterpay.com’s public web pages on 27 October 2026, and isn’t affiliated with afterpay.com. 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

afterpay-com-tokens.css

Download

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

/* afterpay.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/afterpay.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-cool-off-white: #EFF4FB;
  --colour-light-grey: #CCCCCC;
  --colour-light-aqua-marine: #B2FCE4;
  --colour-midnight-blue: #0E245B;
  --colour-orange: #FFB600;
  --colour-corn-silk: #FFF9D9;
  --colour-steel-blue: #3375C9;
  --colour-tomato: #F5643B;
  --colour-lavender: #EADDF2;
  --colour-deep-aqua-marine: #4EF8C1;
  --colour-aqua-marine: #7FFAD2;
  --colour-medium-sea-green: #00A93E;
  --colour-thistle: #D4B9E4;
  --colour-plum: #BD94D6;

  /* Typefaces */
  --font-headings: 'Italian Plate No2 Expanded', 'Helvetica', 'Arial';
  --font-buttons: 'Italian Plate No2 Expanded', 'Helvetica', 'Arial';
  --font-body: 'Italian Plate No2 Expanded', 'Helvetica', 'Arial';
  --font-other: 'ItalianPlateNo2Expanded-Regular', sans-serif;

  /* Type scale */
  --text-h1: 2.625rem;
  --leading-h1: 110%;
  --text-h2: 56px;
  --leading-h2: 64px;
  --text-h3: 3.125rem;
  --leading-h3: 112%;
  --text-h4: 1.875rem;
  --leading-h4: 110%;
  --text-h5: 1.5rem;
  --leading-h5: 115%;
  --text-h6: 1.375rem;
  --leading-h6: 115%;
  --text-p: 20px;
  --leading-p: 28px;
  --text-small: 80%;
  --text-button: 100%;
  --text-a: .8125rem;
  --leading-a: 1.375rem;

  /* Shape */
  --radius-1: .75rem;
  --radius-2: 1rem;
  --radius-3: 1.5rem;
  --radius-4: .5rem;
  --radius-5: 3rem;
  --radius-6: 9999px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 640px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 991px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1025px;
  --breakpoint-7: 1160px;
  --breakpoint-8: 1200px;
  --max-width-1: 1440px;
  --max-width-2: 1025px;
  --max-width-3: 768px;
  --max-width-4: 512px;
  --max-width-5: 480px;
  --max-width-6: 448px;
}

{
    "site": "afterpay.com",
    "source": "https://sitestyleguide.com/afterpay.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#EFF4FB",
            "rgb": [
                239,
                244,
                251
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CCCCCC",
            "rgb": [
                204,
                204,
                204
            ]
        },
        {
            "name": "Light Aqua Marine",
            "hex": "#B2FCE4",
            "rgb": [
                178,
                252,
                228
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#0E245B",
            "rgb": [
                14,
                36,
                91
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFB600",
            "rgb": [
                255,
                182,
                0
            ]
        },
        {
            "name": "Corn Silk",
            "hex": "#FFF9D9",
            "rgb": [
                255,
                249,
                217
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#3375C9",
            "rgb": [
                51,
                117,
                201
            ]
        },
        {
            "name": "Tomato",
            "hex": "#F5643B",
            "rgb": [
                245,
                100,
                59
            ]
        },
        {
            "name": "Lavender",
            "hex": "#EADDF2",
            "rgb": [
                234,
                221,
                242
            ]
        },
        {
            "name": "Deep Aqua Marine",
            "hex": "#4EF8C1",
            "rgb": [
                78,
                248,
                193
            ]
        },
        {
            "name": "Aqua Marine",
            "hex": "#7FFAD2",
            "rgb": [
                127,
                250,
                210
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#00A93E",
            "rgb": [
                0,
                169,
                62
            ]
        },
        {
            "name": "Thistle",
            "hex": "#D4B9E4",
            "rgb": [
                212,
                185,
                228
            ]
        },
        {
            "name": "Plum",
            "hex": "#BD94D6",
            "rgb": [
                189,
                148,
                214
            ]
        }
    ],
    "fonts": [
        {
            "name": "Italian Plate No2 Expanded",
            "stack": "Italian Plate No2 Expanded, Helvetica, Arial",
            "weights": [
                400,
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Segoe UI",
            "stack": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, 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": "ItalianPlateNo2Expanded-Regular",
            "stack": "ItalianPlateNo2Expanded-Regular, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Served from cdn.builder.io"
        },
        {
            "name": "Cash Sans",
            "stack": "Cash Sans, Helvetica, Arial",
            "weights": [
                300,
                400,
                500,
                600,
                700,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Afterpay Youth",
            "stack": "Afterpay Youth, Helvetica, Arial",
            "weights": [
                700,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "ItalianPlateNo2Expanded-Bold",
            "stack": "\"ItalianPlateNo2Expanded-Bold\", sans-serif",
            "weights": [
                400
            ],
            "source": "Served from cdn.builder.io"
        }
    ]
}

Websites whose lead colour is closest to afterpay.com’s

Digital Spy UK

digitalspy.com · 4 days ago
Save
Emote Digital

emotedigital.com.au · 19 hours ago
Save
The Design Office of David McGillivray

dmcg.co · 4 days ago
Save
Chris Pirillo

pirillo.com · 5 days ago
Save

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

afterpay.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Cool Off White

Light Grey

Colours

Light Aqua Marine

Midnight Blue

Orange

Corn Silk

Steel Blue

Tomato

Lavender

Deep Aqua Marine

Aqua Marine

Medium Sea Green

Thistle

Plum

Italian Plate No2 Expanded

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run afterpay.com?

Similar colours

Digital Spy UK

Emote Digital

The Design Office of David McGillivray

Chris Pirillo

Title &
description