Styleguide

Corporate Design Manual, Brand Manual

Ein Styleguide dient dazu, Produkte, Dienstleistungen und die damit verbundene visuelle Kommunikation einer Firma/eines Brands konsistent zu gestalten. Er definiert klare Regeln für die „Anwendung“ des Brands. Der Styleguide hift also dabei, das Produkt- und Markenerlebnis vorzugeben und kontrollieren.
Style Guides kennt man überwiegend von Offline Projekten, wie Print oder Ähnliches. Aber auch in der Welt des Internets haben Style Guides durchaus ihre sinnvolle Berechtigung. Man nennt sie auch Website Style Guide. Ein Website Style Guide ist ein idealer Weg, um Markenidentität, Professionalität und ein einheitliches Erscheinungsbild deiner Website zu gewährleisten. Wer jetzt denkt, so ein Web Styleguide ist nur etwas für grosse Konzerne, der hat sich getäuscht. Auch für KMU macht es durchaus Sinn. Solltest du gerade jetzt darüber nachdenken, eine neue Website erstellen zu lassen, dann bist du bei einer Webdesign Agentur am besten aufgehoben. Achte aber darauf, dass deine Webdesign Agentur auch weiss, wie ein Web Styleguide auszusehen hat.

Farben

Farbpalette & Farbwerte

Die definierten Grundfarben des Corporate Designs von Foss & Haas sind jeweils in einer Abstufung vorhanden und sollten in voller Deckkraft genutzt werden.
Lediglich als Farbüberlagerung von Bildern können auch in Abstufungen von 90%, 60% oder 30% eingesetzt werden.

Die definierten Farbwerte sind in der nachfolgenden Tabelle zusammengefasst. Nur ein ausreichender Kontrast zwischen der Schriftfarbe und ihrer Hintergrundfarbe erfüllt die Anforderungen an ein barrierefreies Design. Grundsätzlich gilt es nur die hier aufgeführten Farben zu verwenden, der Einsatz von Schwarz und Weiß ist (maximal!) bei Hintergrundbildern möglich.

Delphinblau

#9CB0DB
RGB 152 | 177 | 221
CMYK 45 | 25 | 0 | 0
Pantone N4003

DELPHINBLAU HELL

#123565
RGB 217 | 224 | 242
CMYK 17 | 10 | 0 | 0
Pantone N4003

Universum

#33225F
RGB 51 | 34 | 95
CMYK 95 | 100 | 27 | 18
Pantone N4003

Universum HELL

#543F74
RGB 84 | 63 | 116
CMYK 76 | 80 | 22 | 14
Pantone N4003

Lippenstift

#C38FA
RGB 195 | 143 | 160
CMYK 27 | 50 | 25 | 0
Pantone N4003

Lippenstift Hell

##DFC5CE
RGB 223| 198 | 206
CMYK 12 | 25 | 12 | 2
Pantone N4003

Schamesröte

##E29083
RGB 231 | 92 | 80
CMYK 3 | 75 | 64 | 0
Pantone N4003

Schamesröte Hell

#F1C9BF
RGB 239 | 202 | 192
CMYK 5 | 26 | 22 | 0
Pantone N4003

Erdbeere

#E75B51
RGB 231 | 92 | 80
CMYK 3 | 75 | 64 | 0
Pantone N4003

Erdbeere Hell

#F4B2A2
RGB 243 | 177 | 161
CMYK 2 | 39 | 33 | 0
Pantone N4003

Vanillapeach

#FEEEDD
RGB 254 | 239 | 221
CMYK 0 | 8 | 15 | 0
Pantone N4003

Vanillapeach Hell

#FFF6EE
RGB 255 | 247 | 237
CMYK 0 | 4 | 8| 0
Pantone N4003

Sonnengelb

#FFCD02
RGB 255 | 228 | 0
CMYK 0 | 6 | 95 | 0
Pantone N4003

Sonnengelb Hell

#FFE59B
RGB 255 | 237 | 135
CMYK 0 | 4 | 57 | 0
Pantone N4003

