What font does Readymag use?

Readymag’s website uses two typefaces: Segoe UI (body text), a system font; Arial (headings), a system font.

What are Readymag’s brand colours?

The main colours on readymag.com are Light Royal Blue (#0078FF), Orange Red (#FF4828), Dodger Blue (#0A85FF), Deep Royal Blue (#026EE8), Deep Sky Blue (#00BAFF) and Chocolate (#F66B05).

What colour is Readymag’s text and background?

Body text is #282828 on a #FFFFFF background.

Where is Readymag’s logo from?

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

Is this Readymag’s official style guide?

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

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

Unofficial style guide

Readymagstyle guide

Readymag’s website (readymag.com) sets its headings in Arial and its body text in Segoe UI. Its palette is led by Light Royal Blue (#0078FF), Orange Red (#FF4828) and Dodger Blue (#0A85FF), with #282828 text on #FFFFFF. Captured from the live site on 25 October 2026.

Website: readymag.com
Typefaces: Segoe UI, Arial
Palette: 4 neutrals, 11 colours, 2 gradients
Captured: 25 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the readymag.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: Readymag – the design tool for outstanding websites; ● 51 / 60 characters
Meta description: Make the web more like you; ▲ 26 / 160 characters
Site name: Readymag – the design tool for outstanding websites
og:title: Readymag – the design tool for outstanding websites

In search results

Readymag – the design tool for outstanding websiteshttps://readymag.com/

Readymag – the design tool for outstanding websites

Make the web more like you

When shared

readymag.com

Readymag – the design tool for outstanding websites

Make the web more like you

Logo & favicons

Found as: CSS background on .logo. PNG, 76 × 18.

Logo

On white

On black

On Light Royal Blue

Favicons

5 found

144 px · PNG apple-touch-icon-precomposed
114 px · PNG apple-touch-icon-precomposed
72 px · PNG apple-touch-icon-precomposed
57 px · PNG apple-touch-icon-precomposed
32 px · ICO icon

Readymag – the design tool for outstanding websites

Light browser tab

Readymag – the design tool for outstanding websites

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

Colour

Balance

How much each colour is used

White 46.8%
Black 12.2%
Charcoal 10.8%
Light Royal Blue 7.1%
Grey 6.4%
Orange Red 2.2%
Dodger Blue 1.9%
Deep Royal Blue 1.7%
Deep Sky Blue 1.7%
Chocolate 1.7%
Deep Red 1.7%
Steel Blue 1.7%
Forest Green 1.7%
Light Red 1.3%
Red 1.3%

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

On white
—

Background, text, border · html, .toolbar .menu-button .line-1
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.42:1 Fail

On white
21.00:1 AAA

Background, text · html, .arrow-color-selector .color-clip-wrapper .color-wrapper .color.black
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 84

On text
—

On white
14.74:1 AAA

Text, background · body, .new-settings .toolbar .menu-button:hover
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 50

On text
3.73:1 AA large

On white
3.95:1 AA large

Background, text, border · .toolbar .alert, .cart-sidebar .tab-order .order-details .order-title-row

Colours

Brand colours and accents, most used first

Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 53 0 0

On text
3.60:1 AA large

On white
4.09:1 AA large

Background, text · .alert-popup .panel-wrapper .panel .button.main, .isphone .share-popup .content-wrapper .share-wrapper .type-selector[data-tp=pag
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 72 84 0

On text
4.36:1 AA large

On white
3.38:1 AA large

Background, text · .common-form .button.error, .isdesktop #page404 table tr td .message .front-page-link:hover
Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
96 48 0 0

On text
4.08:1 AA large

On white
3.61:1 AA large

Background · .alert-popup.category-shared-unlock-page .panel-wrapper .panel .button.ok, .isdesktop .magpassword-container .center-table .center-cell .center-content .pa
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
99 53 0 9

On text
3.09:1 AA large

On white
4.77:1 AA

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-facebook
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 27 0 0

On text
6.65:1 AA

On white
2.22:1 Fail

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-twitter
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 57 98 4

On text
4.93:1 AA

On white
2.99:1 Fail

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-gplus
Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 90 92 14

On text
2.90:1 Fail

On white
5.08:1 AA

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-pinterest
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
91 32 0 28

On text
3.30:1 AA large

On white
4.47:1 AA large

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-linkedin
Forest Green

HEX

RGB

HSL

OKLCH

CMYK
80 0 75 36

On text
4.40:1 AA large

On white
3.35:1 AA large

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-mail
Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 72 80 4

On text
4.04:1 AA large

On white
3.65:1 AA large

Background · .toolbar .alert, .toolbar .alert .popup .reload
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
3.69:1 AA large

On white
4.00:1 AA large

Background · .intercom-custom-counter, .msie .rmwidget.widget-background .video-background .overlay

Gradients

linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,.8) 100%)
linear-gradient(to bottom,#0000 0% 31%,#000c)

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.

Arial

Aa 400 Aa 600

Segoe UI

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

Aa 700

Arial

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

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

Type scale

From the site’s CSS

Heading 2 14px weight 400

Readymag – the design tool for outstanding webs…

Heading 3 18px weight 700 · Arial

Readymag – the design tool for outstanding webs…

Heading 4 8px uppercase · Arial

Readymag – the design tool for outstanding webs…

Body — / 1 Segoe UI

Make the web more like you

Link 8px / 1px weight 500 · uppercase · Arial

Sizes in use

Most common across the site

24pxline 30px · 11 rules
20pxline 48px · 4 rules
19pxline 24px · 4 rules
18pxline 24px · 7 rules
16pxline 20px · 24 rules
14pxline 50px · 11 rules
12pxline 25px · 24 rules
11pxline 14px · 4 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

.alert-popup.category-shared-unlock-page .panel-wrapper .panel .button.ok · #0A85FF · radius 8px

Corner radius

50% · 8×
4px · 7×
8px · 6×
100% · 6×
12px · 6×
25px · 4×

Shadows

0 0 0 4px #0000000a,0 0 0 3px #ffffff47
0 0 0 1px #00000014
0 0 0 1px #00000017,0 1px 2px #0000003d
0 0 0 1px #00000017

Layout

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

Grid

Breakpoints

478

768

1024

On a scale of 0 to 1440 px.

Content widths (max-width)

418 px

Notes

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

Notes

● FineThe title is 51 characters, short enough to show in full in search results.
▲ CheckThe description is only 26 characters. There is room to say more.
▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).

Questions

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

Questions

What font does Readymag use?: Readymag’s website uses two typefaces: Segoe UI (body text), a system font; Arial (headings), a system font.
What are Readymag’s brand colours?: The main colours on readymag.com are Light Royal Blue (#0078FF), Orange Red (#FF4828), Dodger Blue (#0A85FF), Deep Royal Blue (#026EE8), Deep Sky Blue (#00BAFF) and Chocolate (#F66B05).
What colour is Readymag’s text and background?: Body text is #282828 on a #FFFFFF background.
Where is Readymag’s logo from?: The logo shown in this guide was found on readymag.com’s homepage. For official logo files and usage rules, check Readymag’s own brand or press page.
Is this Readymag’s official style guide?: No. SiteStyleGuide made it from readymag.com’s public web pages on 25 October 2026, and isn’t affiliated with Readymag. 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

readymag-com-tokens.css

Download

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

/* readymag.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/readymag.com) */
:root {
  /* Colours */
  --text: #282828;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-charcoal: #282828;
  --colour-grey: #808080;
  --colour-light-royal-blue: #0078FF;
  --colour-orange-red: #FF4828;
  --colour-dodger-blue: #0A85FF;
  --colour-deep-royal-blue: #026EE8;
  --colour-deep-sky-blue: #00BAFF;
  --colour-chocolate: #F66B05;
  --colour-deep-red: #DB1611;
  --colour-steel-blue: #107EB8;
  --colour-forest-green: #20A229;
  --colour-light-red: #F54432;
  --colour-red: #FF0000;
  --gradient-1: linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,.8) 100%);
  --gradient-2: linear-gradient(to bottom,#0000 0% 31%,#000c);

  /* Typefaces */
  --font-buttons: -apple-system, system-ui, blinkmacsystemfont, 'Segoe UI', 'Ubuntu', 'Fira Sans';
  --font-body: -apple-system, system-ui, blinkmacsystemfont, 'Segoe UI', 'Ubuntu', 'Fira Sans';
  --font-headings: 'Arial';

  /* Type scale */
  --text-h2: 14px;
  --text-h3: 18px;
  --text-h4: 8px;
  --text-a: 8px;
  --leading-a: 1px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 478px;
  --breakpoint-2: 768px;
  --breakpoint-3: 1024px;
  --max-width-1: 418px;
}

{
    "site": "readymag.com",
    "source": "https://sitestyleguide.com/readymag.com",
    "text": "#282828",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#282828",
            "rgb": [
                40,
                40,
                40
            ]
        },
        {
            "name": "Grey",
            "hex": "#808080",
            "rgb": [
                128,
                128,
                128
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#0078FF",
            "rgb": [
                0,
                120,
                255
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF4828",
            "rgb": [
                255,
                72,
                40
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#0A85FF",
            "rgb": [
                10,
                133,
                255
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#026EE8",
            "rgb": [
                2,
                110,
                232
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00BAFF",
            "rgb": [
                0,
                186,
                255
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#F66B05",
            "rgb": [
                246,
                107,
                5
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#DB1611",
            "rgb": [
                219,
                22,
                17
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#107EB8",
            "rgb": [
                16,
                126,
                184
            ]
        },
        {
            "name": "Forest Green",
            "hex": "#20A229",
            "rgb": [
                32,
                162,
                41
            ]
        },
        {
            "name": "Light Red",
            "hex": "#F54432",
            "rgb": [
                245,
                68,
                50
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "Segoe UI",
            "stack": "-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Ubuntu, Fira Sans, Roboto, Avenir Next, Helvetica Neue, Helvetica, Arial, sans-serif",
            "weights": [
                400,
                500,
                600
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Arial",
            "stack": "Arial",
            "weights": [
                700
            ],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Segoe UI as their main typeface

S

SORT

sort-office.com · set in Segoe UI
Save
CodeCanyon

codecanyon.net · set in Segoe UI
Save
xbox.com

xbox.com · set in Segoe UI
Save
orbitz

orbitz.com · set in Segoe UI
Save

Websites whose lead colour is closest to Readymag’s

Plarium

plarium.com · 2 days ago
Save
Dillard's

dillards.com · 6 days ago
Save
Facebook

messenger.com · 2 days ago
Save
Facebook

m.me · 4 days ago
Save

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

Readymagstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Charcoal

Grey

Colours

Light Royal Blue

Orange Red

Dodger Blue

Deep Royal Blue

Deep Sky Blue

Chocolate

Deep Red

Steel Blue

Forest Green

Light Red

Red

Gradients

Arial

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run readymag.com?

Also set in Segoe UI

SORT

CodeCanyon

xbox.com

orbitz

Similar colours

Plarium

Dillard's

Facebook

Facebook

Title &
description