Jede Farbe, jede Schrift und jeder Radius in diesem Handbuch stammt aus dem laufenden Code der Website: den Design-Tokens in src/app/globals.css, den Schriften aus src/app/layout.tsx und den Logo-Dateien in public/brand. Wer danach gestaltet, trifft die Marke exakt — ohne Screenshot-Pipetten.
Die Gestaltung folgt einer Position: unabhängige IT-Beratung, die rechnet. Premium-Navy statt Startup-Bunt, ein einziger blauer Akzent statt Farbfeuerwerk — und bewusst keine KI-typischen Lila/Pink-Verläufe.
Unabhängige IT-Beratung für Unternehmen, die rechnen können.
Cloud, KI, Glasfaser, Cloud-Telefonie, Mobilfunk und Digital Marketing aus einer Hand — vendor-neutral, persönlich betreut, aus Düsseldorf.
Claim: WE KNOW HOW IT WORKS — englisch, Versalien, fest in der Logo-Datei. Wird nie übersetzt und nie als freier Textbaustein wiederholt.
Die IT-Welt
Beratung, Cloud, Glasfaser, KI-Automatisierung. Akzent = ITTK-Blau. Technisch, ruhig, vertrauenswürdig. Fotos leicht blau vertieft.
CSS-Klasse .io-accent
Die Marketing-Welt
Digital Marketing, Kampagnen, Creatives. Gleicher Aufbau, gleiches Navy — nur der Akzent wird warm. Fotos leicht entsättigt und warm getönt.
CSS-Klasse .media-accent · <html data-brand="media">
Regel: nie beide Akzente gleichrangig auf einer Fläche. Blau und Orange treffen sich nur im Fusions-Verlauf (siehe Kapitel 05) oder wenn eine orange Seite eine blaue ITTK.io-Spalte enthält — dort setzt .io-accent lokal zurück.
Die Wortmarke besteht aus drei fest verbundenen Teilen: dem Signal-Bogen mit Punkt, dem Schriftzug ITTK.io und dem Claim WE KNOW HOW IT WORKS. Auf hellem Grund ist der Bogen das einzige farbige Element (ITTK-Blau), der Schriftzug bleibt Near-Black.
public/brand/logo-white.svg — Standardfall (Dark ist Default)
public/brand/logo-dark.svg — Schrift Near-Black, Punkt in Blau
Schutzzone = Höhe des Punkts (≈ 12 % der Wortmarkenbreite) auf allen vier Seiten. Nichts hineinsetzen — kein Claim, kein Partnerlogo, keine Kante.
| Wortmarke digital | 120 px breit |
| Wortmarke Druck | 30 mm breit |
| Bildmarke digital | 24 px breit |
| Favicon | 32 / 180 px |
Seitenverhältnis Wortmarke 2120 × 933 (≈ 2,27 : 1), Bildmarke 463 × 544. Nur proportional skalieren.
Beide Dateien liegen im DOM, CSS blendet um — kein JavaScript, kein Flash:
.logo-on-dark { display: inline-block }
.logo-on-light { display: none }
[data-theme="light"] .logo-on-dark {
display: none;
}
[data-theme="light"] .logo-on-light {
display: inline-block;
}So
Nicht so
Die Palette existiert zweimal: dunkel (Standard) und hell (nur nach explizitem Umschalten). Jeder Token hat in beiden Läufen dieselbe Rolle — Komponenten greifen nur auf die Variable zu, niemals auf einen Hexwert. Klick auf eine Zeile kopiert den Hexwert des dunklen Laufs.
Flächen
Text
Kontrast gemessen gegen den jeweiligen Seitengrund (WCAG 2.1, normale Textgröße braucht 4,5 : 1).
Harte Grenze: --color-faint ist nie Träger von Information. Im hellen Lauf reicht es selbst für große Schrift nicht — dort --color-muted nehmen.
Akzent — ITTK-Blau
Der dunkle Lauf ist heller als der helle: auf Navy leuchtet #439ddc, auf Weiß braucht es das tiefere #1f6fa8, um lesbar zu bleiben.
Achtung Weiß auf Blau: Weiß auf #439ddc erreicht nur 3,0 : 1 und auf #5ab4ec nur 2,4 : 1. Weißer Text gehört auf --color-accent-deep (5,4 : 1) — deshalb läuft der Primärbutton als Verlauf zum tiefen Blau und nicht umgekehrt. Für Text direkt auf hellem Blau --color-ink-on-accent verwenden.
Status & Linien
Status ist nie das einzige Signal: immer mit Wort oder Icon kombinieren. Grün und Rot sind keine Akzentfarben und tragen keine Marken-Aussage.
Orange-Welt
Belegt exakt dieselben vier Akzent-Slots — deshalb färbt .media-accent Beam, Ring, Glow, Icons und Buttons in einem Zug um. Weiß auf #f97316 erreicht nur 2,8 : 1: Fließtext bleibt --color-ink, Weiß nur auf großen Button-Flächen mit ≥ 18 px Bold.
DATEV-Landingpages
Nur innerhalb .datev-scope — die Partnerfarbe darf nie in die ITTK-Basis lecken. Lime auf Weiß hat 1,9 : 1: ausschließlich Fläche, Punkt oder Verlauf, niemals Text.
Zwei variable Schriften, klar getrennte Aufgaben: Plus Jakarta Sans für alles, was Haltung zeigt (Überschriften, Zahlen, Buttons), Inter für alles, was gelesen wird. Diese Seite ist in genau diesen Schriften gesetzt.
Plus Jakarta Sans
Variabel, Achse wght 200–800. Genutzt: 500 / 600 / 700 / 800. CSS-Variable --font-display, Tailwind font-display.
next/font/google · subsets: latin · display: swap
Inter
Variabel, Achse wght 100–900. Standard für body. CSS-Variable --font-sans, Tailwind font-sans.
Fallback-Kette: ui-sans-serif → system-ui → sans-serif
Skala — gemessen an der Live-Seite
| Rolle | Schrift | Größe | Gewicht | Zeilenhöhe | Laufweite | Einsatz |
|---|---|---|---|---|---|---|
| Hero H1 | Jakarta | 58,6 px | 800 | 1,08 | −0,021 em | eine pro Seite |
| Display L | Jakarta | 48 px | 800 | 1,08 | −0,025 em | Kennzahlen, Statement |
| Display M | Jakarta | 40 px | 800 | 1,20 | −0,025 em | Zähler, große Zahlen |
| H2 | Jakarta | 36 px | 700 | 1,12 | −0,025 em | Abschnittstitel (mobil 28 px) |
| H3 | Jakarta | 20 px | 700 | 1,40 | normal | Karten-Titel |
| H4 | Jakarta | 16 px | 600 | 1,50 | normal | Listen-Kopf, Feature-Titel |
| Lead | Inter | 18 px | 400 | 1,625 | normal | Einleitung unter H1/H2 |
| Body | Inter | 16 px | 400 | 1,625 | normal | Fließtext |
| Body S | Inter | 14 px | 400 / 600 | 1,625 | normal | Karten-Text, Buttons (600) |
| Micro | Inter | 12 px | 400 | 1,33 | normal | Fußnote, Meta |
| Eyebrow | Inter | 12 px | 600 | 1,33 | +0,16 em | Kapitälchen-Label über H2 |
| Label | Inter | 11 px | 700 | 1,50 | +0,14 em | Tabellenkopf, Chips |
Die komplette digitale Wertschöpfung aus einer Hand
Beratung, die auch Nein sagt
Unabhängige IT-Beratung für Unternehmen, die rechnen können: Glasfaser, Cloud, KI und Digital Marketing aus einer Hand — vendor-neutral, persönlich betreut, aus Düsseldorf.
Blau: IT · Orange: Marketing · Fusion: beides
1.240 Standorte · 4,8 ★ · +49 211 87972330
text-wrap:balance setzen, keine manuellen Umbrüche.font-variant-numeric:tabular-nums.Tiefe entsteht nicht durch schwarze Schatten, sondern durch Licht: eine Glasfläche, eine Verlaufskante, ein blauer Schein. Im hellen Lauf sind alle Leuchtwerte gedämpft — auf Weiß brennt Cyan sonst aus.
.glass · .border-beam
Glasfläche = --glass-bg + blur(12px) + --glass-border. Der Lichtpunkt läuft alle 5,5 s einmal um die Kante — höchstens ein Element pro Bildschirm, sonst wird es Jahrmarkt.
Blur-Budget: backdrop-filter nur für Navigation und Glaskarten. Große weichgezeichnete Flächen kosten Bildrate — Hintergrund-Glows sind statische Radial-Gradienten, kein Blur über halbe Seiten.
Vier Button-Varianten, eine Pille, eine Karte, ein Abschnittskopf. Alles andere ist Zusammensetzung. Klickflächen mindestens 48 px hoch, Fokus immer sichtbar.
variant
| Variante | Fläche | Text | Einsatz |
|---|---|---|---|
| primary | Verlauf cyan → accent-deep + --glow-btn | #fff | genau eine pro Bildschirm |
| secondary | 4 % Ink-Fläche + --color-line-strong | --color-ink | Zweitweg, gleichrangig lesbar |
| ghost | keine | --color-ink-soft | Inline-Weiterleitung |
| media | Verlauf #fb923c → #ea580c | #fff | nur in der Marketing-Welt |
Gemeinsam: min-height:3rem, border-radius:var(--radius-xl), 14 px / 600, Hover hebt 2 px, Lichtstreifen wandert einmal durch (nur primary und media). Reduced Motion: kein Heben, kein Streifen.
Rundum-Pille, 12 px / 500, Punkt oder Icon in Akzentfarbe. Steht über der H2 und benennt das Thema — nie länger als vier Wörter.
Fahre mich an
Hebt 6 px, Kante wird 45 % Akzent, --neon-shadow. Eine Bewegung, kein Skalieren, kein Farbwechsel der Fläche.
Titel in Jakarta 700
Beschreibung in Inter, maximal 62 Zeichen breit. Zentriert auf Landingpages, linksbündig in Fließseiten — pro Seite konsistent.
Jedes fokussierbare Element: outline:2px solid var(--color-accent), outline-offset:2px, border-radius:6px. Fokus wird nie entfernt, auch nicht auf Verlaufsflächen.
Inhaltsbreite max-width:72rem, Außenabstand 20 px mobil / 32 px ab 640 px. Abschnittsabstand 48–88 px, Abstände über gap im Flex/Grid — keine Einzelmargen, die kollabieren.
Container: mx-auto w-full max-w-6xl px-5 sm:px-8
Animation erklärt Zustand oder lenkt den Blick — sie dekoriert nicht. Alles läuft über transform und opacity, damit nichts das Layout neu berechnet.
| Token | Dauer | Kurve | Einsatz |
|---|---|---|---|
| --animate-marquee | 38 s | linear, endlos | Logo-Wall; pausiert bei Hover |
| --animate-float | 7 s | ease-in-out | schwebende Deko-Elemente |
| --animate-float-slow | 11 s | ease-in-out | zweite Ebene, versetzt |
| --animate-aurora | 16 s | ease-in-out | Hintergrund-Schein im Hero |
| --animate-beam | 5 s | ease-in-out | Lichtkante |
| --animate-shimmer | 2,2 s | linear | Verlaufstext-Sweep |
| --animate-pulse-ring | 2,6 s | ease-out | Live-Punkt, Statusring |
| --animate-spin-slow | 26 s | linear | Orbit-Grafiken |
| Micro-Interaktion | 200–250 ms | ease | Hover, Fokus, Farbwechsel |
@media (prefers-reduced-motion: reduce) stellt global alles ruhig: Dauern auf ~0, Iterationen auf 1, Beam und Hover-Hub aus, scroll-behavior:auto. Neue Animation heißt: neue Zeile in dieser Absicherung.
Bilder werden auf das Farbsystem hin produziert, nicht nachträglich zurechtgetönt. Generierte Motive folgen einem festen Prompt-Rahmen; Menschen folgen einer harten Regel.
Navy-Grundwerte #060912 bis #16213c, Akzentlicht #439DDC, kühles technisches Licht, viel Raum, ruhige Komposition.
Immer negativ: purple, violet, pink, magenta, Neon-Cyberpunk, Farbfeuerwerk, Stock-Lächeln.
Ausgabe als WebP, sichtbare Kompression ist tabu — Bilder tragen den Premium-Eindruck mit.
Kein KI-generiertes Gesicht bei benannten Menschen. Erlaubt sind Zuschnitt, Freistellen, Hintergrundtausch — das Gesicht bleibt unverändert und wird danach visuell geprüft.
Teamfotos: gleiche Lichtrichtung, gleicher Zuschnitt, gleicher Hintergrundwert. Keine gemischten Studios auf einer Seite.
saturate(1.06) contrast(1.03) hue-rotate(6deg)
Plus blauer Radial-Wash im Modus soft-light. Fotos wirken tiefer, ohne Farbstich.
saturate(0.88) sepia(0.32) hue-rotate(−8deg) brightness(1.03)
Plus warmer Radial-Wash. Gleicher Aufbau wie blau — nur die Temperatur dreht.
Beide Blöcke sind der Live-Stand. Der erste läuft in jedem Projekt, der zweite ist die Tailwind-v4-Quelle der Website selbst.
:root {
/* Flächen */
--color-bg: #060912;
--color-bg-soft: #0a0f1d;
--color-surface: #0d1426;
--color-surface-2: #111a30;
--color-elevated: #16213c;
/* Text */
--color-ink: #eaf1fb;
--color-ink-soft: #b7c2d6;
--color-muted: #8190a8;
--color-faint: #5a6680;
/* Akzent (ITTK-Blau) */
--color-accent: #439ddc;
--color-accent-strong: #2c8bc9;
--color-accent-deep: #1f6fa8;
--color-cyan: #5ab4ec;
--color-ink-on-accent: #04121f;
/* Status */
--color-success: #34d399;
--color-danger: #f87171;
/* Linien */
--color-line: rgba(255, 255, 255, 0.08);
--color-line-strong: rgba(255, 255, 255, 0.14);
/* Schrift */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-display: "Plus Jakarta Sans", "Inter", sans-serif;
/* Radien */
--radius-xl: 1.25rem;
--radius-2xl: 1.75rem;
}
:root[data-theme="light"] {
--color-bg: #f4f7fc;
--color-bg-soft: #ecf1f8;
--color-surface: #ffffff;
--color-surface-2: #f1f5fb;
--color-elevated: #ffffff;
--color-ink: #0b1426;
--color-ink-soft: #33415a;
--color-muted: #5a6a85;
--color-faint: #93a0b6;
--color-accent: #1f6fa8;
--color-accent-strong: #155182;
--color-accent-deep: #0e3e66;
--color-cyan: #2c7cb8;
--color-ink-on-accent: #ffffff;
--color-success: #059669;
--color-danger: #dc2626;
--color-line: rgba(11, 20, 38, 0.10);
--color-line-strong: rgba(11, 20, 38, 0.18);
}
@import "tailwindcss";
@theme {
--color-bg: #060912;
--color-bg-soft: #0a0f1d;
--color-surface: #0d1426;
--color-surface-2: #111a30;
--color-elevated: #16213c;
--color-ink: #eaf1fb;
--color-ink-soft: #b7c2d6;
--color-muted: #8190a8;
--color-faint: #5a6680;
--color-accent: #439ddc;
--color-accent-strong: #2c8bc9;
--color-accent-deep: #1f6fa8;
--color-cyan: #5ab4ec;
--color-ink-on-accent: #04121f;
--color-success: #34d399;
--color-danger: #f87171;
--color-line: rgba(255, 255, 255, 0.08);
--color-line-strong: rgba(255, 255, 255, 0.14);
--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
--font-display: var(--font-jakarta), var(--font-inter), sans-serif;
--radius-xl: 1.25rem;
--radius-2xl: 1.75rem;
--animate-marquee: marquee 38s linear infinite;
--animate-float: float 7s ease-in-out infinite;
--animate-aurora: aurora 16s ease-in-out infinite;
--animate-beam: beam 5s ease-in-out infinite;
}
/* Schriften: next/font/google, kein CDN-Link */
/* Inter({subsets:["latin"],variable:"--font-inter",display:"swap"}) */
/* Plus_Jakarta_Sans({subsets:["latin"],weight:["500","600","700","800"],
variable:"--font-jakarta",display:"swap"}) */