华声在线
voc.com.cn · 3 days ago
SaveUnofficial A style guide made by SiteStyleGuide from ndr.de’s public web pages. Not affiliated with or endorsed by ndr.de. The real site is ndr.de ↗
Unofficial style guide
ndr.destyle guide
ndr.de’s website (ndr.de) sets its headings in NDRSansBlack and its body text in NDRSansRegular. Its palette is led by Deep Royal Blue (#0E57AB), Light Steel Blue (#1379ED) and Midnight Blue (#0D1754), with #333333 text on #FFFFFF. Captured from the live site on 30 October 2026.
- Website
- ndr.de
- Typefaces
- NDRSansBlack, NDRSansRegular, NDRSansCondRegular
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 30 Oct 2026 · added by @sitestyleguide
https://www.ndr.de/
Screenshot
ndr.de
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- NDR.de - Das Beste am Norden - Radio - Fernsehen - Nachrichten | ndr.de
- ▲ 71 / 60 characters
- Meta description
- Alles zum NDR Programm in Fernsehen und Radio. Regionale Nachrichten aus Norddeutschland, Sport, Ratgeber-Themen, Unterhaltung, Kultur und Geschichte.
- ● 150 / 160 characters
- Site name
- ndr.de
- og:title
- NDR.de - Das Beste am Norden - Radio - Fernsehen - Nachrichten
- og:description
- Alles zum NDR Programm in Fernsehen und Radio. Regionale Nachrichten aus Norddeutschland, Sport, Ratgeber-Themen, Unterhaltung, Kultur und Geschichte.
- Language
- de
- Theme colour
- #0c1754
In search results
ndr.dehttps://www.ndr.de/
NDR.de - Das Beste am Norden - Radio - Fernsehen - Nachrichte…
Alles zum NDR Programm in Fernsehen und Radio. Regionale Nachrichten aus Norddeutschland, Sport, Ratgeber-Themen, Unterhaltung, Kultur und Geschichte.
When shared
ndr.de
NDR.de - Das Beste am Norden - Radio - Fernsehen - Nachrichten
Alles zum NDR Programm in Fernsehen und Radio. Regionale Nachrichten aus Norddeutschland, Sport, Ratgeber-The…
Logo & favicons
Found as: SVG in the header. SVG, 42 × 42.
Logo
On white
On black
On Deep Royal Blue
Favicons
5 found-
700 px · SVG
mask-icon
-
512 px · PNG
manifest
-
256 px · SVG
icon
-
192 px · PNG
manifest
-
NDR.de - Das Beste am Norden - Radio - Fernsehen - Nachrichten | ndr.de
Light browser tab
NDR.de - Das Beste am Norden - Radio - Fernsehen - Nachrichten | ndr.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 (#333333) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 37.7%
- Charcoal 21.6%
- Deep Royal Blue 10.4%
- Off White 7.8%
- Light Steel Blue 6.5%
- Midnight Blue 3.6%
- Near Black 3%
- Red 1.7%
- Dodger Blue 1.7%
- Deep Sky Blue 1.3%
- Light Royal Blue 1%
- Forest Green 0.9%
- Cadet Blue 0.8%
- Orange Red 0.8%
- Deep Steel Blue 0.6%
- Dark Khaki 0.6%
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
- 12.63:1 AAA
- On white
- —
Text, background, border · .orchester.topteaser .teaserpadding h2 a, body
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 80
- On text
- —
- On white
- 12.63:1 AAA
Text, background, border · .elbphilharmonieorchester .orchester .bock-kalenderbutton .button, body
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 11
- On text
- 9.75:1 AAA
- On white
- 1.30:1 Fail
Background, border, text · .columnedlist h2:before, .onairteaserbox .teaserbutton .button
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 87
- On text
- 1.26:1 Fail
- On white
- 15.91:1 AAA
Background · .darkmode header.articlehead, .darkmode .quizwrap header
Colours
Brand colours and accents, most used first-
Deep Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 92 49 0 33
- On text
- 1.79:1 Fail
- On white
- 7.07:1 AAA
Background, text, graphic · h1 .icon, .button
-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 92 49 0 7
- On text
- 3.00:1 AA large
- On white
- 4.21:1 AA large
Text, background, graphic · .darkmode h1 .icon, .darkmode section.teasergroup h1:before
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 85 73 0 67
- On text
- 1.31:1 Fail
- On white
- 16.57:1 AAA
Background, border, text · .button.secondary.active, .button.inverted.active
-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 83 100 10
- On text
- 2.79:1 Fail
- On white
- 4.52:1 AA
Background, text · .sport-live .button.filter-live::before, .teaserimage .textpadding.now-live
-
Dodger Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 72 38 0 0
- On text
- 4.53:1 AA
- On white
- 2.79:1 Fail
Background, border, text · html.darkmode .button, html.darkmode .button.inverted
-
Deep Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 21 0 13
- On text
- 4.97:1 AA
- On white
- 2.54:1 Fail
Background, border, graphic · .branding.ndrtv .topteasermagazin .button, .colored .tv-schedule h1:before
-
Light Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 79 42 0 29
- On text
- 2.24:1 Fail
- On white
- 5.65:1 AA
Background, text · a, .button.tiny:hover
-
Forest Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 99 0 54 38
- On text
- 3.56:1 AA large
- On white
- 3.55:1 AA large
Background, border, text · .vokalensemble .orchester .bock-kalenderbutton .button, .brand-background-ndrchor
-
Cadet Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 70 9 0 24
- On text
- 4.91:1 AA
- On white
- 2.57:1 Fail
Background, border, graphic · .ndrradiophilharmonie .orchester .bock-kalenderbutton .button, .brand-background-ndrradiophilharmonie
-
Orange Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 60 100 0
- On text
- 4.30:1 AA large
- On white
- 2.94:1 Fail
Background, border, graphic · .bigband .orchester .bock-kalenderbutton .button, .brand-background-ndrbigband
-
Deep Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 99 38 0 25
- On text
- 2.64:1 Fail
- On white
- 4.78:1 AA
Background, graphic · .brand-background-ndrinfo, .radiomarken-item.ndrinfo a
-
Dark Khaki
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 14 51 10
- On text
- 7.61:1 AAA
- On white
- 1.66:1 Fail
Background, graphic · .brand-background-ndrplus, .brand-background-ndrschlager
Gradients
-
linear-gradient(90deg, rgb(108, 108, 108) 0%, rgba(0, 0, 0, 0) 60%)
-
linear-gradient(260deg, rgb(108, 108, 108) 0%, rgba(0, 0, 0, 0) 60%)
-
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%)
Dark mode
When the device is set to dark
Aa
Light · #333333 on #FFFFFF
Aa
Dark · #FFFFFF on #222222 · 15.91:1 AAA
-
White
#FFFFFF · --duet-color-placeholder
-
Steel Blue
#1379ED · --duet-color-primary
-
Charcoal
#333333 · --duet-color-text
-
Near Black
#222222
-
Dodger Blue
#479DFF
-
Charcoal
#444444
-
Black
#000000
-
Dark Grey
#666666
-
Light Grey
#BBBBBB · --duet-color-surface
-
Off White
#E2E2E2
-
Red
#E62600
-
Royal Blue
#2568B4
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.
NDRSansBlack
Aa
400
Aa
700
NDRSansBlack
Self-hosted · weights 400, 700 · headings · shown in a stand-in if you don’t have it
Aa
400
Aa
700
NDRSansRegular
Self-hosted · weights 400, 700 · headings, body, buttons · shown in a stand-in if you don’t have it
Aa
400
NDRSansCondRegular
Self-hosted · weights 400 · headings · shown in a stand-in if you don’t have it
Aa
400
NDRSansCondBlack
Self-hosted · weights 400 · headings · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
2.0625rem · 33 px / 1.09
NDRSansCondBlack
ndr.de
Heading 2
1.875rem · 30 px / 1.07
NDRSansCondBlack
NDR.de - Das Beste am Norden - Radio - Fernsehe…
Heading 3
1.5rem · 24 px / 1.33
NDRSansBlack
NDR.de - Das Beste am Norden - Radio - Fernsehe…
Heading 4
1.3125rem · 21 px / 1.33
NDRSansBlack
NDR.de - Das Beste am Norden - Radio - Fernsehe…
Heading 5
1.0625rem · 17 px / 1.41
NDRSansBlack
NDR.de - Das Beste am Norden - Radio - Fernsehe…
Heading 6
.9375rem · 15 px / 1.33
NDRSansBlack
NDR.de - Das Beste am Norden - Radio - Fernsehe…
Body
—
NDRSansRegular
Alles zum NDR Programm in Fernsehen und Radio. Regionale Nachrichten aus Norddeutschland, Sport, Ratgeber-Themen, Unterhaltung, Kultur und …
Paragraph
.75rem · 12 px / 1.5
weight 700 · uppercase · NDRSansRegular
Alles zum NDR Programm in Fernsehen und Radio. Regionale Nachrichten aus Norddeutschland, Sport, Ratgeber-Themen, Unterhaltung, Kultur und …
Button
1.3rem · 21 px / 2.8rem
Get started
Link
1rem · 16 px / 1.8rem
weight 700 · NDRSansCondRegular
Read more about ndr.de
Sizes in use
Most common across the site- 24pxline 2.7rem · 13 rules
- 21pxline 1.33 · 8 rules
- 18pxline 1.56 · 11 rules
- 17pxline 1.41 · 5 rules
- 16pxline 1.375rem · 14 rules
- 15pxline 1.33 · 6 rules
- 14pxline 1rem · 14 rules
- 13pxline 1.2 · 5 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
form#main-search button · #0E57AB
Link
Read our latest news today.
a · #2568B4
Corner radius
- 50% · 10×
- 2px · 8×
- 3px · 7×
- 1rem · 1×
- 2rem · 1×
- 4px · 1×
Shadows
- -20px 0 50px rgba(0,0,0,.8)
- 0 0 40px rgba(15,28,96,.2)
- 0 0 20px rgba(0,0,0,.15)
- rgba(0,0,0,.2) 0px 0px 20px
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
480
640
720
768
992
1056
1088
1200
On a scale of 0 to 1440 px.
Content widths (max-width)
1600 px
992 px
400 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 71 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 ndr.de use?
- ndr.de’s website uses four typefaces: NDRSansBlack (headings), self-hosted; NDRSansRegular (body text), self-hosted; NDRSansCondRegular, self-hosted; NDRSansCondBlack, self-hosted.
- What are ndr.de’s brand colours?
- The main colours on ndr.de are Deep Royal Blue (#0E57AB), Light Steel Blue (#1379ED), Midnight Blue (#0D1754), Red (#E62600), Dodger Blue (#479DFF) and Deep Sky Blue (#00B0DE).
- What colour is ndr.de’s text and background?
- Body text is #333333 on a #FFFFFF background.
- Where is ndr.de’s logo from?
- The logo shown in this guide was found on ndr.de’s homepage. For official logo files and usage rules, check ndr.de’s own brand or press page.
- Is this ndr.de’s official style guide?
- No. SiteStyleGuide made it from ndr.de’s public web pages on 30 October 2026, and isn’t affiliated with ndr.de. 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
ndr-de-tokens.css
/* ndr.de design tokens, from SiteStyleGuide (https://sitestyleguide.com/ndr.de) */
:root {
/* Colours */
--text: #333333;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-charcoal: #333333;
--colour-off-white: #E2E2E2;
--colour-near-black: #222222;
--colour-deep-royal-blue: #0E57AB;
--colour-light-steel-blue: #1379ED;
--colour-midnight-blue: #0D1754;
--colour-red: #E62600;
--colour-dodger-blue: #479DFF;
--colour-deep-sky-blue: #00B0DE;
--colour-light-royal-blue: #2568B4;
--colour-forest-green: #019D48;
--colour-cadet-blue: #3AB0C1;
--colour-orange-red: #FF6600;
--colour-deep-steel-blue: #0277BF;
--colour-dark-khaki: #E5C671;
--gradient-1: linear-gradient(90deg, rgb(108, 108, 108) 0%, rgba(0, 0, 0, 0) 60%);
--gradient-2: linear-gradient(260deg, rgb(108, 108, 108) 0%, rgba(0, 0, 0, 0) 60%);
--gradient-3: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
/* Typefaces */
--font-headings: 'NDRSansBlack', sans-serif;
--font-body: 'NDRSansRegular', sans-serif;
--font-buttons: 'NDRSansRegular', sans-serif;
/* Type scale */
--text-h1: 2.0625rem;
--leading-h1: 1.09;
--text-h2: 1.875rem;
--leading-h2: 1.07;
--text-h3: 1.5rem;
--leading-h3: 1.33;
--text-h4: 1.3125rem;
--leading-h4: 1.33;
--text-h5: 1.0625rem;
--leading-h5: 1.41;
--text-h6: .9375rem;
--leading-h6: 1.33;
--text-p: .75rem;
--leading-p: 1.5;
--text-button: 1.3rem;
--leading-button: 2.8rem;
--text-a: 1rem;
--leading-a: 1.8rem;
/* Shape */
--radius-1: 50%;
--radius-2: 2px;
--radius-3: 3px;
--radius-4: 1rem;
--radius-5: 2rem;
--radius-6: 4px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 480px;
--breakpoint-2: 640px;
--breakpoint-3: 720px;
--breakpoint-4: 768px;
--breakpoint-5: 992px;
--breakpoint-6: 1056px;
--breakpoint-7: 1088px;
--breakpoint-8: 1200px;
--max-width-1: 1600px;
--max-width-2: 992px;
--max-width-3: 400px;
}
{
"site": "ndr.de",
"source": "https://sitestyleguide.com/ndr.de",
"text": "#333333",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Charcoal",
"hex": "#333333",
"rgb": [
51,
51,
51
]
},
{
"name": "Off White",
"hex": "#E2E2E2",
"rgb": [
226,
226,
226
]
},
{
"name": "Near Black",
"hex": "#222222",
"rgb": [
34,
34,
34
]
},
{
"name": "Deep Royal Blue",
"hex": "#0E57AB",
"rgb": [
14,
87,
171
]
},
{
"name": "Light Steel Blue",
"hex": "#1379ED",
"rgb": [
19,
121,
237
]
},
{
"name": "Midnight Blue",
"hex": "#0D1754",
"rgb": [
13,
23,
84
]
},
{
"name": "Red",
"hex": "#E62600",
"rgb": [
230,
38,
0
]
},
{
"name": "Dodger Blue",
"hex": "#479DFF",
"rgb": [
71,
157,
255
]
},
{
"name": "Deep Sky Blue",
"hex": "#00B0DE",
"rgb": [
0,
176,
222
]
},
{
"name": "Light Royal Blue",
"hex": "#2568B4",
"rgb": [
37,
104,
180
]
},
{
"name": "Forest Green",
"hex": "#019D48",
"rgb": [
1,
157,
72
]
},
{
"name": "Cadet Blue",
"hex": "#3AB0C1",
"rgb": [
58,
176,
193
]
},
{
"name": "Orange Red",
"hex": "#FF6600",
"rgb": [
255,
102,
0
]
},
{
"name": "Deep Steel Blue",
"hex": "#0277BF",
"rgb": [
2,
119,
191
]
},
{
"name": "Dark Khaki",
"hex": "#E5C671",
"rgb": [
229,
198,
113
]
}
],
"fonts": [
{
"name": "NDRSansBlack",
"stack": "\"NDRSansBlack\", sans-serif",
"weights": [
400,
700
],
"source": "Self-hosted"
},
{
"name": "NDRSansRegular",
"stack": "\"NDRSansRegular\", sans-serif",
"weights": [
400,
700
],
"source": "Self-hosted"
},
{
"name": "NDRSansCondRegular",
"stack": "\"NDRSansCondRegular\", sans-serif",
"weights": [
400
],
"source": "Self-hosted"
},
{
"name": "NDRSansCondBlack",
"stack": "\"NDRSansCondBlack\", \"Roboto Condensed\", \"HelveticaNeue-CondensedBold\", Impact, sans-serif",
"weights": [
400
],
"source": "Self-hosted"
},
{
"name": "ArnhemPro",
"stack": "\"ArnhemPro\", serif",
"weights": [
400,
700
],
"source": "Self-hosted"
},
{
"name": "NDRSansCondBold",
"stack": "\"NDRSansCondBold\", sans-serif",
"weights": [
400
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run ndr.de?
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/ndr.de" title="ndr.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>
Similar colours
Websites whose lead colour is closest to ndr.de’s
Captured from ndr.de on 30 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by ndr.de; this guide describes the public website for reference.