Styleguide · Web · Stand 19.09.2026 · v0.1
Fünftes Viertel im Web.
Was hier steht, gilt für fuenftesviertel.de. Quelle der Wahrheit ist die theme.json des Child-Themes; diese Seite zeigt, was dort definiert ist, und dient als Auswahlbogen für alles, was sich bewegt.
01 · Farben
Skye ist die Fläche, Weiß ist die Stimme.
Die Website steht komplett auf Skye. Weiß trägt Text, Logo und Buttons, OffWhite ist die leisere Stufe für Labels und Hover. Midnight kommt nur in Schatten und Akzenten vor, nie als Fläche. Andere Farben gibt es nicht.
Im Code: var(–wp–preset–color–base), –contrast, –muted, –line, –accent
02 · Logo
Wortmarke und Bildmarke.
Handgezeichnet, zweifarbig, nie skaliert unter 120 px (Wortmarke) bzw. 40 px (Bildmarke). Im Header steht die Wortmarke mit 160 px Breite, im Footer die Bildmarke 5/4. Schutzraum rundum: mindestens die Höhe der „5″. Nur Weiß auf Skye oder Skye auf Weiß.
Mediathek: IDs 14 und 15 (weiß, zugeschnitten), 11 und 12 (Skye, Original-Artboard mit Weißraum)
03 · Ziffern
Zahlen aus derselben Hand.
Die Ziffern 0 bis 9 sind in der Handschrift der Bildmarke gezeichnet. Sie sind für große Zahlen da: Hausnummer, Öffnungszeiten, Datum eines Festivals, die 75.000 m². Nicht als Ersatz für Zahlen im Fließtext. Als Inline-SVG nehmen sie jede Textfarbe an, deshalb funktionieren sie weiß auf Skye und Skye auf Weiß aus derselben Datei.
Beispiel: Ziffern groß, Einheit in der Headline-Schrift
Mediathek: Original schwarz IDs 46 bis 55, weiße Versionen IDs 63 bis 72 (für den Bildblock). Im Code: Inline-SVG mit fill=“currentColor“, Klasse fv-numbers auf den Container, Größe über –fv-number-size.
04 · Typografie
Sofia Sans Extra Condensed für die Headlines, Geist für den Text, Geist Mono für die Handschrift.
Alle drei selbst gehostet, alle drei variabel. Display-Headlines laufen in Sofia Sans Extra Condensed 800 als Versalien: dieselbe Akzidenz-Linie wie Söhne Schmal, ähnlich schmal, ähnlich hohe Mittellänge, ohne die Härte einer Archivo. Geist trägt den Lauftext, Geist Mono die handgeschriebenen Notizen: Labels, Eyebrows, Tags, das Wort „Menu“. Print bleibt bei Söhne.
Condensed-Vergleich
Dieselbe Zeile in den Kandidaten, einmal gemischt wie im Söhne-Muster, einmal als Versalien wie auf der Seite. Sofia Sans Extra Condensed 800 ist aktiv und läuft überall, die anderen nur hier. Archivo ist raus.
fv-displaySöhne Schmal Family · Köln bekommt einen neuen Treffpunkt.
Köln bekommt einen neuen Treffpunkt.
font-weight: 650Söhne Schmal Family · Köln bekommt einen neuen Treffpunkt.
Köln bekommt einen neuen Treffpunkt.
KandidatSöhne Schmal Family · Köln bekommt einen neuen Treffpunkt.
Köln bekommt einen neuen Treffpunkt.
KandidatSöhne Schmal Family · Köln bekommt einen neuen Treffpunkt.
Köln bekommt einen neuen Treffpunkt.
KandidatSöhne Schmal Family · Köln bekommt einen neuen Treffpunkt.
Köln bekommt einen neuen Treffpunkt.
vorherKöln bekommt einen neuen Treffpunkt.
Schriftmuster
fv-display fv-hero-titleKöln bekommt einen neuen Treffpunkt.
fv-display fv-h2Mitten in Köln.
xx-largeDas Erlebnis
x-largeWas passiert hier?
largeDirekt neben XXXLutz an der Horbeller Straße entsteht ein Ort für Food, Community und Events. Container-Architektur, kurze Wege, lange Abende.
mediumDas Fünfte Viertel ist Teil einer langfristigen Entwicklung von rund 75.000 m². Den Auftakt macht ein Treffpunkt aus Containern, der wächst, wie das Viertel wächst: mit Pop-ups, Sommerfestival und Weihnachtsmarkt.
small© 2026 Fünftes Viertel. Alle Rechte vorbehalten. Impressum · Datenschutz
fv-monoFood. Community. Events. →
fv-eyebrowScroll down ↓
fv-tagSummer Winter Coming soon
05 · Buttons & Links
Pille, weiß, eine pro Sektion.
Der Button ist weiß auf Skye, Geist 700, volle Rundung. Hover wechselt auf OffWhite. Die Outline-Variante ist für Zweitaktionen. Links sind unterstrichen und werden im Hover OffWhite. Listen bekommen Pfeile statt Punkte.
core/buttonis-style-outlinea, elements.link- Horbeller Straße, Köln
- Direkt neben XXXLutz
- Parkplätze vor Ort
fv-list-arrowsfv-dashedfv-divider-row · fv-section06 · Abstände & Raster
Fünf Stufen, zwei Breiten.
Textspalte 40rem, weite Spalte 76rem, Seitenrand 1.5rem. Sektionen haben oben und unten Stufe 4, innerhalb einer Sektion gilt Stufe 2 als Standardabstand zwischen Blöcken. Bilder dürfen bis an den Viewportrand laufen.
contentSize 40rem · wideSize 76rem · blockGap spacing|30 · Bleed: fv-bleed-left, fv-bleed-right auf dem Spalten-Block
07 · Bilder
Jedes Foto wird Skye.
Alle Fotos laufen durch das Duotone-Preset Skye (Skye zu OffWhite). Im Bildblock unter Filter auswählen, fertig. So landet jedes Bild im Markenlook, egal wer es fotografiert hat. Keine Rahmen, keine Rundungen, keine Schatten.
Duotone: var:preset|duotone|skye · Bilder liegen blockbündig, auf dem Handy volle Breite
08 · Animationen
Bewegung, die vom Scrollen kommt.
Grundhaltung: nichts blinkt von allein. Elemente kommen ins Bild, weil man scrollt; die Bewegung ist an die Scrollposition gekoppelt, läuft im Compositor und ist nach 25 Prozent Sichtbarkeit fertig. Wer im System „Bewegung reduzieren“ gesetzt hat, sieht alles sofort. Unten stehen alle Kandidaten mit Nummer. Sag mir, welche bleiben, der Rest fliegt raus.
A · Einblenden beim Scrollen
01 bis 04 sind auf der Startseite bereits im Einsatz. 05 bis 08 sind neue Varianten für Headlines und Textblöcke; sinnvoll ist eine Variante für Headlines plus der Standard für alles andere.
Hochwandern
Der Standard. Blendet ein und wandert 20 px nach oben. Für Absätze, Überschriften, ganze Sektionen.
Köln bekommt einen neuen Treffpunkt.
fv-revealVon links
Kommt aus der linken Flanke. Für Elemente, die am linken Rand stehen: Listen, Adressen, Zitate.
- Horbeller Straße
- Direkt neben XXXLutz
- Köln-West
fv-reveal--leftLeichter Zoom
Bild blendet ein und setzt sich von 104 auf 100 Prozent. Ruhig, kaum merklich, für alle Fotos.
fv-reveal--scaleVersetzt
Auf den Container: die Kinder laufen mit 90 ms Abstand nacheinander ein. Für Hero, Listen, Kartenreihen.
Mitten in Köln.
Food. Community. Events. →fv-staggerAus der Unschärfe
Kommt aus 10 px Weichzeichnung scharf. Weich, fast fotografisch. Für Lead-Texte und Zitate, nicht für kleine Schrift.
Das Erlebnis.
fv-reveal--blurWischt frei
Die Headline wird von unten aufgedeckt, als würde eine Kante hochgezogen. Präzise, grafisch, passt zum Wegeleitsystem.
Was passiert hier?
fv-reveal--wipeMit Schwung
Kommt 40 px von unten und schwingt minimal über. Lebendiger als der Standard. Für Zahlen, Tags, einzelne Akzente.
Summer Festival
fv-reveal--riseWort für Wort
Jedes Wort läuft einzeln ein, 45 ms versetzt. Das Skript zerlegt den Text, Links bleiben erhalten. Nur für kurze Headlines.
Food. Community. Events. Pop-ups.
fv-wordsB · Bilder
Ein Einblenden für Fotos (03 oder 09), dazu optional ein Dauerverhalten (10) und ein Hover für verlinkte Bilder (11).
Aus der Maske
Das Bild wird von unten aufgedeckt und setzt sich dabei von 108 auf 100 Prozent. Die Kante fährt hoch, das Motiv kommt zur Ruhe.
fv-reveal--maskParallax
Das Bild wandert leicht gegen die Scrollrichtung, 7 Prozent nach oben und unten. In der kleinen Bühne scrollen, um es zu sehen.
fv-parallaxZoom beim Hover
Bild wächst im Rahmen auf 105 Prozent, 0.8 s weich. Für verlinkte Bilder: Galerie, Events, Partner.
fv-hover-zoomC · Linien & Zahlen
Die Haarlinie ist das ruhigste Gestaltungsmittel der Seite. Wenn sie sich bewegt, dann einmal und kurz.
Linie zeichnet sich
Die Trennlinie über einer Sektion wächst von links nach rechts, bevor der Inhalt einblendet. Ersetzt den statischen Rand von fv-section.
Gemeinsam bauen.
fv-line-drawLinie wächst mit dem Scroll
Die Linie skaliert über die gesamte Strecke, die sie im Bild ist. Fortschritt statt Effekt. In der Bühne scrollen.
fv-progressZahl zählt hoch
Zählt von 0 zum Zielwert, 1.4 s, reines CSS. Zielwert als Inline-Style, Endwert im aria-label. Für die 75.000 m², Öffnungstage, Partnerzahl.
.000 m²
Entwicklungsflächefv-count · --fv-toBlendet wieder aus
Kommt beim Hereinscrollen, geht beim Herausscrollen. Nur für einzelne Elemente, sonst wird die Seite unruhig. In der Bühne scrollen.
Follow the journey.
fv-sticky-fadeD · Buttons & Links · Hover
Ein Hover für den Button, einer für Textlinks. Auf Touch-Geräten passiert nichts davon, deshalb darf kein Hover Information tragen.
Pfeil rückt nach
Der Pfeil aus der Handschrift wandert beim Hover ein kleines Stück nach rechts. Zeigt Richtung, bleibt leise.
fv-btn-arrowFüllung wischt durch
Der Outline-Button füllt sich beim Hover von links mit Weiß, die Schrift springt auf Skye. Für Zweitaktionen.
fv-btn-fillHebt sich
Button geht 3 px nach oben und bekommt einen Midnight-Schatten. Der einzige Schatten auf der Seite.
fv-btn-liftUnterstreichung wandert ein
Statt der festen Unterstreichung zeichnet sich die Linie beim Hover von links. Für Navigation, Social Links, Footer.
fv-underline-slideE · Marke & Dauerläufer
Alles, was ohne Scrollen läuft. Höchstens eines davon pro Screen, sonst konkurriert es mit dem Inhalt.
Laufschrift
Endlos laufende Zeile in Display-Versalien, 28 s pro Runde, hält beim Hover an. Als Trenner zwischen Sektionen oder im Footer.
fv-marqueePulsierender Punkt
Ein Punkt vor dem Text sendet alle 1.8 s einen Ring aus. Für „Coming soon“, Öffnungszeiten, Live-Hinweise.
fv-pulseHüpfender Hinweis
Der Scroll-Hinweis im Hero hüpft alle 1.6 s ein kleines Stück nach unten. Nur dort, nirgends sonst.
fv-bounceBildmarke kippt
Die 5/4 kippt beim Hover um 6 Grad und schwingt zurück, wie ein handgezeichneter Aufkleber. Für Footer und Karten-Platzhalter.
fv-mark-tiltHero läuft ein
Beim Laden der Seite laufen die Kinder des Hero-Containers versetzt ein, einmalig und zeitbasiert. Das Pendant zu 04 für den ersten Screen.
Köln bekommt einen neuen Treffpunkt.
Food. Community. Events. →fv-load-inSanfter Seitenwechsel
Zwischen zwei Seiten blendet der Browser 200 ms über, statt weiß zu blitzen. Läuft bereits, ohne Klasse, in Chrome und Safari. Zum Testen: zur Baustellenseite und zurück.
@view-transitionAlle Klassen liegen in assets/css/animations.css, die Demos in assets/js/site.js und custom.css (Präfix fv-sg-). Nicht gewählte Kandidaten werden nach der Auswahl entfernt.