SiteStyleGuide

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

Il Post logo

Unofficial style guide

Il Poststyle guide

Il Post’s website (ilpost.it) uses Red Hat Text for its headings and body text. Its palette is led by Fire Brick (#C60000), Gold (#FFE726) and Deep Sky Blue (#12B6D1), with #191B1B text on #FFFFFF. Captured from the live site on 1 November 2026.

Website
ilpost.it
Typefaces
Red Hat Text, Georgia, Red Hat Display
Palette
4 neutrals, 12 colours, 3 gradients
Captured
1 Nov 2026 · added by @sitestyleguide
https://www.ilpost.it/ Screenshot
Screenshot of the ilpost.it homepage on a desktop screen
Screenshot of ilpost.it on a 1440 px desktop screen, 1 Nov 2026.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title
Il Post
● 7 / 60 characters
Meta description
Gli articoli, le rassegne, i blog, le foto, tutto quello che arriva dal mondo e dalla rete.
● 91 / 160 characters
Site name
Il Post
og:title
Il Post
og:description
Gli articoli, le rassegne, i blog, le foto, tutto quello che arriva dal mondo e dalla rete.
Language
it

In search results

Il Posthttps://www.ilpost.it/

Il Post

Gli articoli, le rassegne, i blog, le foto, tutto quello che arriva dal mondo e dalla rete.

When shared

The image Il Post shares with links

ilpost.it

Il Post

Gli articoli, le rassegne, i blog, le foto, tutto quello che arriva dal mondo e dalla rete.

Back to top ↑

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

Colour

Balance

How much each colour is used
  • Light Black 27.6%
  • Deep Black 20.4%
  • White 15.1%
  • Cool Charcoal 9.7%
  • Fire Brick 9.2%
  • Gold 3.3%
  • Deep Sky Blue 2.9%
  • Royal Blue 1.9%
  • Teal 1.8%
  • Deep Sky Blue 1.8%
  • Light Coral 1.6%
  • Light Red 1.3%
  • Steel Blue 1.1%
  • Light Sky Blue 0.8%
  • Deep Red 0.8%
  • Cadet Blue 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
  • Light Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    7 0 0 89
    On text
    —
    On white
    17.30:1 AAA

    Text, background · ._storie-idee-slider-container_1bfyz_1 header._storie-idee-slider-header_1bfyz_1, body

  • Deep Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    14 7 0 95
    On text
    1.12:1 Fail
    On white
    19.45:1 AAA

    Text, background, graphic · .slick-dots li.slick-active button:before, article._article-podcast_4s2va_1 a ._article-play_4s2va_63 button._article-play_

  • White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 0
    On text
    17.30:1 AAA
    On white
    —

    Text, background, border · article._article-podcast_4s2va_1 a ._article-play_4s2va_63 button._article-play_, [class*=photos-container] .slick-dots li.slick-active button:before

  • Cool Charcoal

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    12 2 0 78
    On text
    1.45:1 Fail
    On white
    11.93:1 AAA

    Text · inline style on <p>, article._single-live-item_j9dqo_1 a h2 span

Colours

Brand colours and accents, most used first
  • Fire Brick

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 100 100 22
    On text
    2.80:1 Fail
    On white
    6.17:1 AA

    Background, text, border · article._article-open-standard_12km2_1 ._article-live-items_12km2_141>h2:after, article._article-open-standard-big_n1zbf_1 ._article-live-items_n1zbf_150>h2:aft

  • Gold

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 9 85 0
    On text
    13.77:1 AAA
    On white
    1.26:1 Fail

    Background, graphic · ._peanuts-container_1czkf_1 ._peanuts-title_1czkf_10 button._peanuts-random-btn_, article._article-virgolette_8bffm_2 a h2

  • Deep Sky Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    91 13 0 18
    On text
    7.12:1 AAA
    On white
    2.43:1 Fail

    Background, border, text · article._single-related_1gul4_1 a h3:before, article._single-related_ro9qy_1 a ._single-related-title_ro9qy_9:before

  • Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    93 47 0 22
    On text
    3.17:1 AA large
    On white
    5.45:1 AA

    Text, background · ._elezioni-usa-container__data_1mjei_121 ._candidate_1mjei_128 h3._democrat_1mje, ._elezioni-usa-extended-container_1mjei_2 ._elezioni-usa-extended-intro_1mjei_19

  • Teal

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    57 1 0 50
    On text
    3.67:1 AA large
    On white
    4.72:1 AA

    Background · ._generic-slider-container_f4ti3_1._storie-idee-container_f4ti3_48 ._generic-sli, ._storie-idee-slider-container_1bfyz_1 header._storie-idee-slider-header_1bfyz_1

  • Deep Sky Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    94 12 0 8
    On text
    9.01:1 AAA
    On white
    1.92:1 Fail

    Graphic, text, background · .login-modal_IlPostUserModalNoSubscriber__q7lP2 .login-modal_IlPostUserModalNoSu, .shop-bar_shop-bar__lokYB a

  • Light Coral

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 40 40 0
    On text
    8.46:1 AAA
    On white
    2.05:1 Fail

    Text, background · ._generic-slider-container_f4ti3_1._storie-idee-container_f4ti3_48 h3._slider-ti, ._storie-idee-slider-container_1bfyz_1 header._storie-idee-slider-header_1bfyz_1

  • Light Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 100 100 0
    On text
    4.33:1 AA large
    On white
    4.00:1 AA large

    Text, background · ._elezioni-usa-container__data_1mjei_121 ._candidate_1mjei_128 h3._republican_1m, ._elezioni-usa-container__data_1mjei_121 ._progress-container__right_1mjei_172

  • Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 52 0 0
    On text
    4.31:1 AA large
    On white
    4.02:1 AA large

    Background, text, border · .swiper-pagination-bullet-active, .swiper-pagination-progressbar .swiper-pagination-progressbar-fill

  • Light Sky Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    69 9 0 3
    On text
    10.97:1 AAA
    On white
    1.58:1 Fail

    Background, border · html body ._course-item-container_w4p35_12 ._course-item-content_w4p35_34 ._cour, .video-player-embed .video-player-container .video-player-wrapper .controls-bar

  • Deep Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 94 84 5
    On text
    3.99:1 AA large
    On white
    4.34:1 AA large

    Background, text · ._elezioniUsaMapTooltipRepubblicaniRow_1ob9i_145, ._elezioniUsaMapCircleRed_1ob9i_225

  • Cadet Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    77 15 0 22
    On text
    6.20:1 AA
    On white
    2.79:1 Fail

    Background · .login-modal_IlPostUserDelete__lXIOO>div>div>form>button, .login-modal_IlPostUserDelete__lXIOO>div>div>form>label.login-modal_checkbox__PH

Gradients

  • linear-gradient(0deg,rgba(209,235,235,.4),rgba(209,235,235,.4))

  • linear-gradient(0deg,#ffe726 0,#ffe726 100%),rgba(122,136,139,0.1)

  • linear-gradient(90deg,#1a1a1a 25%,#2a2a2a 37%,#1a1a1a 63%)

Dark mode

Switched on by the site
  • Off White

    #E3E7E7 · --Greyscale-Text-Body

  • Near Black

    #0C0D0E · --Greyscale-Surface-Default

  • Cool Dark Grey

    #626D6F · --Greyscale-Surface-Dark

  • Cool Light Grey

    #AFB8BA · --Greyscale-Surface-Darker

  • Cool Charcoal

    #323839 · --Greyscale-Surface-Light

  • Near Black

    #212121 · --Greyscale-Surface-Lighter

  • Cool Dark Grey

    #4B5254 · --Greyscale-Surface-Disabled

  • Light Grey

    #CBD1D2 · --Greyscale-Text-Summary

  • Cool Grey

    #7A888B · --Greyscale-Text-Disabled

  • Charcoal

    #424242 · --Greyscale-Border-Lighter

  • Cadet Blue

    #0AB3CD · --Color-Solid-Player

  • Dark Slate Grey

    #173132 · --Color-Solid-Bg-Storie

Back to top ↑

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.

Red Hat Text

Aa 300 Aa 700

Red Hat Text

Google Fonts · weights 300, 400, 500, 600, 700 · headings, buttons

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

Aa 300 Aa 900

Red Hat Display

Google Fonts · weights 300, 400, 500, 600, 700, 800, 900 · headings, buttons

Aa 100 Aa 900

Archivo

Google Fonts · weights 100, 200, 300, 400, 500, 600, 700, 800, 900 · headings

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

Type scale

From the site’s CSS
Heading 1 18px / normal weight 600 · Red Hat Display

Il Post

Heading 2 .875rem · 14 px / normal weight 700 · uppercase · Red Hat Text

Il Post

Heading 3 16px / 25px weight 400 · uppercase · Georgia

Il Post

Heading 4 14px / 14px weight 600 · Georgia

Il Post

Paragraph 12px / 15px weight 400 · Red Hat Text

Gli articoli, le rassegne, i blog, le foto, tutto quello che arriva dal mondo e dalla rete.

Button 14px / 0 weight bolder · Red Hat Display

Get started

Link 16px / normal weight 600 · none · Red Hat Text

Read more about Il Post

Sizes in use

Most common across the site
  • 28pxline 110% · 2 rules
  • 22pxline 1.2rem · 2 rules
  • 20pxline 1.5rem · 7 rules
  • 18pxline 1.875rem · 8 rules
  • 16pxline 1.25rem · 34 rules
  • 14pxline .875rem · 76 rules
  • 13pxline normal · 7 rules
  • 12pxline 1rem · 29 rules

Back to top ↑

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

._peanuts-container_1czkf_1 ._peanuts-title_1czkf_10 button._peanuts-random-btn_ · #FFE726 · radius 999px

Corner radius

  • .5rem · 13×
  • 999px · 11×
  • 50% · 9×
  • 4px · 9×
  • .375rem · 7×
  • 6px · 5×

Shadows

  • 0 0 2px #00000080
  • 16px 11px 14px #00000021
  • 0 -4px 44px #00000040
  • 0px 4px 12px rgba(0,0,0,0.1)

Back to top ↑

Layout

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

Grid

Breakpoints

576
768
900
991
992
1200
1280
1400

On a scale of 0 to 1440 px.

Content widths (max-width)

1280 px
1140 px
960 px
720 px
540 px
300 px

Back to top ↑

Notes

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

Notes

  • ● FineThe title is 7 characters, short enough to show in full in search results.

Back to top ↑

Questions

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

Questions

What font does Il Post use?
Il Post’s website uses three typefaces: Red Hat Text (headings and body text), google Fonts; Red Hat Display, google Fonts; Archivo, google Fonts.
What are Il Post’s brand colours?
The main colours on ilpost.it are Fire Brick (#C60000), Gold (#FFE726), Deep Sky Blue (#12B6D1), Royal Blue (#0D69C6), Teal (#377E7F) and Deep Sky Blue (#0ECDEA).
What colour is Il Post’s text and background?
Body text is #191B1B on a #FFFFFF background.
Where is Il Post’s logo from?
The logo shown in this guide was found on ilpost.it’s homepage. For official logo files and usage rules, check Il Post’s own brand or press page.
Is this Il Post’s official style guide?
No. SiteStyleGuide made it from ilpost.it’s public web pages on 1 November 2026, and isn’t affiliated with Il Post. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

ilpost-it-tokens.css

Download

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

/* ilpost.it design tokens, from SiteStyleGuide (https://sitestyleguide.com/ilpost.it) */
:root {
  /* Colours */
  --text: #191B1B;
  --background: #FFFFFF;
  --colour-light-black: #191B1B;
  --colour-deep-black: #0C0D0E;
  --colour-white: #FFFFFF;
  --colour-cool-charcoal: #323839;
  --colour-fire-brick: #C60000;
  --colour-gold: #FFE726;
  --colour-deep-sky-blue: #12B6D1;
  --colour-royal-blue: #0D69C6;
  --colour-teal: #377E7F;
  --colour-deep-sky-blue-2: #0ECDEA;
  --colour-light-coral: #FF9999;
  --colour-light-red: #FF0000;
  --colour-steel-blue: #007AFF;
  --colour-light-sky-blue: #4CE0F7;
  --colour-deep-red: #F10F27;
  --colour-cadet-blue: #2DA8C6;
  --gradient-1: linear-gradient(0deg,rgba(209,235,235,.4),rgba(209,235,235,.4));
  --gradient-2: linear-gradient(0deg,#ffe726 0,#ffe726 100%),rgba(122,136,139,0.1);
  --gradient-3: linear-gradient(90deg,#1a1a1a 25%,#2a2a2a 37%,#1a1a1a 63%);

  /* Typefaces */
  --font-headings: 'Red Hat Text', sans-serif;
  --font-buttons: 'Red Hat Text', sans-serif;
  --font-other: 'Noto Serif';

  /* Type scale */
  --text-h1: 18px;
  --leading-h1: normal;
  --text-h2: .875rem;
  --leading-h2: normal;
  --text-h3: 16px;
  --leading-h3: 25px;
  --text-h4: 14px;
  --leading-h4: 14px;
  --text-p: 12px;
  --leading-p: 15px;
  --text-button: 14px;
  --leading-button: 0;
  --text-a: 16px;
  --leading-a: normal;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 576px;
  --breakpoint-2: 768px;
  --breakpoint-3: 900px;
  --breakpoint-4: 991px;
  --breakpoint-5: 992px;
  --breakpoint-6: 1200px;
  --breakpoint-7: 1280px;
  --breakpoint-8: 1400px;
  --max-width-1: 1280px;
  --max-width-2: 1140px;
  --max-width-3: 960px;
  --max-width-4: 720px;
  --max-width-5: 540px;
  --max-width-6: 300px;
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

Run ilpost.it?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

View our style guide on SiteStyleGuide
<a href="https://sitestyleguide.com/ilpost.it" title="Il Post style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Websites whose lead colour is closest to Il Post’s

Captured from ilpost.it on 1 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by Il Post; this guide describes the public website for reference.