Web-Typografie

Elido und Playfair in Kombination

Mit der durchgängigen Nutzung unserer Schriften im Sinne eines einheitlichen Erscheinungsbildes erzielen wir Kontinuität und Wiedererkennbarkeit des Markenbildes über alle Medien hinweg – sowohl intern als auch extern.

Playfair Display

Verwendung: Überschriften

Elido

Verwendung: Sublines, Lead, Fließtext, Bildunterschriften

The quick brown fox jumps over the lazy dog

Überschrift
html Tag <h2>
Schriftgröße: 40 px 
Schnitt: 700

The quick brown fox jumps over the lazy dog

Subline
Absatz <p>
Schriftgröße: 24 px 
Schnitt: 700

The quick brown fox jumps over the lazy dog

Lead
Absatz <p>
Schriftgröße: 20 px 
Schnitt: 500

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Auszeichnung einfach in <strong>setzen</strong>. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Fließtext
Absatz <p>
Schriftgröße: 18 px 
Schnitt: 400
2-spaltig, 30 px Abstand (wenn möglich)

The quick brown fox jumps over the lazy dog

Bildunterschrift/Erklärungen
Absatz <p>
Schriftgröße: 12 px 
Schnitt: 400

Logo

Logoeinsatz und -farben

Lorem ipsum

Fließtext

Einsatz von Bildern und Bildwelt

Logoeinsatz und -farben

Lorem ipsum

Fließtext

Schreibweisen

Was schreiben wir wie vor allem ß und ss

Lorem ipsum

Fließtext

Grid & Abstände

Webgrid

Lorem ipsum

Abstände horizontal 15, 30, 45
Vertikal 20,30, 40

Downloads

Webgrid

Lorem ipsum

Abstände horizontal 15, 30, 45
Vertikal 20,30, 40

Werte & Botschaft

Webgrid

Lorem ipsum

Abstände horizontal 15, 30, 45
Vertikal 20,30, 40

Standort

Weidenweg 5
33378 Rheda-Wiedenbrück

Kontakt

Fon

0 52 42 / 578 77 77

Mail

mail@foss-haas.de

Zeiten

Mo. – Do.

10:00 bis 17:00 Uhr

Freitag

10:00 bis 14:00 Uhr

Legit

Impressum
Datenschutz

Social

Facebook Instagram Pinterest

Nach Terminabsprache sind wir auch gerne außerhalb unserer Kernarbeitszeiten für Euch da.

Ⓒ 2022 Foss & Haas GmbH
made with love in OWL
all rights are reserved

Foss & Haas

<startseite/>

Leistungen

Markenbildung
Digitale Lösungen
Kreation
Kommunikation

Team

Einzeln sind wir stark,
gemeinsam unschlagbar!

Kontakt

0 52 42 / 578 77 77
mail@foss-haas.de
Kontaktformular

Realisiert

<portfolio/>

Print

Web

Code

Kampagne

Unser Digitaler Styleguide

Jede Marke hat das Ziel ein optimales Kundenerlebnis zu bieten – schaut mal was wir für uns entwickelt haben.

Wissen

<knowhow/>

Events & Talks

#OWLJSgoesdigital
#ElementorManiacs

Wiki & Lexikon

Mit unserem Fachwissen könnten wir Bücher füllen – machen wir bald auch – nach und nach. Bis es soweit ist, werft doch einen Blick in den Blog.

WWWWW

Wir Wissen Wer Was Weiß
Bald mehr über unser Netzwerk!

Neues

<beitraege/>

Ole

<e-learning/>

About

<agenturphilosophie/>

Instagram Facebook Pinterest
„DER LINK GEHT NICHT!“
Stimmt! Wir entwickeln uns an dieser Stelle gerade weiter und strukturieren uns um. Bitte habt noch etwas Geduld.

FEINES

Die Perle in den Muscheln: schaut sie euch hier an.
Wer unser Feuer entfacht, für den brennen wir auch mit Leidenschaft. Wir begeistern uns für Kund:innen, die uns ihre unbekannte, neue Welt aufschließen.

