Genial verrückt.
Verlässlich gut.
Die familiengeführte Webagentur aus dem Saarland, die das Know-how einer großen Werbeagentur mit der Nähe, Flexibilität und Verspieltheit eines eingespielten Teams verbindet. Drei Senior-Köpfe, ein KI-gestütztes Studio — und ein Maskottchen, das jeden Hut trägt.
Der geniale Tüftler,
mit Augenzwinkern.
Im Kern der Schöpfer (wir bauen & gestalten), gewürzt mit dem Schelm (das Verrückte, Jim Panse, Humor) und geerdet durch den Weisen (15 Jahre Substanz, erklären statt blenden). Nie der abgehobene Kreative, nie der trockene Techniker.
Exzellenz ohne Allüren
Spitzenarbeit auf Augenhöhe.
Mut zur Idee
Wir schlagen auch das Unerwartete vor.
Verlässlichkeit
Familiär heißt: wir bleiben, wir haften, wir sind erreichbar.
Echtheit
Kein Marketing-Sprech — Menschen, die man kennt.
Mensch entscheidet, Maschine liefert
Senior-Köpfe, KI-Hände.
„Genial verrückt.
Verlässlich gut."
Wo wir stehen
Keine Mitte, kein „kommt drauf an". Wir stehen klar auf einer Seite — und zwar hier:
Wie wir sprechen
Jim macht's vor — jede Rolle in ihrer Stimme. Standard ist Du; das Sie-Beispiel zeigt den seriösen Modus.
Die Unterschrift.
Der schwarz-weiße Affe ist der Anker: stabil, professionell, flach. Überall gleich — Briefkopf, Rechnung, Footer. Er funktioniert auf Hell und Dunkel und bleibt bewusst getrennt vom farbigen Maskottchen.
✓ Richtig
- Die echte Ein-Farb-SVG mit erhaltenen Innen-Aussparungen (Gesicht, Brille) nutzen.
- Schutzraum von ½ Kopfhöhe ringsum einhalten.
- Laute Wortmarke fürs Marketing, ruhige Wortmarke (Souses) für formale Dokumente.
✕ Falsch
- Kein invertiertes Schwarz-PNG für die Weiß-Version — die Aussparungen brechen zur Silhouette zusammen.
- Wortmarke nie überlappen oder stapeln; Lesbarkeit vor Effekt.
- Keine Farbe aufs Logo — Farbe lebt bei Jim, nicht bei der Marke.
Schwarz-weißer Anker,
Teal-Signatur, scharfe Akzente.
Rund 60 % Schwarz-Weiß (Papier + Tinte), 30 % Panse-Teal (Buttons, Links, Wabe, Highlights), 10 % Akzente — Energie-Pops, vor allem bei Jim. Nie mehrere Akzente als große Flächen in einer Einzel-Illustration.
Panse-Teal #14B8A6 ist als kleiner Text auf Weiß zu hell (WCAG AA). Für Flächen und Buttons nutzen (mit Tinte-Text); für Teal-Text und Links Teal Dunkel #0F6E56.
Vier Stimmen.
Eine charaktervolle Display-Schrift, ein ruhiges Arbeitspferd für Text, Mono für den technischen Augenzwinkerer — und Souses für das Logo.
Bezugsquellen
Formatierungs-Beispiele
npm run buildRhythmus & Radien.
Abstände folgen einer 4er-Skala — das hält Layouts ruhig und konsistent. Rundungen kommen aus einer festen Radius-Skala; nichts wird frei gewählt.
Faustregel: kleine Abstände (4–12) für Elemente, die zusammengehören; große (32–96) zwischen Sektionen. Sektions-Innenabstand: 80–96px vertikal.
Inputs & kleine Karten md, große Karten/Container lg–xl, Buttons & Chips pill. Icons/Code-Tags sm.
Ein Set. Konsequent.
Primärset: Uicons (Flaticon) — über unsere Lizenz unbegrenzt nutzbar, 50.000+ Icons als eine konsistente Familie. Standard ist Rounded (Linie), gefüllte Fälle über Solid/Bold derselben Familie. Icons einfarbig in Tinte, Farbe nur sparsam (60/30/10). Nie Sets mischen — fehlt ein Motiv, bauen wir es im selben Stil nach (Mensch oder KI, mit Bestehenden als Referenz).
Auswahl von 50 Beispiel-Icons im Rounded-Stil, kategorisch gemischt — als Vorschau auf Bauweise und Strichführung:
✓ Richtig
- Ein Set (Uicons Rounded) durchziehen; gefüllt nur aus derselben Familie.
- Einheitliche Strichstärke, gleiches Grid, optisch ausgleichen.
- Einfarbig Tinte; Teal/Akzent bewusst und sparsam.
✕ Falsch
- Icons aus verschiedenen Quellen mischen — fällt sofort als Stilbruch auf.
- Mehrfarbige/Duotone-Icons als Standard (nimmt die Farbsteuerung aus der Hand).
- Strichstärken munter mischen oder Icons unscharf skalieren.
Eine Wabe, ein Affe.
Der Verbund ist das Team.
Das Sechseck ist unser verbindendes Element: eine Wabe = ein Affe, der Verbund = das Team; zugleich Struktur, Technik, Effizienz. Es lebt als Maske für Portraits, als Rahmen für Icons, als Pattern und als Baustein für Layout-Module.
Die Wabe wird als Maske über das Bild gelegt — kein Rahmen drumherum, das Motiv bekommt die Wabenform.
Icon in der Wabe, mit Hover. Für Feature-Raster, Leistungen, Navigation.
Waben-Pattern als Flächen-Textur für Hero-Hintergründe, Trennstrecken oder Akzentflächen — in Tinte, Teal und Grün.
Die Linie läuft von beiden Seiten auf eine kleine Waben-Klammer zu — die Überschrift steht frei in der Mitte.
Gleiche Struktur — statt Text steht ein Icon in der Linienfarbe frei in der Mitte.
Bausteine aus der Wabe.
Wiederverwendbare Module — reine CSS-Bausteine, alle aus Farbsystem, Abständen, Rundungen und der Wabe abgeleitet. Konsistent über jedes Projekt.
Kommt drauf an, was du brauchst — wir machen dir ein klares Angebot mit fixem Rahmen, keine Überraschungen.
In einem kurzen Erstgespräch klären wir Umfang und Ziele, danach bekommst du eine transparente Aufstellung.
Eine typische Website ist in 4–8 Wochen live. Wir planen in klaren Phasen, du weißt immer, wo wir stehen.
Individuell anpassbar — ein Standardpaket umfasst meist:
- Konzeption, UX-Wireframes und individuelles Webdesign
- WordPress-Entwicklung mit GeneratePress und ACF
- Mehrsprachigkeit via WPML sowie SEO-Grundlagen
- Hosting-Setup, Backups und laufende Wartung
Klar — Updates, Backups, Monitoring. Läuft, während ihr schlaft. Bei Fragen sind wir persönlich erreichbar.
- One-Pager Website
- Mobil-optimiert
- Kontaktformular
- SSL & Basis-SEO
- Bis 8 Unterseiten
- Individuelles Design
- Blog & CMS
- SEO-Paket
- 3 Monate Support
- Maßgeschneidert
- Shop / Web-App
- Schnittstellen & API
- Performance-Tuning
- Wartung & Monitoring
Embla Carousel — unser Standard.
Embla Carousel ist die offizielle Slider-Bibliothek von Talented Monkeys und gilt als Standard für alle Slider-Implementierungen. Eingebunden via CDN: cdn.jsdelivr.net/npm/embla-carousel@8.6.0.
Live-Vorschau des Jim Panse Hero-Sliders. Alle sechs Slides, Dot-Navigation, Autoplay mit Progressbar, Play/Pause.
| # | Option | TM-Standard | Beschreibung |
|---|---|---|---|
| 1 | loop | true | Endlos-Schleife. |
| 2 | watchDrag | isTouch | Drag nur auf Touch-Geräten. |
| 3 | align | "start" | Standard-Ausrichtung. |
| # | Element | Klasse | Beschreibung |
|---|---|---|---|
| 1 | Slide-Index | .slide-role | Format 01 / 06 · Kategorie. Mono-Font. |
| 2 | Slide-Kategorie | .slide-role | Unterzeile nach dem Punkt. |
| 3 | Tags | .slide-tag | Pill-Tags oben rechts. Auf Mobile ausgeblendet. |
| 4 | Überschrift | .slide-name | Bricolage Grotesque 800, clamp(). |
| 5 | Highlighted-Zeile | .slide-name span | Zweite Zeile in Slide-Akzentfarbe. |
| 6 | Inhalt | .slide-quote | Kernaussage, border-left Akzent. |
| 7 | Primärbutton | .slide-btn-primary | Pill, Akzentfarbe gefüllt. |
| 8 | Ghost-Button | .slide-btn-ghost | Transparenter Pill mit Akzent-Border. |
| 9 | Play/Pause | .slide-playpause | Unten rechts, opacity 32%. |
| 10 | Slide-Bild | .slide-hex-img / .slide-bg-img | 3 Varianten: Pattern / Hexagon / Vollbild. |
| 11 | Zurück | #btn-prev | SVG-Linienpfeil, bündig mit Border-Radius. |
| 12 | Dots | .embla__dots | Hexradio-Dots, mobile ausgeblendet. |
| 13 | Weiter | #btn-next | SVG-Linienpfeil rechts. |
| 14 | Fortschrittsleiste | .slide-progress__bar | 3px flush am unteren Rand, rAF-animiert. |
Bewegung mit System.
Alle Übergänge folgen einem einheitlichen Timing-Vokabular — abgeleitet aus dem Material-Motion-Prinzip. Schnelle Aktionen fühlen sich direkt an, langsame sind bedeutungsvoll. Nie dekorativ ohne Funktion.
Icons, Opacity, Hover-Fills. Sofortige Reaktion.
Buttons, Cards, Borders, Farben. Standard-Interaktion.
Modals, Overlays, große Layoutwechsel.
Slider-Bilder, Card-Hover-Lift. Federnder Eintritt.
Elemente, die ins Bild gleiten. Weicher Einstieg.
Elemente, die das Bild verlassen. Schneller Abgang.
Keyframe-Animationen für Eintritte, Loader und Waben-Akzente. Alle via CSS-Klasse oder animation-Property abrufbar.
Jim Panse — der vierte Affe.
Das Gesicht des KI-gestützten Studios und die Verkörperung des gebündelten Talents der drei Gründer — der „vierte Affe“: die vielen Hände, während die Gründer die Köpfe sind. Wo das Logo die seriöse Unterschrift ist, ist Jim die verspielte, farbige Bühne.
Unveränderliche DNA
Diese Elemente ändern sich nie — sie sind der Wiedererkennungswert über alle Rollen.
✓ Richtig
- Die rechteckige Brille bleibt — an das Logo angeglichen, die Brücke zwischen Marke und Maskottchen.
- Jim in jeder Rolle barfuß, auch im Anzug — das sagt „Affe, kein Mensch im Kostüm“.
- Ein Akzent pro Einzel-Illustration; Farbe nur über Kostüm & Requisit.
✕ Falsch
- Nie die Brille weglassen, durch eine Sonnenbrille ersetzen oder das Gesicht hinter Helm/Maske verstecken.
- Keine Baby-/zu niedlichen Proportionen; keine aggressive oder gemeine Mimik.
- Nicht das Logo-Emblem auf jede Rolle setzen — das gehört dem Helden.
Eine Familie. Sieben Talente.
Derselbe Jim, sieben Berufe. Die Rollenfarbe kommt nur über Kostüm und Requisit — genau ein Akzent pro Rolle. Klick auf eine Persona für ihren Charakter, ihre Stimme und ihren Einsatz.
Die ganze Crew.
In Team-Szenen tritt die Besetzung gemeinsam auf — der natürliche Ort für mehrere Akzente. Jede Persona bleibt über Kostüm, Requisit und Pose erkennbar.
Entwickler · Designer · Visionär · Marketing · DevOp · Projektmanager · Held — barfuß, Brille auf, Bleistift hinterm Ohr.
Seriös UND verspielt — strukturell gelöst.
Logo und Maskottchen sind getrennt, damit sich die Marke nie zwischen beidem zerreißt. Die Brücke ist Jims Brille, an das Logo angeglichen.
Das Logo
Stabil, professionell, schwarz-weiß, flach. Überall gleich. Formale Dokumente: ruhige Wortmarke, S/W + Teal-Akzent, Wabe dezent — kein lautes Maskottchen.
Jim Panse
Flexibel, verspielt, farbig. Darf springen, Akzente tragen, Geschichten erzählen. Lebt in Marketing, Website-Heros, Social und Erklärgrafiken.