Web Visuals Styleguide 2022

How to move from individual styles
to a consistent look-and-feel

01.02.2022

One of the top principles of good UX is to keep the interface consistent. CORRECTIV’s design utilizes a grid, white space, and a typographic system to create a comfortable, yet beautiful reading experience. CORRECTIV’s design is simple, but attractive. It serves trustbuilding. The thoughtful typography system, spacing, and consistence makes it easy for users to read and to understand.

Fonts

Source Sans Pro (400, 600, 700)

Merriweather, only for editorial text, not for social media or anything else (400, 700, 900)

Bebas neue, allowed in top stories (400)

✅ Do

Default Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Page Leadin
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Editorial
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H1 Headline (size variable)

H2 Headline

H3 Headline

Links

.underline p a {border-bottom: 1px solid #ff5064; color:#333333}

.underline p a {border-bottom: 1px solid #333333; color:#333333}

.underline p a {color:#ff5064}

.underline p a {border-bottom: 1px solid #FFFFFF4A; color:#FFF}

Accordion

Wie setzt CORRECTIV meinen Beitrag ein?

Ihre Spenden fließen direkt in die Arbeit unserer Journalistinnen und Journalisten, in ihre aufwändigen Recherchen und die Publikation für die Öffentlichkeit. Sie ermöglichen, dass unsere Reporter und Reporterinnen tiefgründig recherchieren, sich gegen Falschmeldungen stark machen und ihr Wissen weiter vermitteln können.

Wie wir Ihre Spende einsetzen und was sie bewirkt, können Sie als Unterstützerin oder Unterstützer in unseren regelmäßigen Transparenzberichten nachvollziehen.

Sie bezahlen bei uns keinen Verlag, keinen riesigen Verwaltungsapparat und keine Investoren, die Renditen erwarten. Sie unterstützen investigativen Journalismus.

Kann ich für ein bestimmtes Projekt spenden?

Wir freuen uns über jede Spende und garantieren, dass diese ausschließlich zur Erfüllung unserer Ziele verwendet wird. Sollten Sie Ihre Spende einem ganz bestimmten Projekt zukommen lassen, werden wir uns bemühen, sie auch genau so zu verwenden. Leider können wir die Zweckbindung Ihrer Spende jedoch nicht gewährleisten. Dies würde für uns einen hohen Verwaltungsaufwand bedeuten. Die Personalkosten für eine solche Verwaltung investieren wir lieber in unseren Journalismus. Wir bitten um Ihr Verständnis.

Kann ich meine Spendendaten verwalten?

Selbstverständlich können Sie Ihre persönlichen Daten, Ihre Zahlungsart und die Höhe Ihrer finanziellen Unterstützung ändern. Nutzen Sie dazu gern das Formular im Community-Login oder kontaktieren Sie uns per E-Mail.

Sie können Ihre regelmäßige Unterstützung jederzeit ohne Angabe von Gründen beenden. Senden Sie uns dafür eine E-Mail, um Ihre Lastschrift zu widerrufen. Sie können auch bei Paypal Ihre Zahlungen an CORRECTIV stornieren.

Wann bekomme ich meine Spendenquittung?

Sie erhalten von uns unaufgefordert im Laufe des März eine Zuwendungsbestätigung für Ihre im Vorjahr getätigten Spenden. Wünschen Sie bereits vorher einen Beleg für Ihre Beiträge, kontaktieren Sie uns gerne per E-Mail.

Weitere FAQ

Warum ist gemeinnütziger Journalismus wichtig? Wie stellt ihr eure Unabhängigkeit sicher? Wie finanziert sich CORRECTIV? Diese un viele weitere Fragen beantworten wir in unseren FAQ.
Zu den FAQ

Human Ressources Manager/in
CORRECTIV, Teilzeit/30Std, Berlin

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Community Engagement Manager/in (Membership)
CORRECTIV, Vollzeit/Teilzeit, Berlin

Community Engagement Manager/in (Fokus Fundraising)
CORRECTIV, Vollzeit/Teilzeit, Berlin

(Junior) Produktmanager/in
CORRECTIV, Vollzeit, Berlin

⛔️ Don’t

HEADLINE

Headline

Colors & Contrast

#333333 (primary)

#707070 (secondary)

#F8F8F8 (background)

#E9ECEF (light background color)

#E6F3F2 (light background color)

#F9EBDF (light background color)

#FF5064 (strong background highlight)

#E6E6E6 (thin lines)

✅ Do

Black font on white background. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Black font on white background with box shadow. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Black font on lightgray background. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

White font on black background. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

White font on red background. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

⛔️ Don’t

Red font on black background. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Red font on lightgray background. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

White Merriweather font on red background. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Black font on red background. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

No thick borders. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Mehr laden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Mehr laden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Charts

✅ Do

Use datawrapper
Choose a harmonious, color-blind friendly palette (https://blog.datawrapper.de/colorguide/)
Present data in an easily-understandable format
Opt for long instead of wide charts (i.e. horizontal bars instead of vertical)
Create mobile-friendly graphics (it’s easier to go from mobile to desktop than vice versa)
Only show data when it’s meaningful. Sometimes, you’re better off just writing a sentence than showing a whole map

⛔️ Don’t

Icons

Design on purpose
Icons must have a clear purpose. Before you even think about icons, you need to ask yourself: why? If your answer is „because they’re pretty“, then you should think twice before steaming ahead. In a visually overcrowded digital world even the prettiest icons will soon lose their lustre without meaning or purpose.

Keep icons in their place
Icons will bring drab content to life, but they shouldn’t take on a life of their own. Instead they should play a supporting role. As a rule, they should never take centre stage. Size really matters: Balance form and function.

✅ Do

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

⛔️ Don’t

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Typography & Spacing

✅ Do

This is a really long headline and it looks
a bit weird so you should do a line break

⛔️ Don’t

This is a really long headline and it looks a bit because there is no line break

✅ Do

The larger the font,
the less the character spacing

⛔️ Don’t

The larger the font, the less the character spacing

✅ Do

Make sure the space between headline & text is harmonious

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

⛔️ Don’t

Make sure the space between headline & text is harmonious

✅ Do

Spacing below larger than spacing above
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link

⛔️ Don’t

Link

Logo

For web always use the logo in SVG format.