HOT / NOT

Flop or Top?
Love or let it go?
Über dos and donts aus unserem Grafiker:innen-Alltag. Schaut hier eine Sammlung von Grafikhighlights an.

AKTUELL

Unser Blog.
Ein eigenes Universum.
Neues, Unwichtiges, Altes, Grandioses, Interessantes, Aufregendes, Lehrreiches, Gedankensplitter, Insider, Bemerkenswertes, … findest du auf unserem Blog.
IN Unserem Blog Stöbern

SERVICE

Expert:innen in
allen Bereichen

Knights of the Round Table

Als Full-Service Agentur haben wir einen großen Tisch gedeckt. Wo wir selbst an diesem Tisch keinen Platz haben, sitzen Agenturfreund:innen und runden unser Team ab. So profitierst du von einem sehr breiten Leistungsspektrum. Auf Kommunikation ohne Umwege kannst du dich freuen. Wir helfen dir beim Klettern in unserem Netzwerk gebündelter Kompetenz.

DESIGN

Bist du kitzelig? Gemeinsam mit dir wollen wir deine Vision aus dir herauskitzeln. Wie soll es werden?

Ich sehe was, was du auch siehst

Lass uns zusammen in die Glaskugel schauen, um dann festzustellen: Ja, genau so habe ich es gesehen! Wir schaffen dein Markenerlebnis. Wir übersetzen deine Vision, so dass sie jeder sieht. Spiel Um-die-Ecke-gedacht mit uns. Es macht Spaß, scheinbar Unmögliches möglich zu machen.

CODE

Grafiker:innen denken in Bildern. Entwickler:innen denken in aufwendigen Diagrammen.

Code zum anfassen

Beides zusammen macht Unvorstellbares greifbar. Und das nicht nur zum Anschauen: Für die Pflege deines digitalen Produktes machen wir dich selbständig und unabhängig von uns. Und deine Fragen beantworten wir immer gern. Aber auch wir lieben es, selbständig zu sein. Deshalb entwickeln wir nicht nur die Werke anderer weiter, sondern wir nutzen Codes aus eigener Hand.

LEXIKON

Wissen ist Macht!
Und mit Macht kommt große Verantwortung.
Die teilen wir gerne.

Wissen zum mitnehmen

Nicht nur untereinander, sondern auch mit euch. Von Abdruckerlaubnis bis Zweitverwertungsrecht erklären wir in deiner Sprache, worum es geht.

eLEARNING

Selbstgemachte Kurse aus einer Hand. So geht Lernen mit einem gewissen Schmunzelfaktor.
Komplexe, trockene Inhalte? Kein Problem. Mit unserer OLE Scout Software wandeln wir sie in strukturiertes Lernmaterial, das leicht und freundlich daherkommt. Vertraut uns eure Kurse an und profitiert von zufriedenen und perfekt informierten Anwendern.

WIR

Wir sind ein Team, wie es unterschiedlicher nicht sein könnte. Alle Wesenstypen sind bei uns vertreten.

Das macht uns reich & tolerant.

Du profitierst davon, denn es wird immer jemanden geben, der dich versteht.
Lern uns kennen

KULTUR

Unsere Werte einen uns. Leidenschaftlich sind wir Medium zwischen den Welten.

Wir können die Welt verändern!

Lass uns gemeinsam mutig sein.

ZEIT

Wir sind davon überzeugt, dass viel arbeiten allein nicht die besten Ergebnisse bringen kann.

Wir haben unsere eigenen Regeln

Bei vollem Gehalt arbeiten wir (mindestens) 25 Stunden in der Woche. Mit viel Konzentration und viel Vertrauen. Flexibel und rücksichtsvoll.

GOODIES

Sommerfest, Weihnachtsfeier, häufig mit unseren Liebsten – das gehört zum Foss & Haas Jahr.

Erfolge feiern

Zwischendurch feiern wir auch gerne Projektabschlüsse.
Cookie Consent mit Real Cookie Banner