diff --git a/src/css/base/header.css b/src/css/base/header.css
index 70b1af3410b..cb4fba2a014 100644
--- a/src/css/base/header.css
+++ b/src/css/base/header.css
@@ -67,6 +67,10 @@
@media (--up_to_M) {
margin-bottom: var(--space-s);
+
+ & #navItemMedia {
+ display: none;
+ }
}
@media (--up_to_L) {
margin-top: var(--space-m);
diff --git a/src/css/main.css b/src/css/main.css
index 06c95fad53a..afc8fa4caa3 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -10,4 +10,5 @@
@import 'sections/home.css';
@import 'sections/podcast.css';
@import 'sections/team.css';
+@import 'sections/media.css';
@import 'sections/soundboard.css';
diff --git a/src/css/sections/media.css b/src/css/sections/media.css
new file mode 100644
index 00000000000..f073bc01994
--- /dev/null
+++ b/src/css/sections/media.css
@@ -0,0 +1,61 @@
+#media {
+ & .logo {
+ display: inline-block;
+ margin: var(--space-m) 0 var(--space-xl);
+ max-width: 100%;
+
+ & img {
+ width: 100%;
+ }
+ }
+
+ & .logo-square {
+ width: 9em;
+ }
+
+ & .logo-horizontal {
+ width: 21em;
+ }
+
+ & .font {
+ display: block;
+ margin: var(--space-m) 0;
+ font-size: var(--font-size-l);
+ color: inherit;
+
+ &:last-of-type {
+ margin-bottom: var(--space-xxl);
+ }
+ }
+
+ & .colors {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0;
+ list-style: none;
+ color: #FFF;
+ font-weight: var(--font-weight-bold);
+
+ & li {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 6em;
+ height: 6em;
+ border-radius: 50%;
+ margin: 0 1em 1em 0;
+ }
+
+ & .orange {
+ background: var(--color-accent);
+ }
+
+ & .derweg {
+ background: var(--color-derweg);
+ }
+
+ & .interview {
+ background: var(--color-interview);
+ }
+ }
+}
diff --git a/src/includes/template.pug b/src/includes/template.pug
index 5e61a30b24c..7368e56e857 100644
--- a/src/includes/template.pug
+++ b/src/includes/template.pug
@@ -57,6 +57,7 @@ html(lang="en")
a.navItem(href="/podcast/" class=(navCurrent === 'podcast' && 'current')) Podcast
a.navItem(href="/soundboard/" class=(navCurrent === 'soundboard' && 'current')) Sounds
a.navItem(href="/team/" class=(navCurrent === 'team' && 'current')) Team
+ a.navItem#navItemMedia(href="/media/" class=(navCurrent === 'media' && 'current')) Media
//- a.navItem(href=site.meta.shopUrl target="_blank") Shop
button(type="button").theme
+sprite("theme")
diff --git a/src/media.pug b/src/media.pug
new file mode 100644
index 00000000000..1ce3c1355e2
--- /dev/null
+++ b/src/media.pug
@@ -0,0 +1,33 @@
+extends /template.pug
+
+block vars
+ - const title = 'Media'
+ - const description = 'Damit wir mal groß und berühmt werden, kannst du dieses Media Kit gerne nutzen, um allen von uns zu erzählen.'
+
+block main
+ #media.wrap
+ section
+ h1= title
+
+ h2 Logo quadratisch
+
+ a.logo.logo-square(href=assetPath("/img/einundzwanzig-square.svg") target="_blank")
+ img(src=assetPath("/img/einundzwanzig-square.svg") alt="Logo quadratisch")
+
+ h2 Logo horizontal
+
+ a.logo.logo-horizontal(href=assetPath("/img/einundzwanzig-horizontal.svg") target="_blank")
+ img(src=assetPath("/img/einundzwanzig-horizontal.svg") alt="Logo horizontal")
+
+ h2 Schriften
+
+ a.font.font-bold(href="https://www.dafont.com/the-bold-font.font" target="_blank") Logo: The Bold Font
+
+ a.font.font-inconsolata(href="https://fonts.google.com/specimen/Inconsolata" target="_blank") Copy: Inconsolata
+
+ h2 Farben
+
+ ul.colors
+ li.orange #F7931A
+ li.derweg #00B4CF
+ li.interview #151515
diff --git a/static/img/einundzwanzig-horizontal.svg b/static/img/einundzwanzig-horizontal.svg
new file mode 100644
index 00000000000..31adfcb5830
--- /dev/null
+++ b/static/img/einundzwanzig-horizontal.svg
@@ -0,0 +1 @@
+
diff --git a/static/img/einundzwanzig-square.svg b/static/img/einundzwanzig-square.svg
index abff7b27119..17bb3b1d146 100644
--- a/static/img/einundzwanzig-square.svg
+++ b/static/img/einundzwanzig-square.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/tasks/generate_pages.js b/tasks/generate_pages.js
index 43470bac6b2..3e6c57beccd 100644
--- a/tasks/generate_pages.js
+++ b/tasks/generate_pages.js
@@ -24,6 +24,7 @@ const renderPage = (template, out, data = {}) => {
renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0] })
renderPage('podcast', 'podcast', { navCurrent: 'podcast', episodes: [...episodes] })
renderPage('team', 'team', { navCurrent: 'team', team, crew })
+renderPage('media', 'media', { navCurrent: 'media' })
renderPage('soundboard', 'soundboard', { navCurrent: 'soundboard', soundboard })
renderPage('category', 'podcast/news', { navCurrent: 'podcast', category: 'news', categoryName: 'News', episodes: episodes.filter(e => e.category === 'news') })