What font does stern.de use?

stern.de’s website uses one typeface: stern-variable (headings and body text), self-hosted.

What are stern.de’s brand colours?

The main colours on stern.de are Fire Brick (#CC0000), Red (#FF0000), Medium Blue (#0D25B9), Sea Green (#007C44), Lime Green (#00CB67) and Sienna (#775644).

What colour is stern.de’s text and background?

Body text is #111111 on a #1F1F1F background.

Is this stern.de’s official style guide?

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

stern.de Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: Nachrichten, Hintergründe & Reportagen | STERN.de; ● 49 / 60 characters
Meta description: Auf STERN.DE finden Sie News, spannende Hintergründe sowie bildstarke Reportagen aus allen Bereichen: Von Politik und Wirtschaft bis Kultur und Wissenschaft.; ● 157 / 160 characters
Site name: stern.de
og:title: Nachrichten, Hintergründe & Reportagen
og:description: Auf STERN.DE finden Sie News, spannende Hintergründe sowie bildstarke Reportagen aus allen Bereichen: Von Politik und Wirtschaft bis Kultur und Wissenschaft.
Language: de
Theme colour: #1f1f1f

In search results

stern.dehttps://www.stern.de/

Nachrichten, Hintergründe & Reportagen | STERN.de

Auf STERN.DE finden Sie News, spannende Hintergründe sowie bildstarke Reportagen aus allen Bereichen: Von Politik und Wirtschaft bis Kultur und Wissenschaft.

When shared

No og:image, so no picture

stern.de

Nachrichten, Hintergründe & Reportagen

Auf STERN.DE finden Sie News, spannende Hintergründe sowie bildstarke Reportagen aus allen Bereichen: Von Pol…

Back to top ↑

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

4 found

512 px · SVG icon
512 px · PNG manifest
192 px · PNG manifest
48 px · ICO icon

Nachrichten, Hintergründe & Reportagen | STERN.de

Light browser tab

Nachrichten, Hintergründe & Reportagen | STERN.de

Dark browser tab

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

Colour

Balance

How much each colour is used

White 48.8%
Deep Black 22.6%
Light Black 16.3%
Charcoal 6.6%
Fire Brick 2.9%
Red 0.7%
Medium Blue 0.5%
Sea Green 0.4%
Lime Green 0.4%
Sienna 0.4%
Maroon 0.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

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
18.88:1 AAA

On white
—

Text, background, border · .u-button, .button--cta.u-typo--button-cta
Deep Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 93

On text
—

On white
18.88:1 AAA

Text, background, graphic · inline style on <img>, .button--cta.u-typo--button-cta
Light Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 88

On text
1.15:1 Fail

On white
16.48:1 AAA

Background, theme, text · inline style on <img>, body
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 81

On text
1.45:1 Fail

On white
13.01:1 AAA

Background, border · .button-pill, inline style on <img>

Colours

Brand colours and accents, most used first

Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 20

On text
3.21:1 AA large

On white
5.89:1 AA

Text, background · .vergleichsinfo-ueberschrift, .menu__link--stern-plus
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
4.72:1 AA

On white
4.00:1 AA large

Background · .vergleichsinfo-scroll::-webkit-scrollbar-thumb, --color-txt-error
Medium Blue

HEX

RGB

HSL

OKLCH

CMYK
93 80 0 27

On text
1.78:1 Fail

On white
10.59:1 AAA

Background · .ad-tag-container-test__ad, inline style on <picture>
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 45 51

On text
3.57:1 AA large

On white
5.29:1 AA

Text · .paid-barrier__benefit-icon, --color-bd-success
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 49 20

On text
8.76:1 AAA

On white
2.16:1 Fail

Text · .paid-barrier__benefit-icon, --color-bd-success
Sienna

HEX

RGB

HSL

OKLCH

CMYK
0 28 43 53

On text
2.88:1 Fail

On white
6.56:1 AA

Background · inline style on <img>
Maroon

HEX

RGB

HSL

OKLCH

CMYK
0 52 69 56

On text
1.99:1 Fail

On white
9.51:1 AAA

Background · inline style on <img>

Gradients

linear-gradient(135deg,#fd6585 10%,#0d25b9)
linear-gradient(rgba(0,0,0,0) 40%, 100%),0,linear-gradient(#0000000d 25%,#0000001a 50%,#0009)
linear-gradient(to left,light-dark(#ffffff, #1f1f1f),transparent)

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.

stern-variable

Aa 300 Aa 800

stern-variable

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

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

Type scale

From the site’s CSS

Body — / 1.3 weight 400 · stern-variable

Auf STERN.DE finden Sie News, spannende Hintergründe sowie bildstarke Reportagen aus allen Bereichen: Von Politik und Wirtschaft bis Kultur…

Sizes in use

Most common across the site

60pxline 1.2 · 3 rules
24pxline 1.3 · 21 rules
20pxline 1.3 · 15 rules
18pxline 1.6 · 4 rules
16pxline 1.2 · 19 rules
14pxline 1.2 · 10 rules
13pxline 10px · 8 rules
12pxline 1.3 · 7 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

.u-button · #FFFFFF · radius .25rem

Corner radius

.25rem · 14×
50% · 14×
.125rem · 13×
.5rem · 3×
0.125rem · 2×
1rem · 1×

Shadows

0 80px 200px rgba(17, 17, 17, .05)
0px 2px 10px -3px rgba(0, 0, 0, 0.2)
0 2px 7px 0

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

575

767

768

1024

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

350 px

Back to top ↑

Notes

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

Notes

● FineThe title is 49 characters, short enough to show in full in search results.
▲ CheckThere is no og:image, so links shared on social media show no picture.
▲ CheckBody text (#111111 on #1F1F1F) has a contrast of 1.15:1, under the 4.5:1 WCAG asks for.

Back to top ↑

Questions

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

Questions

What font does stern.de use?: stern.de’s website uses one typeface: stern-variable (headings and body text), self-hosted.
What are stern.de’s brand colours?: The main colours on stern.de are Fire Brick (#CC0000), Red (#FF0000), Medium Blue (#0D25B9), Sea Green (#007C44), Lime Green (#00CB67) and Sienna (#775644).
What colour is stern.de’s text and background?: Body text is #111111 on a #1F1F1F background.
Is this stern.de’s official style guide?: No. SiteStyleGuide made it from stern.de’s public web pages on 22 October 2026, and isn’t affiliated with stern.de. 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

stern-de-tokens.css

Download

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

/* stern.de design tokens, from SiteStyleGuide (https://sitestyleguide.com/stern.de) */
:root {
  /* Colours */
  --text: #111111;
  --background: #1F1F1F;
  --colour-white: #FFFFFF;
  --colour-deep-black: #111111;
  --colour-light-black: #1F1F1F;
  --colour-charcoal: #313131;
  --colour-fire-brick: #CC0000;
  --colour-red: #FF0000;
  --colour-medium-blue: #0D25B9;
  --colour-sea-green: #007C44;
  --colour-lime-green: #00CB67;
  --colour-sienna: #775644;
  --colour-maroon: #6F3522;
  --gradient-1: linear-gradient(135deg,#fd6585 10%,#0d25b9);
  --gradient-2: linear-gradient(rgba(0,0,0,0) 40%, 100%),0,linear-gradient(#0000000d 25%,#0000001a 50%,#0009);
  --gradient-3: linear-gradient(to left,light-dark(#ffffff, #1f1f1f),transparent);

  /* Typefaces */
  --font-body: 'stern-variable', 'arial', 'helvetica', sans-serif;

  /* Shape */
  --radius-1: .25rem;
  --radius-2: 50%;
  --radius-3: .125rem;
  --radius-4: .5rem;
  --radius-5: 0.125rem;
  --radius-6: 1rem;

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

{
    "site": "stern.de",
    "source": "https://sitestyleguide.com/stern.de",
    "text": "#111111",
    "background": "#1F1F1F",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Deep Black",
            "hex": "#111111",
            "rgb": [
                17,
                17,
                17
            ]
        },
        {
            "name": "Light Black",
            "hex": "#1F1F1F",
            "rgb": [
                31,
                31,
                31
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#313131",
            "rgb": [
                49,
                49,
                49
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#CC0000",
            "rgb": [
                204,
                0,
                0
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        },
        {
            "name": "Medium Blue",
            "hex": "#0D25B9",
            "rgb": [
                13,
                37,
                185
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#007C44",
            "rgb": [
                0,
                124,
                68
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#00CB67",
            "rgb": [
                0,
                203,
                103
            ]
        },
        {
            "name": "Sienna",
            "hex": "#775644",
            "rgb": [
                119,
                86,
                68
            ]
        },
        {
            "name": "Maroon",
            "hex": "#6F3522",
            "rgb": [
                111,
                53,
                34
            ]
        }
    ],
    "fonts": [
        {
            "name": "stern-variable",
            "stack": "stern-variable, arial, helvetica, sans-serif",
            "weights": [
                300,
                400,
                800
            ],
            "source": "Self-hosted"
        }
    ]
}

Back to top ↑

Share

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

Share

X LinkedIn Facebook Pinterest Reddit Email

Run stern.de?

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.

<a href="https://sitestyleguide.com/stern.de" title="stern.de 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 ↑

stern.destyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Deep Black

Light Black

Charcoal

Colours

Fire Brick

Red

Medium Blue

Sea Green

Lime Green

Sienna

Maroon

Gradients

stern-variable

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

ITmedia

HELLO!

Free

guardian.co.uk

stern.destyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Deep Black

Light Black

Charcoal

Colours

Fire Brick

Red

Medium Blue

Sea Green

Lime Green

Sienna

Maroon

Gradients

stern-variable

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run stern.de?

Similar colours

ITmedia

HELLO!

Free

guardian.co.uk

Title &
description