Das HWS-Leitbild
© Lukas Schramm
Als evangelisches Immobilienunternehmen steht unsere Arbeit im Zeichen der Nächstenliebe. Wir wollen bezahlbaren Wohnraum bieten – auch für sozial Schwächere. Im Mittelpunkt ist immer der Mensch und sein Bedürfnis nach Sicherheit und Gesellschaft. Dieser Grundsatz ist auch im Kollegium spürbar und soll sich auch im Corporate Design wiederfinden.
Logo
Elemente
Das Logo besteht aus zwei Elementen: der Bildmarke und der Wortmarke. Diese Festlegung darf nicht verändert werden. Alle Logovarianten stehen auf der rechten Seite zum Download zur Verfügung.
Auf weißen Flächen wird das Logo ausschließlich in Blau oder Schwarz gesetzt, auf Farbflächen oder Fotos wird es in Weiß verwendet.
Anwendung Bildmarke
Die Bildmarke ist die verkürzte Logovariante und kann eingesetzt werden, wenn die HWS bereits als Absender bekannt ist – beispielsweise auf Social Media oder bei internen Newslettern sowie auf Rückseiten von Werbemitteln als Absender.
Don’ts
Das HWS-Logo wird niemals in Bereichs- oder andere Farben eingefärbt, nicht verzerrt oder umgestellt und es werden keine Transparenzen oder Effekte verwendet.
Platzierung Print
Das Logo der HWS wird auf allen Print-Werbemitteln rechts oben oder rechts unten innerhalb vom Satzspiegel platziert. Das gilt auch, wenn nur die Bildmarke verwendet wird.
Platzierung Digital
Bei digitalen Werbemitteln sind Größe und Stand vom Logo und der Bildmarke in den Templates festgelegt.
Icons
Elemente
Die HWS-Icons symbolisieren die jeweiligen thematischen Bereiche der HWS (Wohnen, Soziales, etc.) und werden entsprechend eingesetzt. Sie können in HWS-Blau, der jeweiligen Bereichsfarbe, Schwarz (nur in Schwarz-/Weißdarstellungen) oder Weiß gesetzt werden.
Anwendungsbeispiele
Die HWS-Icons können als Rahmen für Fotos oder Freisteller verwendet werden und bieten damit die visuelle Bühne für die Gestaltung. Sie werden bevorzugt in den Anschnitt des Layouts gesetzt – die Form des Icons muss erkennbar bleiben.
Weiterhin ist es möglich, auf einer Bereichsfarbe das entsprechende Icon im HWS-Blau abzubilden. Dabei ist zu beachten, dass die Farbkombinationen insbesondere bei kleinen Darstellungen nicht „flimmern“.
Die Icons können auch in demselben Farbton, dem der Bereichsfarbe, mit einer Transparenz abgebildet werden. Dafür wird das weiße Icon, Deckkraft auf 15 % eingestellt, genutzt.
Sie können aber auch für sich alleinstehend auf Weiß, hinter Texten oder dezent im Hintergrund mit 15 % Farbauftrag im HWS-Blau oder der jeweiligen Bereichsfarbe gesetzt werden.
Don’ts
Kein Umfärben oder Verzerren der Icons, keine Transparenzen oder Effekte.
Schrift
Anwendung Typografie
Die neue HWS-Schrift ist die NOTO SANS. Sie ist elegant, leicht und modern – und weltweit einsetzbar. Denn Google hat die Schriftart so entwickelt, dass sie für jede Sprache genutzt werden kann. Mit dieser Grundphilosophie passt sie perfekt zur offenen und menschlichen Grundhaltung der HWS.
Es wird generell der Schriftschnitt Light verwendet.
Für Hervorhebungen kann der Schriftschnitt Medium oder Semibold verwendet werden. Auf keinen Fall darf die Schrift verzerrt oder kursiv dargestellt werden.
Headline lorem ipsum.
Subline dolor sit amet.
Copy 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.
hws-berlin.de
Anwendungshinweise
Die Headline und Subline werden immer in Versalien (Großbuchstaben) gesetzt und enden immer mit einem Satzzeichen. Die Copy wird in gemischter Schreibweise (Groß- und Kleinbuchstaben) geschrieben.
Der Text sitzt immer linksbündig. Die Headline läuft immer bis zum rechten Rand vom Satzspiegel. Dafür kann man die Schriftgröße nutzen und variieren, siehe Anwendungshinweise.
Die URL schließt an die Copy mit einem Umbruch an und wird immer einen Schriftschnitt fetter gesetzt, von Light auf Medium. Wenn ein QR-Code benutzt wird, kann die URL auch unter ihm stehen. Dabei darf aber nicht der Satzspiegel verlassen werden.
Steht die Copy (Schriftschnitt Light) auf einer Farbfläche oder einem Foto und wirkt unleserlich, wird in diesem Fall der Schriftschnitt Regular angewendet. Die Lesbarkeit muss gewährleistet sein.
Das betrifft nicht die Head- und Subline.
Farben
Anwendungshinweise
Die HWS Corporate Farben sind maßgeblich für den visuellen Auftritt der HWS.
HWS-Blau als Primärfarbe wird für das Logo, die Typografie (Head- und Sublines, Hervorhebungen) und Icons verwendet sowie bei allen übergreifenden Themen der HWS.
Sekundärfarben (bunt) symbolisieren die jeweiligen thematischen Bereiche der HWS (Wohnen, Soziales, etc.) und werden entsprechend eingesetzt als Icon, Farbfläche oder innerhalb von Grafiken.
Sekundärfarben (gedeckt) spiegeln die Bereichsfarben wider und werden für Grafiken oder Illustrationen verwendet.
Akzentfarben sind Farben, die die HWS für die Raumgestaltung nutzt. Sie können auch als Akzentfarben für Grafiken oder Illustrationen verwendet werden.
Farbtabelle
Primärfarbe
HWS-Blau
HWS-Blau
CMYK 55/24/0/9
RGB 117/160/206
HEX #75a0ce
Sekundärfarben
bunt
Wohnen
CMYK 0/60/100/0
RGB 239/125/0
HEX #ef7d00
Soziales
CMYK 0/80/40/0
RGB 234/81/109
HEX #ea516c
Nachhaltigkeit & Forst
CMYK 90/40/100/0
RGB 25/118/58
HEX #187539
Innovation
CMYK 100/41/35/20
RGB 0/98/125
HEX #00627d
Mitarbeiter
CMYK 0/100/100/10
RGB 210/10/16
HEX #d10a10
Kooperationen
CMYK 0/26/100/0
RGB 253/193/0
HEX #fcc100
Sekundärfarben
gedeckt
Wohnen
CMYK 4/59/61/0
RGB 234/130/97
HEX #ea8261
Soziales
CMYK 12/52/43/0
RGB 222/144/133
HEX #de9084
Nachhaltigkeit & Forst
CMYK 59/36/62/22
RGB 107/122/95
HEX #6a795f
Innovation
CMYK 62/41/35/19
RGB 101/120/132
HEX #647783
Mitarbeiter
CMYK 0/85/70/20
RGB 197/58/55
HEX #c43a37
Kooperationen
CMYK 0/25/60/0
RGB 252/201/120
HEX #fcc977
Akzentfarben
Raumgestaltung
Hellblau
CMYK 24/7/8/0
RGB 204/222/231
HEX #cbdde7
Lindgrün
CMYK 21/7/25/0
RGB 212/221/201
HEX #d4ddc9
Beige
CMYK 13/38/46/0
RGB 224/171/140
HEX #dfab8b
Braun
CMYK 40/77/74/62
RGB 88/43/33
HEX #572b20
Hellgrau
CMYK 16/13/16/0
RGB 221/218/213
HEX #ddd9d5
Mittelgrau
CMYK 27/21/26/0
RGB 198/195/187
HEX #c6c2bb
Kaltgrau
CMYK 31/23/24/0
RGB 189/189/189
HEX #bcbcbc
Bildsprache
Tonalität
Im Sinne des Unternehmenskerns werden sowohl die Gebäude der HWS abgebildet als auch die Menschen, die darin leben. Wir zeigen eine diverse Bandbreite von Menschen im Alltag und bei Aktivitäten rund um das Thema Wohnen, immer menschlich und immer ungestellt.
In den Bildern sollen natürliche Farben dominieren. Alle Bilder sollen eine möglichst helle und aufgeräumte Grundstimmung vermitteln und so luftig und leicht wirken.
Anwendung
Menschen:
Der Mensch steht im Mittelpunkt des Motivs, in einer dynamisch pointierten Situation oder Handlung. Die Fotos sollten als authentische Momentaufnahmen verstanden werden und aus dem Leben gegriffen sein. Sie sollen eine Realität abbilden, die erlebbar erscheint und nicht werbewirksam überzeichnet.
Die Menschen können formatfüllend eingesetzt werden oder stehen als Freisteller im Layout, immer in Bezug zu dem Icon oder dem Format. Dabei wird mit den Größenverhältnissen spielerisch umgegangen. Das heißt, dass sie nicht zwingend realistisch sein müssen. Sie können das Icon anschneiden, lehnen sich dort an oder sie stehen z. B. auf dem Rand des Formates oder eines Infokastens.
Architektur:
Hier werden die Bilder im Stil des Fotografen Lukas Schramm (lukas-schramm.com) verwendet. Sie können auch in die HWS-Icons formatfüllend eingesetzt werden.
Dont’s
Es werden keine gestellten Bilder verwendet oder für die Kamera posiert. Einfarbige Hintergründe dürfen nur in der Bereichsfarben sein. Die Bilder dürfen nicht verzerrt/künstlich bearbeitet, die Farbigkeit nicht überdreht werden.
Layout-Aufbau
Gestaltungsprinzip
Das Layoutsystem basiert auf einem quadratischen Gestaltungsraster, mit dessen Hilfe das Logo, Texte und Bilder platziert werden. Es legt die Größen, Abstände und Positionen fest.
Alle hier aufgeführten Formate haben definierte Einsatzprinzipien für die Logogröße, Farbangaben und Schriftarten und gelten für alle Anwendungen. Die entsprechenden Templates stehen hier zur Verfügung.
Falls ein Format abweicht, muss es auf die gewünschte Größe übertragen oder adaptiert werden.
Definitionen
Die DIN A4-Plakate/Hausaushänge haben ein Gestaltungsraster von 8 mm. Eine Rastereinheit beträgt demzufolge die Größe von 8 x 8 mm.
Der Satzspiegel beginnt mit einem umlaufenden Abstand von 2 Rastereinheiten. Falls das Raster in der Höhe nicht aufgeht, wird der Wert nur am unteren Rand des Formats aufgerundet.
Hier in der Tabelle sind die wichtigsten Definitionen festgehalten, die für die Gestaltung entscheidend sind.
| Plakate | Schrift-schnitt | Schreib-weise | Schrift-größe | Zeilen-abstand | Farbe | Raster-einheit | Logohöhe |
|---|---|---|---|---|---|---|---|
| Headline | Light | Versalien ** | Satzspiegel füllend | 120 % (autom.) | Schwarz, HWS-Blau o. Weiß | – | – |
| Subline | Light | Versalien | mind. doppelte Copygröße | 120 % (autom.) | analog Headline | – | – |
| Copy | Light | Groß/Klein *** | 12 pt | 17 pt | Schwarz o. Weiß | – | – |
| URL | Medium | Groß/Klein | 12 pt | 17 pt | analog Copy | – | – |
| Auszeichnung* | Medium | Groß/Klein | 12 pt | 17 pt | Schwarz, HWS-Blau o. Weiß | – | – |
| Raster | – | – | – | – | – | 8 RE **** | – |
| Logo | – | – | – | – | – | – | 16 mm (2 RE) |
* Hervorhebungen / ** Großbuchstaben / *** Gemischte Schreibweise / **** Rastereinheit
Aufbau
- eine Rastereinheit (RE) beträgt beim DIN A4-Plakat 8 mm
- der Satzspiegel beträgt 2 RE
- die Headline geht bis an den Rand vom Satzspiegel, Textgröße ergibt sich dabei durch die Textmenge
- die Subline ist mindestens doppelt so groß wie die Copy
- die Copy läuft bis an den Rand vom Satzspiegel, kurze Copys können bei besonderen Gestaltungen (siehe Anwendungsbeispiele) auch als kleiner Copyblock frei gesetzt werden
- Hervorhebungen in der Copy in Medium und, wenn gewollt, im HWS-Blau
- zweispaltige Copy hat 1 RE als Spaltenabstand zueinander
- URL sitzt am Ende der Copy in einer separaten Zeile
- das Logo kann rechts oben oder rechts unten am Satzspiegel gesetzt werden und ist immer 2 RE hoch
Die DIN lang-Flyer (98 x 210 mm) haben ein Gestaltungsraster von 5,5 mm. Eine Rastereinheit beträgt demzufolge die Größe von 5,5 x 5,5 mm.
Der Satzspiegel beginnt mit einem umlaufenden Abstand von 2 Rastereinheiten. Falls das Raster in der Höhe nicht aufgeht, wird der Wert nur am unteren Rand des Formats aufgerundet.
Die wichtigsten Definitionen für die Gestaltung sind in der Tabelle festgehalten.
| Flyer | Schrift-schnitt | Schreib-weise | Schrift-größe | Zeilen-abstand | Farbe | Raster-einheit | Logohöhe |
|---|---|---|---|---|---|---|---|
| Headline | Light | Versalien ** | Satzspiegel füllend | 120 % (autom.) | Schwarz, HWS-Blau o. Weiß | – | – |
| Subline | Light | Versalien | sichtbar größer als Copygröße | 120 % (autom.) | analog Headline | – | – |
| Copy | Light | Groß/Klein *** | 9 pt | 13 pt | Schwarz o. Weiß | – | – |
| URL | Medium | Groß/Klein | 9 pt | 13 pt | analog Copy | – | – |
| Auszeichnung* | Medium | Groß/Klein | 9 pt | 13 pt | Schwarz, HWS-Blau o. Weiß | – | – |
| Raster | – | – | – | – | – | 5,5 RE **** | – |
| Logo | – | – | – | – | – | – | 11 mm (2 RE) |
* Hervorhebungen / ** Großbuchstaben / *** Gemischte Schreibweise / **** Rastereinheit
Aufbau
- eine Rastereinheit (RE) beträgt beim DIN lang Flyer 5,5 mm
- der Satzspiegel beträgt 2 RE
- die Headlines gehen, wenn möglich, bis an den Rand vom Satzspiegel, Textgröße ergibt sich dabei durch die Textmenge
- die Icons können zum gestalten eingesetzt werden, bei Transparenzen beträgt die Deckkraft 15 %
- das Logo kann rechts oben oder rechts unten am Satzspiegel gesetzt werden und ist immer 2 RE hoch
- die Sublines sind mindestens doppelt so groß wie die Copy
- Hervorhebungen in der Copy in Medium und, wenn gewollt, im HWS-Blau
- der Tabellenaufbau ist unter TABELLEN/GRAFIKEN beschrieben
- steht die Copy auf einem Foto oder auf einer Farbfläche wird der Schriftschnitt Regular verwendet
Die Postkarte hat ein Gestaltungsraster von 5,5 mm. Eine Rastereinheit beträgt demzufolge die Größe von 5,5 x 5,5 mm.
Der Satzspiegel beginnt mit einem umlaufenden Abstand von 2 Rastereinheiten. Falls das Raster in der Höhe nicht aufgeht, wird der Wert nur am unteren Rand des Formats aufgerundet.
Die wichtigsten Definitionen für die Gestaltung sind in der Tabelle festgehalten.
| Postkarte | Schrift-schnitt | Schreib-weise | Schrift-größe | Zeilen-abstand | Farbe | Raster-einheit | Logohöhe |
|---|---|---|---|---|---|---|---|
| Headline | Light | Versalien ** | Satzspiegel füllend | 120 % (autom.) | Schwarz, HWS-Blau o. Weiß | – | – |
| Subline | Light | Versalien | sichtbar größer als Copygröße | 120 % (autom.) | analog Headline | – | – |
| Copy | Light | Groß/Klein *** | 9 pt | 13 pt | Schwarz o. Weiß | – | – |
| URL | Medium | Groß/Klein | 9 pt | 13 pt | analog Copy | – | – |
| Auszeichnung* | Medium | Groß/Klein | 9 pt | 13 pt | Schwarz, HWS-Blau o. Weiß | – | – |
| Raster | – | – | – | – | – | 5,5 RE **** | – |
| Logo | – | – | – | – | – | – | 11 mm (2 RE) |
* Hervorhebungen / ** Großbuchstaben / *** Gemischte Schreibweise / **** Rastereinheit
Aufbau
- eine Rastereinheit (RE) beträgt bei der Postkarte 5,5 mm
- Satzspiegel beträgt 1,5 RE
- die Headlines gehen, wenn möglich, bis an den Rand vom Satzspiegel, Textgröße ergibt sich dabei durch die Textmenge
- das Logo kann rechts oben oder rechts unten am Satzspiegel gesetzt werden und ist immer 2 RE hoch
- die Sublines sind mindestens doppelt so groß wie die Copy
- Hervorhebungen in der Copy in Medium und, wenn gewollt, im HWS-Blau
- die URL sitzt am Ende der Copy in einer separaten Zeile
- die Icons können zum gestalten eingesetzt werden, bei Transparenzen beträgt die Deckkraft 15 %
Die DIN A4 Broschüre hat ein Gestaltungsraster von 8 mm. Eine Rastereinheit beträgt demzufolge die Größe von 8 x 8 mm.
Der Satzspiegel beginnt mit einem umlaufenden Abstand von 2 Rastereinheiten. Falls das Raster in der Höhe nicht aufgeht, wird der Wert nur am unteren Rand des Formats aufgerundet.
Die wichtigsten Definitionen für die Gestaltung sind in der Tabelle festgehalten.
| Broschüre | Schrift-schnitt | Schreib-weise | Schrift-größe | Zeilen-abstand | Farbe | Raster-Einheiten | Logohöhe |
|---|---|---|---|---|---|---|---|
| Headline | Light | Versalien ** | Satzspiegel füllend | 120 % (autom.) | Schwarz, HWS-Blau o. Weiß | – | – |
| Subline | Light | Versalien | sichtbar größer als Copygröße | 120 % (autom.) | analog Headline | – | – |
| Copy | Light | Groß/Klein *** | 9 pt | 13 pt | Schwarz o. Weiß | – | – |
| URL | Medium | Groß/Klein | 9 pt | 13 pt | analog Copy | – | – |
| Auszeichnung* | Medium | Groß/Klein | 9 pt | 13 pt | Schwarz, HWS-Blau o. Weiß | – | – |
| Raster | – | – | – | – | – | 8 RE **** | – |
| Logo | – | – | – | – | – | – | 16 mm (2 RE) |
* Hervorhebungen / ** Großbuchstaben / *** Gemischte Schreibweise / **** Rastereinheit
Aufbau
- eine Rastereinheit (RE) beträgt bei der Broschüre 8 mm
- der Satzspiegel beträgt 2 RE
- die Headlines gehen, wenn möglich, bis an den Rand vom Satzspiegel, Textgröße ergibt sich dabei durch die Textmenge
- die Icons können zum gestalten eingesetzt werden, bei Transparenzen beträgt die Deckkraft 15 %
- das Logo kann rechts oben oder rechts unten am Satzspiegel gesetzt werden und ist immer 2 RE hoch
- der Spaltenabstand in der Copy beträgt 1 RE
- steht die Copy auf einem Foto oder auf einer Farbfläche wird der Schriftschnitt Regular verwendet
- der Tabellenaufbau ist unter TABELLEN/GRAFIKEN beschrieben
Tabellen
Tabellen werden in HWS-Blau, Schwarz und Weiß gestaltet. Der Tabellenkopf hat eine weiße oder HWS-blaue Füllung (15 % oder 100 %). Falls Blau nicht passend ist, darf stattdessen ein Grauton (15 % Schwarz) verwendet werden.
Vertikale Trennlinien sind immer Weiß. Farbige Flächen werden auch horizontal mit weißen Trennlinien unterteilt.
Die Schriftgröße sollte bevorzugt der Copytextgröße entsprechen, beträgt jedoch mindestens 8 Pt.
Die Tabellen stehen zum Download zur Verfügung.
Download
Grafiken
Die Schriftgröße entspricht der Copytextgröße, beträgt jedoch mindestens 8 Pt. Die Größe der Zahlen kann flexibel gestaltet werden.
Das gesamte Farbspektrum der bunten und gedeckten HWS-Bereichsfarben kann verwendet werden.
Die Grafiken wurden in Adobe Illustrator erstellt und stehen zum Download zur Verfügung.
Anforderungen
Definition, Anordnung und Größenverhältnisse der einzelnen Gestaltungselemente sind in den Vorlagen angelegt.
- Für Social Media wird hauptsächlich die bunte Farbpalette verwendet.
- Stehen Icons auf einer Farbfläche, wird ihre Deckkraft auf 15 % reduziert.
- Für hervorgehobenen Text wird der Schriftschnitt SemiBold anstelle von Bold verwendet.
Templates
Übersicht
Für einen schnellen Zugriff stellen wir hier einige Templates zur Verfügung. Sie wurden mit der aktuellen Version von Adobe InDesign, PowerPoint und Canva erstellt.
Hinweis: Die in den Templates genutzten Bilder dienen der Veranschaulichung und sind Platzhalter. Sie sind nicht reingezeichnet und dürfen nicht weiter verwendet werden.
Kontakt
CD-VERANTWORTLICH
Für Fragen zum Corporate Design stehen wir gerne zur Verfügung:
i. A. Fabian Mayer
Stabsstellenleiter
Personal & Unternehmenskommunikation
Telefon: 030 816003-43
E-Mail: mayer@hws-berlin.de
.
© 2025 Hilfswerk-Siedlung GmbH | Impressum | Datenschutz