Fotografie
Portraits, Business- und Produktfotografie mit klarer, ruhiger Bildsprache.
Mehr erfahrenStyleguide
Das visuelle System
hinter PXEL.
Diese Seite dokumentiert, wie PXEL aussieht, klingt und funktioniert — Logo, Symbol, Farbe, Typografie, Abstände und Bausteine an einem Ort. Praktisch als Referenz für mich selbst, und gleichzeitig ein Beweis dafür, wie PXEL Webdesign denkt: konsequent, nachvollziehbar, ohne Zufall.
01 — Prinzip
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 die Website 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.
02 — Logo
Ein Wortmarke, ein Schnitt.
Geometrisch, kantig, mit einem grossen × in der Mitte — als eigenständige Form, nicht nur als Buchstabe.
Standard — auf dunklem / schwarzem Grund
Alternative — auf hellem Grund
Freiraum & Mindestgrösse
Rund um das Logo immer mindestens die Höhe des „P" als Freiraum lassen — nichts andockt, überlappt oder direkt danebensteht. Digital nicht kleiner als 20 px Höhe einsetzen, sonst verliert das × seine Lesbarkeit.
- Nur die bereitgestellten Dateien verwenden (
logo-white.png/logo-black.png) - Immer proportional skalieren
- Auf Fotos nur auf ruhigen, kontrastreichen Bildbereichen platzieren
03 — Symbol
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 auf dunklem Grund
Wasserzeichen auf hellem 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 oben im Seiten-Hero der Unterseiten und im CTA-Banner. Es soll gesehen, aber nicht bewusst wahrgenommen werden — Textur statt Behauptung.
- Nur als grossflächiges, sehr dezentes Hintergrundelement einsetzen (4–8 % Deckkraft)
- Nie als eigenständiges Icon, Badge oder Listenpunkt neben Logo, Text oder Navigation platzieren
- Immer im Originalzustand — nicht verzerren, drehen oder einfärben
04 — Farbe
Nur Schwarz, Weiss, Grau.
Acht Töne, konsequent als CSS-Variablen in styles.css gepflegt — dort lässt sich der komplette Look zentral anpassen.
„Akzent" heisst hier bewusst reines Weiss statt einer Farbe: Buttons, aktive Zustände und Hervorhebungen setzen sich einzig über Helligkeit und Kontrast ab — nicht über Buntheit.
05 — Typografie
Zwei Schriften, klare Rollen.
Space Grotesk für Überschriften und Zahlen, Inter für Fliesstext — mehr braucht es nicht.
Aa Pixelgenau
Aa Bilder, die wirken
Aa Ein Blick, drei Disziplinen
Aa Overline Label
Aa Fliesstext für Absätze: gut lesbar, ruhig gesetzt, ohne Effekthascherei — Inter in Regular und Medium, je nach Kontext.
Aa Kleine Meta-Angaben, Labels, Zeitstempel
06 — Abstände & Radien
Ein ruhiges Raster.
Wenige, konsequent wiederkehrende Werte statt beliebiger Zwischenräume.
Radius gross
--radius · 20px
Radius klein
--radius-sm · 12px
Sektion
Vertikaler Abstand · 110px (Desktop) / 76px (Mobil)
Karten-Gap
Grid-Gap Cards · 18–22px
Inhaltsbreite
--max · 1240px
07 — Bausteine
Buttons, Links & Tags.
Jedes interaktive Element folgt einer von drei Stufen: solide, umrandet oder invertiert.
Buttons
Links & Tags
Badges & Nummerierung
Foto · Webdesign
01×
02
08 — Komponenten
Aus Bausteinen gebaut.
Karten, Prozess-Schritte, FAQ und Formularfelder — live aus dem echten Stylesheet, keine Attrappen.
Service-Karte
Prozess-Schritt
01×
Kennenlernen
Wir sprechen über dein Ziel, deine Marke und was du wirklich brauchst.
FAQ-Element
So ist ein FAQ-Eintrag aufgebaut
Klick auf die Zeile öffnet und schliesst die Antwort — technisch ein natives <details>-Element, ganz ohne JavaScript.
Formularfeld
09 — Bildsprache
Ruhig, natürlich, reduziert.
Bilder tragen die Farbe der Seite — deshalb müssen sie ruhig und bewusst komponiert sein.
Natürliches Licht statt harter Blitze, echte Momente statt gestellter Posen, klare Kompositionen statt vollgestopfter Bildausschnitte. Nachbearbeitung dezent: Kontrast und Klarheit ja, künstliche Filter oder starke Farbverschiebungen nein.
10 — Grafisches Motiv
Das × als roter Faden.
Aus dem Logo entlehnt, taucht das × als wiederkehrendes Detail überall auf der Seite auf.
×
- Als Trenner im Overline-Label und im Lauftext-Ticker
- Als Ziffern-Suffix bei Prozess-Schritten (
01×) - Als Bullet-Symbol in Checklisten
- Als grosses Wasserzeichen im CTA-Banner und im Seiten-Hero (siehe Abschnitt Symbol)
- Als Teil des „X" im 404-Fehlercode
Neue Motive sollten diese Logik weiterführen, statt eigene Symbole zu erfinden — Konsistenz schlägt Abwechslung.
11 — Ton & Sprache
Direkt statt aufgesetzt.
PXEL spricht in der Du-Form, klar und ohne Marketing-Nebel.
- DirektKurze Sätze, klare Aussagen — keine drei Nebensätze, wo einer reicht.
- EhrlichKeine Versprechen, die nicht gehalten werden. Platzhalter werden als Platzhalter benannt.
- Ruhig statt lautKeine Ausrufezeichen-Kaskaden, kein „Jetzt sofort buchen!!!" — Selbstbewusstsein statt Druck.
- Kein FachchinesischBegriffe, die eine Kundin oder ein Kunde ohne Nachfragen versteht.
12 — Do & Don't
Kurz zusammengefasst.
Do
Ausschliesslich Schwarz, Weiss und Grautöne verwenden — Kontrast statt Farbe.
Don't
Bunte Akzentfarben, Farbverläufe oder Neon-Töne hinzufügen.
Do
Space Grotesk für Headlines, Inter für Fliesstext — genau diese Kombination.
Don't
Weitere Schriftarten mischen, auch nicht „nur für eine Seite".
Do
Logo in Originalproportion, mit Freiraum, aus den bereitgestellten Dateien.
Don't
Logo strecken, drehen, einfärben oder mit Schatten/Outline versehen.
Do
Ruhige, natürlich belichtete Bilder mit klarer Bildaussage einsetzen.
Don't
Stockfoto-Bilder mit Wasserzeichen oder stark gefilterte Bilder verwenden.
Do
Symbol grossflächig und sehr leise als Hintergrundtextur einsetzen — nie lauter als 8 % Deckkraft.
Don't
Symbol als eigenständiges Icon, Badge oder Listenpunkt neben Logo, Text oder Navigation platzieren.