Designsystem und Hero-Konzept · Entwurf zur Abstimmung

Präzision sichtbar machen, nicht behaupten.

Pfeiffer Innenausbau GmbH · Markenmodernisierung und Website · Stand 13. November 2026

Pixelpulli – Marken, Websites und digitale Kommunikation

01Leitidee

Die Fuge, die man sehen darf.

Die Seite zeigt Präzision, statt über sie zu reden: in Nahaufnahmen von Fügungen, im Signet, in der Bewegung.

Fugen bleiben sichtbar

Flächen stoßen nicht aneinander. Sie halten drei Pixel Abstand.

Ein einziges Zeichen

Die Raute markiert, wo etwas beginnt, aktiv ist oder zusammenkommt.

Bewegung fügt zusammen

Linien zeichnen sich, Fugen schließen sich. Sonst steht alles still.

02Logo

Wortmarke. Das doppelte f als Ligatur. Steht in Navigation und Footer, immer in ihrem Rot.

Signet. Die Raute aus der früheren Dachlinie. Ihr Umriss ist das Motiv des Systems.

Auf dunklem Grund. Die Wortmarke bleibt rot. Für das Signet fehlt noch eine helle Fassung.

03Farbe

grund-creme

#F5F0E6

Seitengrund

rot

#E8341A

Signal: Logo, CTA, gefüllte Raute

ocker

#BC8046

Eine Fläche pro Seite

grund-papier

#FBF8F1

Felder

grund-sand

#EAE2D2

Wechselfläche

ocker-hell

#EBD9BC

Die Fuge, die man
sehen darf.

Innenausbau für Architekten, Bauträger und Generalunternehmer. CNC-gefertigt, von Hand gefügt.

Referenzen ansehen

Scrollen

Fünfte Generation · CNC und Handwerk

Seit 1894.
Immer noch kein Template.

Wir erzählen Ihnen nicht, wie genau wir arbeiten. Wir zeigen es – an der Stelle, an der zwei Teile aufeinandertreffen.

Die Teile kommen aus der CNC-Fertigung, gefügt wird von Hand. Was dabei herauskommt, sehen Sie hier.

Zur Werkstatt

Platzhalter · Foto fehlt Nahaufnahme einer Fügung Makro, Streiflicht, die Fuge läuft waagerecht durchs Bild – auf Höhe der Naht darüber. Mindestens 2800px breit.

Bildunterschrift: Verbindung, Holzart, Projekt. Mehr nicht.

Leistungen

Für wen wir bauen

Objekt & InnenausbauFür Architekten, Bauträger und Generalunternehmer GewerbeTresen, Empfang, Einbauschränke PrivatKüchen und Schränke

Schritt 1

Zwei Linien laufen von den Rändern zur Mitte.

Schritt 2

An der Stoßstelle fügen sie sich zur Raute.

Schritt 3

Der Film wird an der Linie abgelängt, die Raute füllt sich rot.

07Hero: Ablauf beim Scrollen

Seitenanfang

Film vollflächig, Headline, ein Satz, ein Button.

Schritt 1 und 2

Zwei Linien laufen zur Mitte und fügen sich zur Raute.

Schritt 3

Der Film wird an der Linie abgelängt, die Raute füllt sich rot.

Der Hero bleibt etwa eine Bildschirmhöhe lang stehen. Der Scrollweg steuert den Ablauf.

08Erster Scroll: Auftakt und Einstieg in die Leistungen

Auftakt

Der Claim, ein Absatz, darunter die Nahaufnahme einer Fügung (Foto fehlt noch).

Leistungen

Drei Einstiege nach Zielgruppe auf der Ockerfläche.

0809Offene Punkte

Rot festlegen

Die Logos tragen #E53318, das System #E8341A. Es sollte ein Wert sein.

Signet für dunklen Grund

Die graue Raute verschwindet auf Dunkel. Es braucht eine helle Fassung.

Fotos von Fügungen und CNC

Diese Nahaufnahmen tragen die Leitidee und fehlen noch. Bis dahin stehen Platzhalter.

Ausschnitt aus dem Imagefilm

10 bis 15 Sekunden, stumm, als Schleife. Dazu ein Standbild.

Texte

Headlines und Absätze im Hero sind Entwürfe und noch nicht abgestimmt.

Noch nicht gestaltet

Referenzgalerie, Über uns, Team & Karriere, Kontakt, Footer.