What font does CNN Brasil use?

CNN Brasil’s website uses three typefaces: Noto Serif (headings), a system font; CNN Sans Display (body text), self-hosted; cnnSans, self-hosted.

What are CNN Brasil’s brand colours?

The main colours on cnnbrasil.com.br are Crimson (#DC2626), Chocolate (#F97316), Light Slate Blue (#475569), Deep Steel Blue (#0369A1), Medium Sea Green (#16A34A) and Dark Golden Rod (#CA8A04).

What colour is CNN Brasil’s text and background?

Body text is #0A0A0A on a #FFFFFF background.

Where is CNN Brasil’s logo from?

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

Is this CNN Brasil’s official style guide?

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

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

Unofficial style guide

CNN Brasilstyle guide

CNN Brasil’s website (cnnbrasil.com.br) sets its headings in Noto Serif and its body text in CNN Sans Display. Its palette is led by Crimson (#DC2626), Chocolate (#F97316) and Light Slate Blue (#475569), with #0A0A0A text on #FFFFFF. Captured from the live site on 29 October 2026.

Website: cnnbrasil.com.br
Typefaces: Noto Serif, CNN Sans Display, cnnSans
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 29 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the cnnbrasil.com.br homepage on a desktop screen — Screenshot of cnnbrasil.com.br on a 1440 px desktop screen, 29 Oct 2026.

Screenshot of the cnnbrasil.com.br 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: CNN Brasil | Notícias Ao Vivo do Brasil e do Mundo; ● 50 / 60 characters
Meta description: Pense bem, pense CNN - Notícias ao vivo, fatos da política nacional e internacional no maior canal de notícias do mundo!; ● 120 / 160 characters
Site name: CNN Brasil
og:title: CNN Brasil | Notícias Ao Vivo do Brasil e do Mundo
og:description: Pense bem, pense CNN - Notícias ao vivo, fatos da política nacional e internacional no maior canal de notícias do mundo!
Language: pt-BR

In search results

CNN Brasilhttps://www.cnnbrasil.com.br/

CNN Brasil | Notícias Ao Vivo do Brasil e do Mundo

Pense bem, pense CNN - Notícias ao vivo, fatos da política nacional e internacional no maior canal de notícias do mundo!

When shared

cnnbrasil.com.br

CNN Brasil | Notícias Ao Vivo do Brasil e do Mundo

Pense bem, pense CNN - Notícias ao vivo, fatos da política nacional e internacional no maior canal de notícia…

Logo & favicons

Found as: schema.org logo. JPG, 512 × 512.

Logo

On white

On black

On Crimson

Favicons

1 found

32 px · PNG icon

CNN Brasil | Notícias Ao Vivo do Brasil e do Mundo

Light browser tab

CNN Brasil | Notícias Ao Vivo do Brasil e do Mundo

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

Colour

Balance

How much each colour is used

Black 10.4%
Crimson 7%
Grey 6.7%
Chocolate 6.4%
Light Slate Blue 6.3%
Deep Steel Blue 6.3%
Medium Sea Green 6.2%
Dark Golden Rod 6.2%
Deep Slate Blue 6%
Deep Sky Blue 6%
Deep Pink 6%
Blue Violet 6%
Light Steel Blue 6%
Light Sea Green 6%
White 5.1%
Off White 3.4%

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

Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 96

On text
—

On white
19.80:1 AAA

Text, background, border · --tw-gradient-to, .bg-neutral-950
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 36

On text
7.85:1 AAA

On white
2.52:1 Fail

Text, background, border · .bg-neutral-400, .bg-neutral-400\/100
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
19.80:1 AAA

On white
—

Background, text, border · --tw-ring-offset-color, --tw-gradient-from
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 13

On text
14.72:1 AAA

On white
1.35:1 Fail

Background, border, text · .sr-bb .srt-home-4, .sr-bb .srt-base-1-neutral-1

Colours

Brand colours and accents, most used first

Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 83 83 14

On text
4.10:1 AA large

On white
4.83:1 AA

Background, text, border · --tw-ring-color, .bg-red-600
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 54 91 2

On text
7.06:1 AAA

On white
2.80:1 Fail

Background, border, text · .bg-orange-500, .bg-orange-500\/100
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
32 19 0 59

On text
2.61:1 Fail

On white
7.58:1 AAA

Background, text, border · .bg-slate-600, .bg-slate-600\/100
Deep Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
98 35 0 37

On text
3.34:1 AA large

On white
5.93:1 AA

Background, text, border · .bg-sky-700, .bg-sky-700\/100
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
87 0 55 36

On text
6.01:1 AA

On white
3.30:1 AA large

Background, border, text · .bg-green-600, .bg-green-600\/100
Dark Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 32 98 21

On text
6.74:1 AA

On white
2.94:1 Fail

Background, border, text · .bg-yellow-600, .bg-yellow-600\/100
Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
78 58 0 46

On text
1.91:1 Fail

On white
10.36:1 AAA

Background, border, text · .bg-blue-900, .bg-blue-900\/100
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
97 14 0 17

On text
8.15:1 AAA

On white
2.43:1 Fail

Background, border, text · .bg-cyan-500, .bg-cyan-500\/100
Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 69 35 7

On text
5.61:1 AA

On white
3.53:1 AA large

Background, border, text · .bg-pink-500, .bg-pink-500\/100
Blue Violet

HEX

RGB

HSL

OKLCH

CMYK
37 78 0 8

On text
3.68:1 AA large

On white
5.38:1 AA

Background, border, text · .bg-purple-600, .bg-purple-600\/100
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
99 34 0 22

On text
4.83:1 AA

On white
4.10:1 AA large

Background, border, text · .bg-sky-600, .bg-sky-600\/100
Light Sea Green

HEX

RGB

HSL

OKLCH

CMYK
89 0 10 28

On text
7.95:1 AAA

On white
2.49:1 Fail

Background, border, text · .bg-teal-500, .bg-teal-500\/100

Gradients

radial-gradient(circle,rgba(157,181,193,1)0,rgba(59,76,85,1)100%)
linear-gradient(to bottom,)
linear-gradient(to bottom right,)

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.

Noto Serif

Aa 400

Noto Serif

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

Aa 300 Aa 700

CNN Sans Display

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

Aa 300 Aa 700

cnnSans

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

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

Type scale

From the site’s CSS

Paragraph 1.125rem · 18 px / 1.75rem weight 400 · Noto Serif

Pense bem, pense CNN - Notícias ao vivo, fatos da política nacional e internacional no maior canal de notícias do mundo!

Small 80%

Pense bem, pense CNN - Notícias ao vivo, fatos da política nacional e internacional no maior canal de notícias do mundo!

Button 100% none

Get started

Sizes in use

Most common across the site

72pxline 1 · 2 rules
20pxline 1.75rem · 3 rules
18pxline 1.75rem · 7 rules
16pxline 1.5rem · 3 rules
14pxline 1.25rem · 2 rules
12pxline 1rem · 7 rules
11px2 rules
10px2 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

.25rem · 5×
9999px · 5×
.5rem · 5×
3px · 2×
.375rem · 2×
.125rem · 2×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000
0 1px 2px 0 rgba(0,0,0,.2),0 1px 3px 0 rgba(0,0,0,.1)
0 3px 6px 0 rgba(0,0,0,.23),0 3px 6px 0 rgba(0,0,0,.16)
0 6px 6px 0 rgba(0,0,0,.26),0 10px 20px 0 rgba(0,0,0,.19)

Layout

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

Grid

Breakpoints

520

560

640

768

820

1024

1280

1536

On a scale of 0 to 1536 px.

Content widths (max-width)

1536 px

1280 px

1024 px

768 px

672 px

640 px

Notes

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

Notes

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

Questions

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

Questions

What font does CNN Brasil use?: CNN Brasil’s website uses three typefaces: Noto Serif (headings), a system font; CNN Sans Display (body text), self-hosted; cnnSans, self-hosted.
What are CNN Brasil’s brand colours?: The main colours on cnnbrasil.com.br are Crimson (#DC2626), Chocolate (#F97316), Light Slate Blue (#475569), Deep Steel Blue (#0369A1), Medium Sea Green (#16A34A) and Dark Golden Rod (#CA8A04).
What colour is CNN Brasil’s text and background?: Body text is #0A0A0A on a #FFFFFF background.
Where is CNN Brasil’s logo from?: The logo shown in this guide was found on cnnbrasil.com.br’s homepage. For official logo files and usage rules, check CNN Brasil’s own brand or press page.
Is this CNN Brasil’s official style guide?: No. SiteStyleGuide made it from cnnbrasil.com.br’s public web pages on 29 October 2026, and isn’t affiliated with CNN Brasil. 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

cnnbrasil-com-br-tokens.css

Download

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

/* cnnbrasil.com.br design tokens, from SiteStyleGuide (https://sitestyleguide.com/cnnbrasil.com.br) */
:root {
  /* Colours */
  --text: #0A0A0A;
  --background: #FFFFFF;
  --colour-black: #0A0A0A;
  --colour-grey: #A3A3A3;
  --colour-white: #FFFFFF;
  --colour-off-white: #DEDEDE;
  --colour-crimson: #DC2626;
  --colour-chocolate: #F97316;
  --colour-light-slate-blue: #475569;
  --colour-deep-steel-blue: #0369A1;
  --colour-medium-sea-green: #16A34A;
  --colour-dark-golden-rod: #CA8A04;
  --colour-deep-slate-blue: #1E3A8A;
  --colour-deep-sky-blue: #06B6D4;
  --colour-deep-pink: #EC4899;
  --colour-blue-violet: #9333EA;
  --colour-light-steel-blue: #0284C7;
  --colour-light-sea-green: #14B8A6;
  --gradient-1: radial-gradient(circle,rgba(157,181,193,1)0,rgba(59,76,85,1)100%);
  --gradient-2: linear-gradient(to bottom,);
  --gradient-3: linear-gradient(to bottom right,);

  /* Typefaces */
  --font-headings: 'Noto Serif', serif;
  --font-buttons: 'Noto Serif', serif;
  --font-body: 'CNN Sans Display', serif;
  --font-other: 'cnnSans', 'cnnSans Fallback';

  /* Type scale */
  --text-p: 1.125rem;
  --leading-p: 1.75rem;
  --text-small: 80%;
  --text-button: 100%;

  /* Shape */
  --radius-1: .25rem;
  --radius-2: 9999px;
  --radius-3: .5rem;
  --radius-4: 3px;
  --radius-5: .375rem;
  --radius-6: .125rem;

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

{
    "site": "cnnbrasil.com.br",
    "source": "https://sitestyleguide.com/cnnbrasil.com.br",
    "text": "#0A0A0A",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Black",
            "hex": "#0A0A0A",
            "rgb": [
                10,
                10,
                10
            ]
        },
        {
            "name": "Grey",
            "hex": "#A3A3A3",
            "rgb": [
                163,
                163,
                163
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Off White",
            "hex": "#DEDEDE",
            "rgb": [
                222,
                222,
                222
            ]
        },
        {
            "name": "Crimson",
            "hex": "#DC2626",
            "rgb": [
                220,
                38,
                38
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#F97316",
            "rgb": [
                249,
                115,
                22
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#475569",
            "rgb": [
                71,
                85,
                105
            ]
        },
        {
            "name": "Deep Steel Blue",
            "hex": "#0369A1",
            "rgb": [
                3,
                105,
                161
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#16A34A",
            "rgb": [
                22,
                163,
                74
            ]
        },
        {
            "name": "Dark Golden Rod",
            "hex": "#CA8A04",
            "rgb": [
                202,
                138,
                4
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#1E3A8A",
            "rgb": [
                30,
                58,
                138
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#06B6D4",
            "rgb": [
                6,
                182,
                212
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#EC4899",
            "rgb": [
                236,
                72,
                153
            ]
        },
        {
            "name": "Blue Violet",
            "hex": "#9333EA",
            "rgb": [
                147,
                51,
                234
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#0284C7",
            "rgb": [
                2,
                132,
                199
            ]
        },
        {
            "name": "Light Sea Green",
            "hex": "#14B8A6",
            "rgb": [
                20,
                184,
                166
            ]
        }
    ],
    "fonts": [
        {
            "name": "Noto Serif",
            "stack": "Noto Serif, serif",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "CNN Sans Display",
            "stack": "CNN Sans Display, serif",
            "weights": [
                300,
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "cnnSans",
            "stack": "cnnSans, cnnSans Fallback",
            "weights": [
                300,
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Noto Serif as their main typeface

moviepilot.de

moviepilot.de · set in Noto Serif
Save

Websites whose lead colour is closest to CNN Brasil’s

The Hollywood Reporter

hollywoodreporter.com · 4 days ago
Save
feedburner.com

feedburner.com · 3 days ago
Save
NME

nme.com · 5 days ago
Save
Vogue

vogue.com · 4 hours ago
Save

Captured from cnnbrasil.com.br on 29 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by CNN Brasil; this guide describes the public website for reference.

CNN Brasilstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Black

Grey

White

Off White

Colours

Crimson

Chocolate

Light Slate Blue

Deep Steel Blue

Medium Sea Green

Dark Golden Rod

Deep Slate Blue

Deep Sky Blue

Deep Pink

Blue Violet

Light Steel Blue

Light Sea Green

Gradients

Noto Serif

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run cnnbrasil.com.br?

Also set in Noto Serif

moviepilot.de

Similar colours

The Hollywood Reporter

feedburner.com

NME

Vogue

Title &
description