Corporate
Design Manual

Das Logo

Ovales Label mit wei├čer Schrift.
Der Ursprung kommt von einem Obstlabel, das direkt auf die Frucht geklebt wird.
In einem zweiten Schritt ist das Label relauncht und reduziert worden.
Es wird in der Regel immer rot dargestellt. In Einzelfa╠łllen aber auch in wei├č auf farbigem Hintergrund.

shapefruit Logo
digital

Google
Drive

shapefruit Logo
print

Google
Drive

Platzierung und Gr├Â├če

Das Logo wird immer in der gleichen Ausrichtung mit horizontaler Schrift verwendet. Es darf nicht gekippt werden.

Das Logo kann kreativ platziert werden. Es hat keine feste Position. Es sollte aber Raum haben.

Die Standard Position ist oben rechts (Print) und oben links (Web).

Um das Logo herum muss immer mindestens ein wei├čer Raum┬ávon der Ho╠łhe des Logos eingehalten werden.
Der Abstand vom Rand muss ebenfalls mindestens die Logo-Ho╠łhe haben.

Typografie

Die Haus-Schriftfamilie ist Raleway.
Sie ist klar, trotzdem weich, schno╠łrkel- und zeitlos.

Sie wird nur mit gemischten Buchstaben (ALSO NICHT MIT VERSALIEN) verwendet und in den Schnitten Bold (font-weight: 700),
Regular (font-weight: 400) und Light (font-weight: 300).
In der Regel wird sie shapegrau dargestellt, darf in Einzelfa╠łllen aber auch eingefa╠łrbt werden.

Aa

Raleway Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcde
fghijklnopqrstuvwxyz1234567890(,.;?!ÔéČ&ÔÇťÔÇ×*)

Aa

Raleway Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZabcde
fghijklnopqrstuvwxyz1234567890(,.;?!ÔéČ&ÔÇťÔÇ×*)

Aa

Raleway Light

ABCDEFGHIJKLMNOPQRSTUVWXYZabcde
fghijklnopqrstuvwxyz1234567890(,.;?!ÔéČ&ÔÇťÔÇ×*)

shapefruit Typo
Raleway

Google
Fonts

Raleway unterliegt der SIL Open Font License

Die zweite Schriftart ist Museo 300 (Letterspace 80).

Sie ist Akzentschrift wird nur fu╠łr besondere Texthervorhebungen verwendet. Sie wird ausschlie├člich mit VERSALIEN verwendet.

Sie soll einen deutlichen Kontrast zur Raleway bilden und wird daher deutlich kleiner als die Hauptu╠łberschrift (Raleway bold) dargestellt.

Aa

Museo 300

ABCDEFGHIJKLMNOPQRSTUVWXYZabcde
fghijklnopqrstuvwxyz1234567890(,.;?!ÔéČ&ÔÇťÔÇ×*)

shapefruit Typo
Museo 300

Adobe
Fonts

Wie alles von Adobe Fonts k├Ânnen Sie diese Schriftarten zu folgenden Ver├Âffentlichungszwecken nutzen: Webseiten, Logos, Kommerzielle Projekte und PDFs. Weitere Informationen zu der Lizenz

Web Typografie (Alternative)

In manchen Fa╠łllen (z.B. E-Mail-Newsletter) mu╠łssen die vorweg definierten Schriftarten durch systemu╠łbergreifende,
websichere Standard-Schriftarten ersetzt werden.

TIMESNEWROMAN statt MUSEO
(Gro├čbuchstaben und ein Leerzeichen zwischen jedem Buchstaben)

Trebuchet MS Bold statt Raleway

Farben

Die Prima╠łr-Farben sind das ÔÇ×shaperotÔÇť (wobei dieses ausschlie├člich fu╠łr das Logo verwendet wird),
das ÔÇ×shapegrauÔÇť, das ÔÇ×shapeblauÔÇť und das ÔÇ×shapegelbÔÇť.

Es gibt Abstufungen ÔÇ×shapegrau mittel und shapegrau hellÔÇť, die zum Beispiel im Internet Anwendung findet,
um unterschiedliche Hintergrundfla╠łchen zu erzeugen. Weitere Sekunda╠łr-Farben sind au├čerdem das ÔÇ×shapegelb dunkelÔÇť und ÔÇ×shaperosaÔÇť.

Es wurden jeweils Werte fu╠łr RGB und CMYK definiert.
Shaperot wurde von HKS15 abgeleitet.

Prim├Ąr-Farben

shaperot
(nur f├╝r das Logo)

CMYK: 8/100/78/2

RGB: 213/17/48
HEX: #d51130
HKS15

shapegrau

