Anil Kahraman / Digitales Gestaltungssystem

Ein Auftritt.
Ein System.

So wird aus einer Gestaltung eine klare Linie. Dieses Beispiel dokumentiert die tatsächlichen Farben, Schriften und Gestaltungsregeln meiner Website.

01 / Eisblau & Tiefblau02 / Manrope03 / Portfolio V5

01 / Die Signatur

Eine Brücke. Ein Zeichen.

Das AK-Zeichen verbindet die Initialen zu einer reduzierten Form. In der Website steht es in Eisblau auf Tiefblau; große Typografie übernimmt die Rolle der Wortmarke.

AK-Zeichen / Eisblau auf Tiefblau

Anil
Kahraman.Name / Manrope Regular

Im Header: 62 px breit auf Desktop, 52 px auf Tablet und 45 px auf kleinen Displays. Proportionen bleiben unverändert.

02 / Die Palette

Kühl in der Farbe.
Klar im Ausdruck.

#9BC8ED

Eisblau

RGB 155 · 200 · 237

--primary

Akzente, Links und aktive Zustände

#101820

Tiefblau

RGB 16 · 24 · 32

--base

Hintergrund und ruhige Grundfläche

#172431

Flächenblau

RGB 23 · 36 · 49

--secondary

Abgesetzte Bereiche und Panels

#EDF3FA

Licht

RGB 237 · 243 · 250

--text-light

Überschriften und Haupttext

#9EAFBF

Nebelblau

RGB 158 · 175 · 191

--text-light-muted

Begleittext und Beschriftungen

#304F6C

Konturblau

RGB 48 · 79 · 108

--ak-frame

Rahmen und grafische Details

Dunkle Flächen geben dem Auftritt Ruhe. Eisblau setzt gezielte Akzente. Heller Text sorgt für Orientierung; Konturblau bleibt eine grafische Farbe für Rahmen und Flächen.

03 / Die Stimme

Manrope. Mit Charakter.

Manrope

Regular 400 für großzügige Überschriften. Semibold 600 für Betonungen. Lokal eingebunden, mit Arial und sans-serif als Ersatz.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 · & ! ? ↗

Design mit
Charakter.

Display / Regular / eng laufend / großzügig gesetzt

Fließtext16 px · Zeilenhöhe 1,7

Hero / Desktopclamp(76 px, 7,8 vw, 124 px) · Zeilenhöhe 1,01

Hero / kleine Displaysclamp(56 px, 14,7 vw, 86 px); bis 360 px: 50 px

Über-mich-Headlineclamp(42 px, 4,8 vw, 70 px) · mobil 39 px

Schriftabstand / Hero−0,07 em

Textskala12 / 14 / 16 / 20 / 24 / 32 px

Die Hero-Schrift hat zusätzliche Zwischenstufen mit 8,5 vw und 8,9 vw. Die Angaben zeigen die komponentenspezifischen Regeln der V5, keine starre Schriftgröße für alle Überschriften.

04 / Der Rhythmus

Raum ist Teil des Designs.

Inhaltsbreite1.320 px + beidseitige Einzüge

Einzüge / Desktopclamp(22 px, 3,7 vw, 72 px)

Einzüge / Tablet & Mobil28 px bis 800 px · 22 px bis 600 px

Abstand zwischen Abschnittenclamp(80 px, 10 vw, 150 px)

↔XS / 12–15 px

↔S / 18–22,5 px

↔M / 24–30 px

↔L / 36–45 px

↔XL / 54–67,5 px

↔XXL / 81–101,25 px

Die Abstände wachsen fließend mit der Bildschirmbreite. Das Sechserraster zeigt das Prinzip; einzelne Komponenten verwenden ihre eigenen Spaltenaufteilungen.

05 / Die Details

Wenige Mittel.
Ein eigener Ausdruck.

Textlink / Hover & TastaturfokusEine Idee besprechen ↗

Eisblauer Akzent, feine Linie und ein gerichteter Pfeil. Der Fokus bleibt deutlich sichtbar.

Runde Aktion / Bewegung↗

Die runde Aktion reagiert mit Farbe und leichter Drehung. Flächen und Projektbilder bleiben überwiegend rechteckig.

Linien-Icons: 24er-Raster, 1,5 px Kontur, runde Linienenden. Trennlinien: 1 px mit geringer Deckkraft.

06 / Die Bewegung

Lebendig. Ohne laut zu werden.

Bewegungskurvecubic-bezier(0.16, 1, 0.3, 1)

Kleine Reaktionenca. 0,3–0,5 Sekunden, je nach Element

Große Bildbewegungenbis 0,9 Sekunden

BedienbarkeitBewegungspause und reduzierte Bewegung berücksichtigt

Der Maus-Reveal verbindet Portrait und Headline. Die Istanbul-Silhouette bringt leise Bewegung in den Hintergrund. Einblendungen und Übergänge unterstützen den Inhalt.

Beispiel-Styleguide / Anil Kahraman / Portfolio V5 / Stand 01.11.2026

Styleguide als HTML herunterladen ↗

Ein Auftritt.Ein System.