SoundCloud
soundcloud.com · 1 day ago
SaveUnofficial A style guide made by SiteStyleGuide from terra.com.br’s public web pages. Not affiliated with or endorsed by Terra. The real site is terra.com.br ↗
Unofficial style guide
Terrastyle guide
Terra’s website (terra.com.br) uses Nunito Sans for its headings and body text. Its palette is led by Orange Red (#F85700), Gold (#FFD966) and Purple (#5E0F6C), with #211F1F text on #FFFFFF. Captured from the live site on 26 October 2026.
- Website
- terra.com.br
- Typefaces
- Nunito Sans, Lora, Barlow Condensed
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 26 Oct 2026 · added by @sitestyleguide
https://www.terra.com.br/
Screenshot
terra.com.br
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Terra - Seu Portal de Notícias, Diversão, Esportes e Vida e Estilo
- ▲ 66 / 60 characters
- Meta description
- Acompanhe no Terra as últimas notícias do Brasil e do mundo sobre Entretenimento, Esportes, Tecnologia, Saúde, Horóscopo, Receitas e muito mais
- ● 143 / 160 characters
- Site name
- Terra
- og:title
- Terra - Seu Portal de Notícias, Diversão, Esportes e Vida e Estilo
- og:description
- Acompanhe no Terra as últimas notícias do Brasil e do mundo sobre Entretenimento, Esportes, Tecnologia, Saúde, Horóscopo, Receitas e muito mais
- Language
- pt-BR
- Theme colour
- #ff7212
In search results
Terrahttps://www.terra.com.br/
Terra - Seu Portal de Notícias, Diversão, Esportes e Vida e E…
Acompanhe no Terra as últimas notícias do Brasil e do mundo sobre Entretenimento, Esportes, Tecnologia, Saúde, Horóscopo, Receitas e muito mais
When shared
terra.com.br
Terra - Seu Portal de Notícias, Diversão, Esportes e Vida e Estilo
Acompanhe no Terra as últimas notícias do Brasil e do mundo sobre Entretenimento, Esportes, Tecnologia, Saúde…
Logo & favicons
Found as: schema.org logo. PNG, 1200 × 1600.
Logo
On white
On black
On Orange Red
Favicons
6 found-
512 px · PNG
manifest
-
512 px · PNG
manifest
-
256 px · PNG
manifest
-
192 px · PNG
manifest
-
180 px · PNG
apple-touch-icon
-
Terra - Seu Portal de Notícias, Diversão, Esportes e Vida e Estilo
Light browser tab
Terra - Seu Portal de Notícias, Diversão, Esportes e Vida e Estilo
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 (#211F1F) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 27.4%
- Near Black 18.4%
- Orange Red 11.2%
- Warm Off White 6.8%
- Charcoal 6.5%
- Gold 3.8%
- Purple 3.6%
- Golden Rod 3.2%
- Fire Brick 3%
- Midnight Blue 3%
- Green Yellow 2.5%
- Coral 2.5%
- Pink 2.1%
- Dark Orchid 2.1%
- Deep Slate Blue 1.9%
- Light Slate Blue 1.9%
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
- 16.40:1 AAA
- On white
- —
Text, background, border · body, --atc-container-bg
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 6 6 87
- On text
- —
- On white
- 16.40:1 AAA
Text, background, border · .app-t360-user-table .card-game__content .app-t360-games-list__item__game-info__, .navbar-my-user__header__close .icon
-
Warm Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 5 8 0
- On text
- 14.96:1 AAA
- On white
- 1.10:1 Fail
Background, text, border · [color-scheme=dark] .header-separator-color .bg-color-meunegocio, [color-scheme=dark] .header-separator-color .bg-color-eleicoes
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 4 4 73
- On text
- 1.62:1 Fail
- On white
- 10.10:1 AAA
Text, background, border · .navbar-my-user__header__button-text, .navbar-my-user__header__area__loged-in__logout-button
Colours
Brand colours and accents, most used first-
Orange Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 65 100 3
- On text
- 4.96:1 AA
- On white
- 3.30:1 AA large
Background, text, border · [color-scheme=dark] .header-separator-color .bg-color-blackfriday, .navbar-portal-content__list__item.active::after
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 15 60 0
- On text
- 12.00:1 AAA
- On white
- 1.37:1 Fail
Background, text, border · [color-scheme=dark] .header-separator-color .bg-color-degusta, [color-scheme=dark] .header-separator-color .bg-color-verao
-
Purple
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 13 86 0 58
- On text
- 1.38:1 Fail
- On white
- 11.93:1 AAA
Text, background, border · --bg-color-home, .zaz-app-t360-horoscope-table__header--title
-
Golden Rod
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 21 85 7
- On text
- 9.26:1 AAA
- On white
- 1.77:1 Fail
Background, text · --bg-color-home, --landing-primary-background-color-horoscopo
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 85 99 20
- On text
- 2.92:1 Fail
- On white
- 5.62:1 AA
Background, text, border · .zaz-app-t360-ticker .live .item .title-live.live-event::before, .navbar-user-area__notifications-config__list-item .error
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 79 0 74
- On text
- 1.12:1 Fail
- On white
- 18.40:1 AAA
Background, text, border · --landing-primary-background-color-byte, .lottery--mais-milionaria .lottery-btn
-
Green Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 28 0 89 2
- On text
- 12.97:1 AAA
- On white
- 1.26:1 Fail
Background, text, border · [color-scheme=dark] .header-separator-color .bg-color-terracreators, [color-scheme=dark] .header-separator-color .bg-color-partiucorrer
-
Coral
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 50 78 0
- On text
- 6.52:1 AA
- On white
- 2.52:1 Fail
Background, text, border · --color-title, .bg-color-tudosobre
-
Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 25 25 0
- On text
- 10.43:1 AAA
- On white
- 1.57:1 Fail
Background, text · [color-scheme=dark] .header-separator-color .bg-color-mobilidade, --mt-bg-gradient
-
Dark Orchid
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 7 100 0 24
- On text
- 2.92:1 Fail
- On white
- 5.61:1 AA
Background, text, border · .navbar-servicesterra__button-terra-astral, .navbar-servicesterra__button-terra-astral--icon
-
Deep Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 53 42 0 65
- On text
- 1.36:1 Fail
- On white
- 12.09:1 AAA
Text, background · .bg-color-tertiary-mobilidade, .color-secondary-mobilidade
-
Light Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 96 62 0 25
- On text
- 2.09:1 Fail
- On white
- 7.83:1 AAA
Background, text, border · --landing-tertiary-background-color-economia, .lottery--loteria-federal .lottery-btn
Gradients
-
linear-gradient(to right,rgba(255,255,255,0) 0, 80%)
-
linear-gradient(to right, 20%,rgba(255,255,255,0) 100%)
-
linear-gradient(90deg, #5E0F6C 0%, #CF4BE7 50.1%, #EEBC23 100%, #EEBC23 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.
Nunito Sans
Aa
400
Aa
900
Nunito Sans
Served from s1.trrsf.com · weights 400, 700, 800, 900 · headings, body, buttons · shown in a stand-in if you don’t have it
Aa
700
Lora
Served from s1.trrsf.com · weights 700 · headings · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Barlow Condensed
Served from s1.trrsf.com · weights 400, 500, 700 · headings · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Archivo Narrow
Served from s1.trrsf.com · weights 400, 600, 700 · headings · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS · root 10 px
Heading 1
2em · 20 px
Terra
Heading 2
100%
Terra - Seu Portal de Notícias, Diversão, Espor…
Heading 3
100%
Terra - Seu Portal de Notícias, Diversão, Espor…
Heading 4
100%
Terra - Seu Portal de Notícias, Diversão, Espor…
Heading 5
100%
Terra - Seu Portal de Notícias, Diversão, Espor…
Heading 6
100%
Terra - Seu Portal de Notícias, Diversão, Espor…
Body
10px
Nunito Sans
Acompanhe no Terra as últimas notícias do Brasil e do mundo sobre Entretenimento, Esportes, Tecnologia, Saúde, Horóscopo, Receitas e muito …
Paragraph
100%
Acompanhe no Terra as últimas notícias do Brasil e do mundo sobre Entretenimento, Esportes, Tecnologia, Saúde, Horóscopo, Receitas e muito …
Small
80%
Acompanhe no Terra as últimas notícias do Brasil e do mundo sobre Entretenimento, Esportes, Tecnologia, Saúde, Horóscopo, Receitas e muito …
Button
100% / 1.15
none
Get started
Link
100%
Read more about Terra
Sizes in use
Most common across the site- 24pxline 32px · 14 rules
- 20pxline 30px · 20 rules
- 18pxline 26px · 20 rules
- 16pxline 24px · 51 rules
- 14pxline 22px · 28 rules
- 12pxline 18px · 32 rules
- 11pxline 16px · 19 rules
- 9pxline 16px · 12 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
.navbar-user-area__notifications-config__list-item__switch-btn .btn-background-l · #F85700 · radius 20px
Corner radius
- 4px · 43×
- 8px · 37×
- 50% · 11×
- 24px · 9×
- 20px · 7×
- 25px · 5×
Shadows
- 0 2px 4px rgba(0, 0, 0, .05)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
359
664
800
899
1199
1200
1297
1300
On a scale of 0 to 1440 px.
Content widths (max-width)
1272 px
950 px
628 px
344 px
306 px
300 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 66 characters. Google usually cuts titles near 60, so the end may not show in results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Terra use?
- Terra’s website uses four typefaces: Nunito Sans (headings and body text), served from s1.trrsf.com; Lora, served from s1.trrsf.com; Barlow Condensed, served from s1.trrsf.com; Archivo Narrow, served from s1.trrsf.com.
- What are Terra’s brand colours?
- The main colours on terra.com.br are Orange Red (#F85700), Gold (#FFD966), Purple (#5E0F6C), Golden Rod (#EEBC23), Fire Brick (#CB1F03) and Midnight Blue (#000E42).
- What colour is Terra’s text and background?
- Body text is #211F1F on a #FFFFFF background.
- Where is Terra’s logo from?
- The logo shown in this guide was found on terra.com.br’s homepage. For official logo files and usage rules, check Terra’s own brand or press page.
- Is this Terra’s official style guide?
- No. SiteStyleGuide made it from terra.com.br’s public web pages on 26 October 2026, and isn’t affiliated with Terra. 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
terra-com-br-tokens.css
/* terra.com.br design tokens, from SiteStyleGuide (https://sitestyleguide.com/terra.com.br) */
:root {
/* Colours */
--text: #211F1F;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-near-black: #211F1F;
--colour-warm-off-white: #FFF2EB;
--colour-charcoal: #444141;
--colour-orange-red: #F85700;
--colour-gold: #FFD966;
--colour-purple: #5E0F6C;
--colour-golden-rod: #EEBC23;
--colour-fire-brick: #CB1F03;
--colour-midnight-blue: #000E42;
--colour-green-yellow: #B3FA1B;
--colour-coral: #FF7F39;
--colour-pink: #FFBEBE;
--colour-dark-orchid: #B500C2;
--colour-deep-slate-blue: #2A345A;
--colour-light-slate-blue: #0848BE;
--gradient-1: linear-gradient(to right,rgba(255,255,255,0) 0, 80%);
--gradient-2: linear-gradient(to right, 20%,rgba(255,255,255,0) 100%);
--gradient-3: linear-gradient(90deg, #5E0F6C 0%, #CF4BE7 50.1%, #EEBC23 100%, #EEBC23 100%);
/* Typefaces */
--font-headings: 'Nunito Sans', 'Arial', sans-serif;
--font-body: 'Nunito Sans', 'Arial', sans-serif;
--font-buttons: 'Nunito Sans', 'Arial', sans-serif;
/* Type scale */
--text-h1: 2em;
--text-h2: 100%;
--text-h3: 100%;
--text-h4: 100%;
--text-h5: 100%;
--text-h6: 100%;
--text-body: 10px;
--text-p: 100%;
--text-small: 80%;
--text-button: 100%;
--leading-button: 1.15;
--text-a: 100%;
/* Shape */
--radius-1: 4px;
--radius-2: 8px;
--radius-3: 50%;
--radius-4: 24px;
--radius-5: 20px;
--radius-6: 25px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 359px;
--breakpoint-2: 664px;
--breakpoint-3: 800px;
--breakpoint-4: 899px;
--breakpoint-5: 1199px;
--breakpoint-6: 1200px;
--breakpoint-7: 1297px;
--breakpoint-8: 1300px;
--max-width-1: 1272px;
--max-width-2: 950px;
--max-width-3: 628px;
--max-width-4: 344px;
--max-width-5: 306px;
--max-width-6: 300px;
}
{
"site": "terra.com.br",
"source": "https://sitestyleguide.com/terra.com.br",
"text": "#211F1F",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Near Black",
"hex": "#211F1F",
"rgb": [
33,
31,
31
]
},
{
"name": "Warm Off White",
"hex": "#FFF2EB",
"rgb": [
255,
242,
235
]
},
{
"name": "Charcoal",
"hex": "#444141",
"rgb": [
68,
65,
65
]
},
{
"name": "Orange Red",
"hex": "#F85700",
"rgb": [
248,
87,
0
]
},
{
"name": "Gold",
"hex": "#FFD966",
"rgb": [
255,
217,
102
]
},
{
"name": "Purple",
"hex": "#5E0F6C",
"rgb": [
94,
15,
108
]
},
{
"name": "Golden Rod",
"hex": "#EEBC23",
"rgb": [
238,
188,
35
]
},
{
"name": "Fire Brick",
"hex": "#CB1F03",
"rgb": [
203,
31,
3
]
},
{
"name": "Midnight Blue",
"hex": "#000E42",
"rgb": [
0,
14,
66
]
},
{
"name": "Green Yellow",
"hex": "#B3FA1B",
"rgb": [
179,
250,
27
]
},
{
"name": "Coral",
"hex": "#FF7F39",
"rgb": [
255,
127,
57
]
},
{
"name": "Pink",
"hex": "#FFBEBE",
"rgb": [
255,
190,
190
]
},
{
"name": "Dark Orchid",
"hex": "#B500C2",
"rgb": [
181,
0,
194
]
},
{
"name": "Deep Slate Blue",
"hex": "#2A345A",
"rgb": [
42,
52,
90
]
},
{
"name": "Light Slate Blue",
"hex": "#0848BE",
"rgb": [
8,
72,
190
]
}
],
"fonts": [
{
"name": "Nunito Sans",
"stack": "'Nunito Sans', Arial, sans-serif",
"weights": [
400,
700,
800,
900
],
"source": "Served from s1.trrsf.com"
},
{
"name": "Lora",
"stack": "Lora",
"weights": [
700
],
"source": "Served from s1.trrsf.com"
},
{
"name": "Barlow Condensed",
"stack": "'Barlow Condensed', Gill Sans, Impact",
"weights": [
400,
500,
700
],
"source": "Served from s1.trrsf.com"
},
{
"name": "Archivo Narrow",
"stack": "'Archivo Narrow', Arial",
"weights": [
400,
600,
700
],
"source": "Served from s1.trrsf.com"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run terra.com.br?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/terra.com.br" title="Terra style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to Terra’s
Captured from terra.com.br on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Terra; this guide describes the public website for reference.