CMYK: 71/57/43/37

RGB: 71/78/93
HEX: #474e5d

shapeblau

CMYK: 56/0/15/0

RGB: 113/200/218
HEX: #71c8da

shapegelb

CMYK: 5/0/89/0

RGB: 255/237/0
HEX: #ffed00

Sekund├Ąr-Farben

shapegrau mittel

CMYK: 61/44/32/16

RGB: 107/120/137
HEX: #6b7889

shapegrau hell

CMYK: 18/10/10/0

RGB: 218/221/226
HEX: #dadde2

shapegelb dunkel

CMYK: 28/16/90/2

RGB: 198/189/50
HEX: #c6bd32

shaperosa

CMYK: 0/37/15/0

RGB: 255/186/193
HEX: #ffbac1

Kontrast-Farben

shapeorange

CMYK: 0/43/83/0

RGB: 255/164/51
HEX: #ffa433

shapeg├╝n

CMYK: 42/0/58/0

RGB: 165/206/136
HEX: #a5ce88

shapefruit
Farbbibliothek

Google
Drive

Icons

Bei den Icons werden nur die Konturen eingefa╠łrbt.

                   

shapefruit Icon Bibliothek

ZIP
35 KB

Schmuckelemente

Linie

Die gewellte Linie wird als Unterteiler und als Schmuckelement eingesetzt.

Beim Unterteilen bzw. Unterstreichen wird sie mit Hilfe der Icon-Font erstellt. Hier richtet sich die L├Ąnge
der Linie nach der Breite des Textes, den sie unterstreicht und entspricht ca dem Faktor 0,6.
(Wenn sich der Faktor nicht anwenden l├Ąsst, wird die Linie optisch ansprechend,
wie bei den folgenden Beispielen, gek├╝rzt.)

Als reines Schmuckelement also ohne Text wir die Linie als Vektor-Datei benutzt.
Die Wellen sind hier enger und h├Âher.

LINE

ţáĺţáĺ

HEADLINE

ţáĺţáĺţáĺţáĺţáĺ

SUBHEADLINE

ţáĺţáĺţáĺţáĺţáĺţáĺţáĺ

Farbverl├Ąufe & Muster

Als weiteres, spielerisches Element ko╠łnnen Farbverla╠łufe und Muster eingesetzt werden, insbesondere um gro├če Fla╠łchen interessanter zu gestalten.
Dabei sind die Linien und Punkte nur sehr spartanisch einzusetzen.

Farbverla╠łufe mithilfe von Hintergrundbildern
Farbverla╠łufe aus Ausschnitten des Hintergrundbildes
Farbverlauf selbst anlegen

Position des Mittelwertes bei 30%
(so wird gewa╠łhrleistet, dass eine der drei Prima╠łrfarben shapecyan, shapegelb und shapegrau dominant bleibt)
Winkel: 10┬░ (von links unten nach rechts oben)

shapegelb zu shapecyan
shapecyan zu shapegelb
shapecyan zu shapegrau
shapegrau zu shapezyan
shaperosa zu shapecyan
Farbverlauf im Rahmen und Icons
shapefruit

Schmuckelemente

Google
Drive

Freisteller

Auf bzw. in farbigen Fla╠łchen ko╠łnnen auch Bilder integriert werden, allerdings NUR in schwarz-wei├č und nur als Freisteller.
Sie werden immer mit einer kra╠łftigen wei├čen Kontur hinterlegt.

Bildsprache

Mitarbeiter-Fotos

Unsere Mitarbeiter sind immer als Freisteller vor shapegelben oder shapecyan Hintergrund fotografiert. Es gibt sie als Stills und animierte GIFs.

Mitarbeiter-Fotos GIF

shapefruit Mitarbeiterfotos
Portrait

Google
Drive

shapefruit Mitarbeiterfotos
GIF

Google
Drive

Bildstil

Au├čer bei den Mitarbeiter-Fotos verwenden wir ausschlie├člich schwarz-wei├č-Abbildungen. Darin ko╠łnnen einzelne Elemente bzw.
Bereiche in unseren Prima╠łrfarben gelb und blau hervorgehoben bzw. eingefa╠łrbt sein.

Animation

Die Hintergrund-Verla╠łufe gibt es auch als Animation.
Sie ko╠łnnen als Hintergrund fu╠łr Pra╠łsentationen verwendet werden.

shapefruit
Animation

Google
Drive

1.0
Version

Stand: 05. Juni 2019

Wie gef├Ąllt dir dieser Beitrag?

Deine Meinung ist uns wichtig!

Noch keine Bewertung ­čÖü

OH, schade!

Wir tun unser Bestes!

Men├╝