Corporate Identity.
Das visuelle System hinter PXEL, Logo, Farbe, Typografie, Abstände, Bausteine und Ton & Sprache an einem Ort. Verbindliche Gestaltungsgrundlage für alle Projekte.
Eine moderne Kreativagentur für Bild und Web.
PXEL verbindet Fotografie, Videografie sowie Webdesign und Webentwicklung unter einer konsequent monochromen Gestaltungssprache.
Kurzportrait
PXEL ist ein Studio, das Bilder macht und Websites baut, mit demselben Anspruch an Präzision und Ruhe in beiden Disziplinen. Statt vieler Leistungen mit halber Tiefe konzentriert sich PXEL auf drei Bereiche, die ineinandergreifen: Fotografie, Videografie sowie Webdesign & Webentwicklung.
Aufgabe der Corporate Identity
Dieses Handbuch hält fest, wie PXEL aussieht, klingt und funktioniert, als verbindliche Grundlage für alle zukünftigen Projekte, ob intern gestaltet oder extern in Auftrag gegeben. Es sorgt dafür, dass jede Anwendung wiedererkennbar bleibt, unabhängig davon, wer sie umsetzt.
Markenversprechen
Konsequent, nachvollziehbar, ohne Zufall, was PXEL liefert, folgt einem System, keiner Laune. Kundinnen und Kunden bekommen keine Trend-Optik von der Stange, sondern eine Bildsprache und einen Webauftritt, die auch in fünf Jahren noch tragen.
Positionierung
PXEL positioniert sich bewusst reduziert und selbstbewusst, als ruhiger Gegenpol zu bunten, lauten Studio-Websites. Die Zielgruppe sind Menschen und Unternehmen, die Qualität einer schnellen, günstigen Lösung vorziehen.
Markenpersönlichkeit & -werte
Sechs Werte, die jede Entscheidung in Bild, Code und Kommunikation prägen, vom Bildausschnitt bis zur Wortwahl im Angebot.
Kontrast statt Farbe.
Ein Studio für Bilder braucht keine Farbleitsystem-Krücke, die Bilder liefern die Farbe.
PXEL verzichtet bewusst auf eine Akzentfarbe. Stattdessen trägt der gesamte Auftritt ausschliesslich Schwarz, Weiss und Grautöne, Struktur und Kontrast erzeugen Wirkung, nicht Buntheit. Das hat zwei Gründe: Erstens lässt es die eigentlichen Inhalte, die Fotos, jedes Mal als farbigstes Element auf der Seite strahlen. Zweitens wirkt ein konsequent monochromes System selbstbewusster und langlebiger als ein Trendton, der in zwei Jahren wieder aus der Mode ist.
Struktur
Text, Linien und Flächen bleiben neutral: Schwarz, Weiss, Grau. Grossflächiges Bild als einziger Farbträger.
Farbe
Die einzige Farbe der Seite kommt aus dem Bild selbst.
Eine Wortmarke, ein Schnitt.
Geometrisch, kantig, mit einem grossen × in der Mitte, als eigenständige Form, nicht nur als Buchstabe.
Beschreibung der Wortmarke
Die Wortmarke „PXEL" ist in einem einzigen, geometrischen Schnitt gesetzt. Das × in der Mitte ist bewusst überzeichnet, es ist nicht nur Buchstabe, sondern eigenständiges Formprinzip, das sich als Symbol und Motiv durch den gesamten Auftritt zieht.
Freiraum & Mindestgrösse
Rund um das Logo immer mindestens die Höhe des „P" als Schutzraum einhalten (gestrichelte Linie im Beispiel). Digitale Mindesthöhe: 20 px. Empfehlung für den Druck: nicht kleiner als 12 mm Höhe einsetzen, damit das × lesbar bleibt.
Platzierung & Skalierung
- Nur die Originaldateien verwenden (Vektor)
- Immer proportional skalieren, Höhe oder Breite gemeinsam sperren
- Auf Fotos nur auf ruhigen, kontrastreichen Bildbereichen platzieren
- Schutzraum in Höhe des „P" auf allen Seiten einhalten
| Format | Verwendung | Variante |
|---|---|---|
| AI / EPS (Vektor) | Druck, Skalierung ohne Qualitätsverlust | Weiss & Schwarz |
| SVG (Vektor) | Web, App-Icons, responsive Einsatz | Weiss & Schwarz |
| PNG (transparent) | Präsentationen, Office-Dokumente | Weiss & Schwarz, min. 1200 px Breite |
Was das Logo nicht sein darf.
Original, proportional, mit Schutzraum, nicht verzerrt oder schräg gestellt.
- Logo verzerrt oder gestreckt
- Logo umgefärbt (z. B. in Grau statt Schwarz/Weiss)
- Schatten oder Leuchteffekt hinzugefügt
- Farbverlauf im Logo
- Kontur oder Rahmen um das Logo
- Auf unruhigem Bildbereich platziert
- Schutzraum unterschritten
Ein Zeichen im Hintergrund.
Kein Icon zum Anklicken und kein Badge neben dem Logo, sondern eine leise grafische Textur, die im Hintergrund für Wiedererkennung sorgt.
Wasserzeichen, dunkler Grund
Wasserzeichen, heller Grund
Aus der Wortmarke destilliert: dieselbe kantige Geometrie, dasselbe Prinzip, nur als reine Fläche statt als Buchstaben. Genau deshalb taucht das Symbol nirgends als eigenständiges Icon auf, sondern ausschliesslich sehr grossflächig und sehr leise im Hintergrund: als Wasserzeichen im Seiten-Hero, im Footer und in CTA-Bereichen. Es soll gesehen, aber nicht bewusst wahrgenommen werden. Auf der Website ist es genau so umgesetzt, als sehr dezentes Hintergrundelement in den Seiten-Hero-Bereichen und im Footer.
- Nur als grossflächiges, sehr dezentes Hintergrundelement einsetzen
- Immer im Originalzustand, nicht verzerren, drehen oder einfärben (ausser in Weiss/Schwarz je nach Untergrund)
- Nie als eigenständiges Icon, Badge oder Listenpunkt neben Logo, Text oder Navigation einsetzen
Nur Schwarz, Weiss, Grau.
Acht Töne, konsequent gepflegt, mehr Farbe braucht dieses System laut Manual nicht.
Anwendung & Kontraste
Empfohlene Kombinationen
Ink auf Hintergrund/Fläche für Standard-Fliesstext · Akzent (Weiss) auf Hintergrund für Buttons und Hervorhebungen · Muted auf Fläche für sekundäre Beschreibungen · Farbverläufe zwischen den Grautönen als Gestaltungsmittel.
Ungeeignete Kombinationen
Muted 2 auf Hintergrund für Fliesstext, Kontrast zu gering. Jede zusätzliche Bunt- oder Neonfarbe widerspricht dem Prinzip.
Zwei Schriften, klare Rollen.
Space Grotesk für Überschriften und Zahlen, Inter für Fliesstext, mehr braucht es nicht.
Ideen, die sichtbar werden.
Drei Disziplinen.
Sportfotografie
PXEL verbindet Fotografie, Webdesign und Webentwicklung.
Klare, ruhige Bildsprache für Unternehmen, Menschen, Events, Produkte und Sport.
Skala für den Druck
Web-Angaben in rem/vw/clamp() wurden für den Druck in eigenständige Punktgrössen übersetzt, nicht direkt übernommen.
| Rolle | Schnitt | Grösse / Zeilenhöhe |
|---|---|---|
| Titel (Cover) | Space Grotesk 600 SemiBold | 52 pt / 50 pt |
| H1 | Space Grotesk 600 SemiBold | 34 pt / 34 pt |
| H2 | Space Grotesk 600 SemiBold | 24 pt / 26 pt |
| H3 | Space Grotesk 600 SemiBold | 15 pt / 18 pt |
| Overline | Space Grotesk 700 Bold | 9 pt / 12 pt |
| Kapitelnummer | Space Grotesk 600 SemiBold | 11 pt / 14 pt |
| Lead | Inter 400 Regular | 12.5 pt / 19 pt |
| Fliesstext | Inter 400 Regular | 10 pt / 16 pt |
| Kleine Texte | Inter 500 Medium | 8.5 pt / 12 pt |
| Bildlegende | Inter 500 Medium | 8 pt / 11 pt |
| Tabelleninhalt | Inter 400 Regular | 9 pt / 13 pt |
| Zitat | Space Grotesk 600 SemiBold | 18 pt / 22 pt |
Ein ruhiges Raster.
Wenige, konsequent wiederkehrende Werte statt beliebiger Zwischenräume, vom A4-Dokument auf die Website übertragen.
| Wert | Mass |
|---|---|
| Bund | 24 mm |
| Satzspiegel-Aussenrand | 20 mm |
| Satzspiegel-Bundsteg | 24 mm |
| Fusssteg | 18 mm |
| Kopfsteg | 16 mm |
| Abstand zwischen Kapiteln (vertikal) | 14 mm |
| Abstand Überschrift → Text | 6 mm |
| Karten-/Spaltenabstand | 5 mm |
--max), schmale Container 820 px (--max-narrow), Radius gross 24 px (--radius), Radius klein 14 px (--radius-sm).Das × als roter Faden.
Neue Motive sollten diese Logik weiterführen, statt eigene Symbole zu erfinden, Konsistenz schlägt Abwechslung.
- Als Trenner im Overline-Label
- Als Ziffern-Suffix bei Prozess-Schritten
- Als Bullet-Symbol in Checklisten
- Als grosses Wasserzeichen im Hero/Footer
- Als Teil von Kapiteltrennern im Handbuch
Buttons, Links & Tags.
Jedes interaktive Element folgt einer von drei Stufen: solide, umrandet oder invertiert.
✓ Richtig
Ein Solid-Button je Abschnitt, Outline für sekundäre Aktionen.
✕ Falsch
Mehrere Solid-Buttons nebeneinander oder zusätzliche Farbe im Button.
Ruhig, natürlich, reduziert.
Bilder tragen die Farbe der Seite, deshalb müssen sie ruhig und bewusst komponiert sein.
Passend
Natürliches Licht statt harter Blitze, authentischer Moment, ruhige und klare Komposition.
Unpassend
Gestellte Pose, harter Blitz, stark gefilterte Bilder oder Stockfotos mit Wasserzeichen.
Direkt statt aufgesetzt.
- Direkt: Kurze Sätze, klare Aussagen, keine drei Nebensätze, wo einer reicht.
- Ehrlich: Keine Versprechen, die nicht gehalten werden. Platzhalter werden als Platzhalter benannt.
- Ruhig statt laut: Keine Ausrufezeichen-Kaskaden, kein „Jetzt sofort buchen!!!", Selbstbewusstsein statt Druck.
- Kein Fachchinesisch: Begriffe, die eine Kundin oder ein Kunde ohne Nachfragen versteht.
Kurz zusammengefasst.
Do
- Schwarz, Weiss und Grautöne einsetzen, Bilder als farbige Hauptakteure wirken lassen
- Space Grotesk für Überschriften, Inter für Fliesstext
- Logo proportional skalieren, aus den Originaldateien
- Schutzraum in Höhe des „P" konsequent einhalten
- Natürliche, ruhig komponierte Bilder verwenden
- Klare, direkte Sprache in der Du-Form verwenden
Don't
- Keine bunten Akzentfarben, Neon-Töne oder Verläufe hinzufügen
- Keine weiteren Schriftarten mischen, auch nicht „nur für eine Seite"
- Logo nicht strecken, drehen, einfärben oder mit Schatten/Kontur versehen
- Symbol nicht als eigenständiges Icon, Badge oder Listenpunkt einsetzen
- Keine stark gefilterten Bilder oder Stockfotos mit Wasserzeichen verwenden
- Keine überladene Gestaltung oder beliebige Zwischenräume
- Keine aggressive Werbesprache oder Ausrufezeichen-Kaskaden
Kontrast statt Farbe. Konsequent angewendet.
Kontakt
Kevin Hess · 076 269 12 85
mail@web-pxel.ch
4416 Bubendorf
Dokument
Version 1.0 · 2026 · Erstellt: August 2026
Nur für den internen Gebrauch bei PXEL und beauftragten Partnern.