What font does BILD use?

BILD’s website uses three typefaces: Gotham (headings and body text), served from a.bildstatic.de; Gotham Cond, served from a.bildstatic.de; Gotham XNarrow, served from a.bildstatic.de.

What are BILD’s brand colours?

The main colours on bild.de are Red (#DD0000), Fire Brick (#C10000), Crimson (#DE0D22), Dark Red (#930000), Tomato (#F75849) and Light Orange (#F7931E).

What colour is BILD’s text and background?

Body text is #222628 on a #FFFFFF background.

Where is BILD’s logo from?

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

Is this BILD’s official style guide?

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

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

Unofficial style guide

BILDstyle guide

BILD’s website (bild.de) uses Gotham for its headings and body text. Its palette is led by Red (#DD0000), Fire Brick (#C10000) and Crimson (#DE0D22), with #222628 text on #FFFFFF. Captured from the live site on 29 October 2026.

Website: bild.de
Typefaces: Gotham, Gotham Cond, Gotham XNarrow
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 29 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the bild.de homepage on a desktop screen — Screenshot of bild.de on a 1440 px desktop screen, 29 Oct 2026.

Screenshot of the bild.de 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: Aktuelle Nachrichten | BILD.de; ● 30 / 60 characters
Meta description: BILD.de: Die Seite 1 für aktuelle Nachrichten und Themen, Bilder und Videos aus den Bereichen News, Wirtschaft, Politik, Show, Sport, und Promis.; ● 145 / 160 characters
Site name: BILD
og:title: Aktuelle Nachrichten | BILD.de
Language: de

In search results

BILDhttps://www.bild.de/

Aktuelle Nachrichten | BILD.de

BILD.de: Die Seite 1 für aktuelle Nachrichten und Themen, Bilder und Videos aus den Bereichen News, Wirtschaft, Politik, Show, Sport, und Promis.

When shared

bild.de

Aktuelle Nachrichten | BILD.de

BILD.de: Die Seite 1 für aktuelle Nachrichten und Themen, Bilder und Videos aus den Bereichen News, Wirtschaf…

Logo & favicons

Found as: schema.org logo. PNG, 149 × 149.

Logo

On white

On black

On Red

Favicons

8 found

192 px · PNG icon
72 px · PNG apple-touch-icon
60 px · PNG apple-touch-icon
57 px · PNG apple-touch-icon
48 px · PNG icon
32 px · PNG icon
32 px · SVG icon
16 px · PNG icon

Aktuelle Nachrichten | BILD.de

Light browser tab

Aktuelle Nachrichten | BILD.de

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

Colour

Balance

How much each colour is used

White 24.8%
Red 19.2%
Near Black 15%
Off White 9.6%
Cool Dark Grey 7.6%
Fire Brick 4%
Crimson 2.8%
Dark Red 2.4%
Tomato 2.4%
Light Orange 2%
Deep Orange 2%
Dark Green 2%
Dark Slate Blue 1.8%
Misty Rose 1.6%
Deep Golden Rod 1.6%
Light Golden Rod 1.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
15.26:1 AAA

On white
—

Background, text, graphic · --quotation-color, .ehfk__title p
Near Black

HEX

RGB

HSL

OKLCH

CMYK
15 5 0 84

On text
—

On white
15.26:1 AAA

Text · --headline-color, .invite-link h3
Off White

HEX

RGB

HSL

OKLCH

CMYK
2 0 0 11

On text
11.59:1 AAA

On white
1.32:1 Fail

Used · --border-color-subtle-on-light, --icon-color-secondary-on-dark
Cool Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
9 5 0 63

On text
2.20:1 Fail

On white
6.95:1 AA

Used · --text-color-secondary-on-light, --border-color-default-on-dark

Colours

Brand colours and accents, most used first

Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 13

On text
2.96:1 Fail

On white
5.15:1 AA

Background, graphic · --secondary-tenant-color, --text-link-underline-color
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 24

On text
2.37:1 Fail

On white
6.43:1 AA

Used · --bg-color-brand-solid-hover, --bg-color-error-solid
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 94 85 13

On text
3.04:1 AA large

On white
5.02:1 AA

Used · --kicker-bz-bg-color, --kicker-cobi-bg-color
Dark Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 42

On text
1.63:1 Fail

On white
9.37:1 AAA

Used · --bg-color-brand-solid-active, --bg-color-error-solid-hover
Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 64 70 3

On text
4.69:1 AA

On white
3.26:1 AA large

Used · --color-bild-red-60, --text-color-brand
Light Orange

HEX

RGB

HSL

OKLCH

CMYK
0 40 88 3

On text
6.65:1 AA

On white
2.30:1 Fail

Used · --vertical-video-gradient-colors, --play-widget-bg-gradient-stop
Deep Orange

HEX

RGB

HSL

OKLCH

CMYK
0 49 85 1

On text
6.10:1 AA

On white
2.50:1 Fail

Used · --bg-color-warning-solid, --breaking-news-title-bg-color
Dark Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 44 57

On text
2.40:1 Fail

On white
6.36:1 AA

Used · --bg-color-success-solid-hover, --text-color-success
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
82 48 0 49

On text
1.59:1 Fail

On white
9.61:1 AAA

Used · --kicker-spobi-bg-color, --quotation-color
Misty Rose

HEX

RGB

HSL

OKLCH

CMYK
0 15 15 0

On text
11.84:1 AAA

On white
1.29:1 Fail

Used · --bg-color-brand-tint, --bg-color-error-tint-hover
Deep Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 25 100 15

On text
6.63:1 AA

On white
2.30:1 Fail

Used · --bg-color-ads-solid-hover, --border-color-ads-hover
Light Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 25 100 0

On text
9.23:1 AAA

On white
1.65:1 Fail

Used · --bg-color-ads-solid, --border-color-ads

Gradients

linear-gradient(180deg, 0%, 100%)
linear-gradient(90deg,,)
linear-gradient(270deg,,)

Dark mode

When the device is set to dark

Aa Light · #222628 on #FFFFFF

Aa Dark · #FFFFFF on #222628 · 15.26:1 AAA

White

#FFFFFF · --text-color-brand-light-only
Near Black

#222628 · --text-color-primary-on-light
Cool Charcoal

#343C41 · --bg-color-tertiary
Cool Light Grey

#A6ABB0 · --text-color-secondary
Tomato

#F75849 · --text-color-brand
Off White

#DDE1E2 · --text-color-primary
Cool Dark Grey

#565A5F · --text-color-secondary-on-light
Cool Charcoal

#2C3133 · --bg-color-secondary
Cool Light Grey

#C4C9CF · --bg-color-strong-active
Cool Grey

#8C9196 · --text-color-tertiary
Red

#DD0000 · --bg-color-selected
Fire Brick

#C10000 · --bg-color-brand-solid-hover

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.

Gotham

Aa 800

Gotham

Served from a.bildstatic.de · weights 800 · headings · shown in a stand-in if you don’t have it

Aa 600 Aa 700

Gotham Cond

Served from a.bildstatic.de · weights 600, 700 · headings · shown in a stand-in if you don’t have it

Aa 400 Aa 700

Gotham XNarrow

Served from a.bildstatic.de · weights 400, 700 · shown in a stand-in if you don’t have it

Aa 700

Lucida Grande

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

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

Type scale

From the site’s CSS

Heading 1 2em · 32 px

BILD

Heading 3 32px / 1 weight 600 · Gotham Cond

Aktuelle Nachrichten | BILD.de

Paragraph / weight · uppercase

BILD.de: Die Seite 1 für aktuelle Nachrichten und Themen, Bilder und Videos aus den Bereichen News, Wirtschaft, Politik, Show, Sport, und P…

Small 80%

BILD.de: Die Seite 1 für aktuelle Nachrichten und Themen, Bilder und Videos aus den Bereichen News, Wirtschaft, Politik, Show, Sport, und P…

Button 100% / 1.15 none

Get started

Link / weight

Sizes in use

Most common across the site

36px2 rules
32px2 rules
28pxline 1 · 2 rules
24pxline 1 · 2 rules
18pxline · 5 rules
16pxline 1.3 · 8 rules
14px2 rules
12pxline · 3 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

0 0 · 4×
calc( / 2) · 4×
50% · 3×
8px · 2×
4px · 1×

Shadows

0 8px 10px -8px #00000040
0 0 0 3px #fff
0 -4px 24px #00000026

Layout

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

Grid

Breakpoints

399

599

600

1023

1024

On a scale of 0 to 1440 px.

Content widths (max-width)

1024 px

700 px

495 px

488 px

393 px

320 px

Notes

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

Notes

● FineThe title is 30 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 BILD use?: BILD’s website uses three typefaces: Gotham (headings and body text), served from a.bildstatic.de; Gotham Cond, served from a.bildstatic.de; Gotham XNarrow, served from a.bildstatic.de.
What are BILD’s brand colours?: The main colours on bild.de are Red (#DD0000), Fire Brick (#C10000), Crimson (#DE0D22), Dark Red (#930000), Tomato (#F75849) and Light Orange (#F7931E).
What colour is BILD’s text and background?: Body text is #222628 on a #FFFFFF background.
Where is BILD’s logo from?: The logo shown in this guide was found on bild.de’s homepage. For official logo files and usage rules, check BILD’s own brand or press page.
Is this BILD’s official style guide?: No. SiteStyleGuide made it from bild.de’s public web pages on 29 October 2026, and isn’t affiliated with BILD. 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

bild-de-tokens.css

Download

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

/* bild.de design tokens, from SiteStyleGuide (https://sitestyleguide.com/bild.de) */
:root {
  /* Colours */
  --text: #222628;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #222628;
  --colour-off-white: #DDE1E2;
  --colour-cool-dark-grey: #565A5F;
  --colour-red: #DD0000;
  --colour-fire-brick: #C10000;
  --colour-crimson: #DE0D22;
  --colour-dark-red: #930000;
  --colour-tomato: #F75849;
  --colour-light-orange: #F7931E;
  --colour-deep-orange: #FD8227;
  --colour-dark-green: #006E3E;
  --colour-dark-slate-blue: #174482;
  --colour-misty-rose: #FFDADA;
  --colour-deep-golden-rod: #D9A200;
  --colour-light-golden-rod: #FFBF00;
  --gradient-1: linear-gradient(180deg, 0%, 100%);
  --gradient-2: linear-gradient(90deg,,);
  --gradient-3: linear-gradient(270deg,,);

  /* Typefaces */
  --font-headings: 'Gotham', 'Avenir Next', 'Helvetica Neue', 'sans-serif-black', 'Arial Narrow', 'Arial Nova';
  --font-other: 'Gotham XNarrow', 'Avenir Next Condensed', 'sans-serif-condensed', 'Arial Narrow', 'Arial Nova', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --text-h3: 32px;
  --leading-h3: 1;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;

  /* Shape */
  --radius-1: 0 0;
  --radius-2: calc( / 2);
  --radius-3: 50%;
  --radius-4: 8px;
  --radius-5: 4px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 399px;
  --breakpoint-2: 599px;
  --breakpoint-3: 600px;
  --breakpoint-4: 1023px;
  --breakpoint-5: 1024px;
  --max-width-1: 1024px;
  --max-width-2: 700px;
  --max-width-3: 495px;
  --max-width-4: 488px;
  --max-width-5: 393px;
  --max-width-6: 320px;
}

{
    "site": "bild.de",
    "source": "https://sitestyleguide.com/bild.de",
    "text": "#222628",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#222628",
            "rgb": [
                34,
                38,
                40
            ]
        },
        {
            "name": "Off White",
            "hex": "#DDE1E2",
            "rgb": [
                221,
                225,
                226
            ]
        },
        {
            "name": "Cool Dark Grey",
            "hex": "#565A5F",
            "rgb": [
                86,
                90,
                95
            ]
        },
        {
            "name": "Red",
            "hex": "#DD0000",
            "rgb": [
                221,
                0,
                0
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#C10000",
            "rgb": [
                193,
                0,
                0
            ]
        },
        {
            "name": "Crimson",
            "hex": "#DE0D22",
            "rgb": [
                222,
                13,
                34
            ]
        },
        {
            "name": "Dark Red",
            "hex": "#930000",
            "rgb": [
                147,
                0,
                0
            ]
        },
        {
            "name": "Tomato",
            "hex": "#F75849",
            "rgb": [
                247,
                88,
                73
            ]
        },
        {
            "name": "Light Orange",
            "hex": "#F7931E",
            "rgb": [
                247,
                147,
                30
            ]
        },
        {
            "name": "Deep Orange",
            "hex": "#FD8227",
            "rgb": [
                253,
                130,
                39
            ]
        },
        {
            "name": "Dark Green",
            "hex": "#006E3E",
            "rgb": [
                0,
                110,
                62
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#174482",
            "rgb": [
                23,
                68,
                130
            ]
        },
        {
            "name": "Misty Rose",
            "hex": "#FFDADA",
            "rgb": [
                255,
                218,
                218
            ]
        },
        {
            "name": "Deep Golden Rod",
            "hex": "#D9A200",
            "rgb": [
                217,
                162,
                0
            ]
        },
        {
            "name": "Light Golden Rod",
            "hex": "#FFBF00",
            "rgb": [
                255,
                191,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "Gotham",
            "stack": "Gotham, Avenir Next, Helvetica Neue, sans-serif-black, Arial Narrow, Arial Nova, sans-serif",
            "weights": [
                800
            ],
            "source": "Served from a.bildstatic.de"
        },
        {
            "name": "Gotham Cond",
            "stack": "Gotham Cond, HelveticaNeue-CondensedBold, Helvetica Neue, Franklin Gothic, sans-serif-condensed, Arial Narrow, Arial Nova, sans-serif",
            "weights": [
                600,
                700
            ],
            "source": "Served from a.bildstatic.de"
        },
        {
            "name": "Gotham XNarrow",
            "stack": "Gotham XNarrow, Avenir Next Condensed, sans-serif-condensed, Arial Narrow, Arial Nova, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Served from a.bildstatic.de"
        },
        {
            "name": "Lucida Grande",
            "stack": "Lucida Grande, Lucida Sans Unicode, Lucida Sans, verdana, sans-serif",
            "weights": [
                700
            ],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Gotham as their main typeface

NerdWallet

nerdwallet.com · set in Gotham
Save
The Championships, Wimbledon

wimbledon.com · set in Gotham
Save

Websites whose lead colour is closest to BILD’s

163.com

163.com · 5 days ago
Save
GSMArena.com

gsmarena.com · 3 days ago
Save
BuildYourBzns

buildyourbzns.com · 5 days ago
Save
BBC Home

bbc.com · 3 days ago
Save

Captured from bild.de on 29 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by BILD; this guide describes the public website for reference.

BILDstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Off White

Cool Dark Grey

Colours

Red

Fire Brick

Crimson

Dark Red

Tomato

Light Orange

Deep Orange

Dark Green

Dark Slate Blue

Misty Rose

Deep Golden Rod

Light Golden Rod

Gradients

Dark mode

Gotham

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run bild.de?

Also set in Gotham

NerdWallet

The Championships, Wimbledon

Similar colours

163.com

GSMArena.com

BuildYourBzns

BBC Home

Title &
description