STUDIO 404 / ELEMENTS LIBRARY
One page.
All building blocks.
Diese Seite ist bewusst kein fertiger Kundeninhalt, sondern unser visueller Werkzeugkasten. Hier testen wir Typografie, Buttons, Flächen, Karten, Bilder, Interaktionen, Pricing, Medien, Social Proof und Utility-Elemente miteinander, bevor sie auf echten Seiten eingesetzt werden.
ALL ELEMENTS / QUICK NAV
Alle Elemente.
48 Bereiche als visuelle Referenz. Klick auf einen Eintrag und direkt zum Baustein springen.
01 / TYPE + LABELS
Typografie & Eyebrows.
Große Headlines, lesbarer Fließtext und technische Labels nur dort, wo sie dem Layout wirklich helfen.
Eine klare Überschrift für echte Inhalte.
Studio 404 verbindet Design und Entwicklung. Der normale Text bleibt ruhig und lesbar, während kleine technische Labels die visuelle Sprache tragen.
02 / ACTIONS
Buttons, Links & Zustände.
Eine Designsprache, aber unterschiedliche Hierarchien, Größen, Zustände und Kombinationen. So sieht man sofort, welche Aktion primär ist und welche nur unterstützt.
Die Varianten bleiben im selben Radius-, Typografie- und Spacing-System. Semantische Farben werden nur für echte Zustände wie Erfolg, Warnung oder Fehler verwendet.
03 / SURFACES
Container & Flächen.
Der Großteil der Website bleibt hell. Dunkel und Lime werden als bewusster Kontrast eingesetzt.
Clean surface.
Für Inhalte, Text und ruhige Cards.
Subtle grouping.
Leicht abgesetzt, ohne direkt nach Karte auszusehen.
High signal.
Für einen einzelnen wichtigen Abschnitt oder CTA.
Contrast mode.
Technisch, aber gezielt statt als Standard.
04 / CARDS + ICON BOXES
Cards mit unterschiedlicher Gewichtung.
Von einfacher Inhaltskarte bis zur hervorgehobenen Produkt- oder Service-Card.
Simple card
Headline, kurzer Text und ein klarer nächster Schritt.
Mehr erfahren →Accent card
Für einen Service, der im Raster bewusst auffallen soll.
Projekt ansehen →Dark card
Für Produkte, Tools und technische Inhalte.
Tool öffnen ↗Border only
Wenn eine Card nicht wie eine Box schreien soll.
Details →05 / IMAGE TREATMENT
Bilder müssen nicht immer gleich aussehen.
Großflächig, als Split-Layout, als Offset-Card oder als kleine Galerie.
Bild und Inhalt als gemeinsame Komposition.
Gut für About, Cases, Services und redaktionelle Abschnitte.
Mehr zum Ansatz →Auch für den normalen Gutenberg-Bildblock gibt es jetzt die Stile „404 Frame“, „404 Offset“ und „404 Mono“.
06 / LISTS + BADGES
Listen, Tags & Status.
- Responsive gedacht
- Gutenberg-kompatibel
- Klare Hierarchie
- Keine unnötigen Effekte
- 01Understand
- 02Design
- 03Build
- 04Improve
07 / INTERACTION
Tabs & Akkordeons.
Gleiche Designsprache, aber verschiedene Darstellungen für Produktinfos, FAQs, technische Inhalte oder kompakte Navigationssituationen.
Websites, die nicht gegen ihr CMS kämpfen.
Design, Gutenberg, Performance und individuelle Entwicklung als ein System.
Weniger Copy & Paste.
n8n, APIs und Webhooks verbinden Abläufe, die heute unnötig manuell sind.
KI mit Kontext und Aufgabe.
RAG, Tools und Analytics statt eines Chatfensters, das nur nett klingt.
Produktinfos kompakt gruppieren.
Pill Tabs funktionieren gut in Cards, Produktseiten oder kleineren Content-Bereichen.
Technische Details.
Mehr Inhalt, ohne die komplette Seite zu verlängern.
Kurze Antworten.
Für wenige, klar abgegrenzte Fragen.
Mehr visuelle Gewichtung.
Für Prozesse oder Bereiche, in denen die Tabs selbst wie kleine Karten funktionieren sollen.
Build.
Die aktive Karte übernimmt Lime, während die Inhalte ruhig bleiben.
Improve.
Gut für drei bis vier klar benannte Schritte.
Was ist in einem Projekt enthalten?+
Das hängt vom Scope ab. Diese Variante eignet sich für FAQs, Leistungsdetails oder technische Erklärungen.
Kann der Inhalt im Editor gepflegt werden?+
Ja. Produktiv werden solche Komponenten als Block-Stile, Patterns oder kleine dynamische Blöcke umgesetzt.
Wie sieht das mobil aus?+
Große Touch-Ziele, native Details/Summary-Elemente und kontrollierter Umbruch.
Performance zuerst?01
Design und Technik werden gemeinsam gedacht, damit Effekte nicht gegen Ladezeit arbeiten.
Kann das auch sehr reduziert sein?02
Ja. Die Minimalvariante besteht fast nur aus Typografie und Trennlinien.
Und für lange FAQ-Seiten?03
Dann ist die nummerierte Hierarchie oft leichter zu scannen.
Dark FAQ / Product Detail+
Für dunkle Produktbereiche, technische Dokumentation oder einen starken Kontrastabschnitt.
Mehrere Ebenen?+
Die Darstellung bleibt bewusst flach. Für echte Navigation wären Tabs oder eine Sidebar besser.
08 / NUMBERS + PROGRESS
Zahlen mit Kontext.
09 / PROCESS + TIMELINE
Abläufe sichtbar machen.
Verstehen.
Problem, Ziel, Bestand und Rahmen klären.
Entscheiden.
Struktur, Designrichtung und technische Basis festlegen.
Umsetzen.
In kleinen überprüfbaren Schritten bauen und testen.
Weiterentwickeln.
Nach Launch anhand echter Nutzung verbessern.
10 / QUOTES + SOCIAL PROOF
Stimmen & Aussagen.
„Die beste technische Lösung ist die, die sich für den Nutzer nicht technisch anfühlt.“
„Start with the problem. Not the solution.“
11 / FORMS
Formular-Bausteine.
Als Grundlage für Kontakt-Wizard, Newsletter, Filter und kleinere Tools.
12 / TABLE + NOTICE
Daten & Hinweise.
| Element | Status | Use case |
|---|---|---|
| Buttons | READY | CTA / Navigation |
| Tabs | READY | Content switching |
| Wizard | NEXT | Contact flow |
Neutrale Information mit wenig visuellem Gewicht.
Erfolgszustand oder abgeschlossene Aktion.
Technischer Hinweis, wenn der dunkle Stil bewusst Sinn ergibt.
13 / PRICING
Pricing Tables & Pakete.
Preise können als klassische Pakete, kompakter Vergleich oder als einzelne hervorgehobene Leistung dargestellt werden.
Essential
Für kleine Websites und klar abgegrenzte Einstiege.
- Design-System Basis
- Bis 5 Inhaltsseiten
- Responsive Setup
- Basis Performance
Business
Mehr Struktur, individuelle Komponenten und Integrationen.
- Individuelles Layout
- Custom Gutenberg Patterns
- Formulare & Tracking
- API / Automation ready
Studio
Für individuelle Plattformen, Tools, AI und komplexe Prozesse.
- Custom Development
- Automationen & APIs
- AI / RAG / Tools
- Roadmap & Support
Launch
Konzept, Design und Build für einen fokussierten Auftritt.
Workflow Sprint
Einen konkreten manuellen Prozess analysieren und automatisieren.
Website Check+
Technischer Review mit priorisierten Findings und Gespräch.
Prototype Sprint
Wenn zuerst eine belastbare kleine Version entstehen soll, bevor ein größeres Projekt entschieden wird.
- Kickoff + Scope
- Clickable / working prototype
- Review + next-step roadmap
| Feature | Essential | Business | Studio |
|---|---|---|---|
| Responsive Design | ✓ | ✓ | ✓ |
| Custom Patterns | — | ✓ | ✓ |
| Automation / API | — | Optional | ✓ |
| AI / RAG | — | Optional | ✓ |
14 / MEDIA + MOTION
Carousel, Before/After & Gallery.
Medien brauchen mehr als ein einzelnes Bild: Slider, Vergleich, horizontale Galerien und leichte Bewegung gehören in den Werkzeugkasten.
Image carousel.
15 / FLIP + MODAL
Interaktive Karten & Dialoge.
Für zusätzliche Details, Team-Cards, Feature-Erklärungen oder fokussierte Aktionen – immer touchfähig und ohne Hover-Zwang.
Details nur dann zeigen, wenn sie gebraucht werden.
Geeignet für Hinweise, Medien, Formulare oder zusätzliche Produktinformationen.
16 / PEOPLE + TRUST
Personen, Logos, Ratings & Testimonials.
Social Proof kann ruhig und hochwertig sein. Nicht jede Referenz braucht fünf Sterne und eine riesige Sprechblase.
Direkter Ansprechpartner.
Foto oder Initialen, Rolle, kurze Beschreibung und direkte Kontaktaktion.
Kontakt aufnehmen →„Schnell verstanden, sauber umgesetzt und ohne unnötiges Agenturtheater.“
„Die technische Lösung merkt man im Alltag daran, dass sie einfach funktioniert.“
„Komplex im Hintergrund. Einfach in der Bedienung.“
17 / CONTENT CARDS
Posts, Projekte & redaktionelle Teaser.
Ein wiederverwendbares Card-System für Blog, Cases, Lab und Produkte statt für jeden Bereich ein neues Raster.
Warum gute Websites weniger erklären müssen.
Textfokussierter Beitrag ohne Bildzwang.
Artikel lesen →18 / UTILITIES
Breadcrumbs, Search, Pagination, Code & Social.
Die kleinen Elemente fallen erst auf, wenn sie fehlen. Deshalb gehören sie ebenfalls in die visuelle Referenz.
<section class="studio404">
Build something useful.
</section>19 / STATUS + COUNTDOWN
Status, Countdown & kleine Live-Elemente.
Für Launches, Verfügbarkeit, Events, Wartungsfenster oder zeitlich begrenzte Aktionen.
Available for new projects
Response usually within 24h
Germany / CET/CEST
20 / LAYOUT
Columns, Divider, Spacer & Sticky.
Layout-Helfer sind unspektakulär, aber entscheidend für Rhythmus und Lesbarkeit.
Dieser Bereich simuliert längeren Inhalt. Auf größeren Screens bleibt die linke Info innerhalb dieses Abschnitts sichtbar.
Sticky Content sollte sparsam eingesetzt werden und mobil wieder normal in den Dokumentfluss zurückkehren.
21 / ADVANCED INTERACTION
Vertical Tabs, Toggle, Tooltip & Popover.
Mehr Information auf wenig Platz – aber immer mit klarer Bedienung per Klick oder Tastatur.
Eine visuelle Sprache.
Typografie, Abstände und Komponenten werden als System gedacht.
Sauber umgesetzt.
Gutenberg, Custom Code und Integrationen ohne unnötigen Ballast.
Nach dem Launch weiterdenken.
Monitoring, Analytics und Optimierung gehören zum Produkt.
Toggle / kompakter als FAQ +
Ideal für technische Details oder optionale Zusatzinformationen.
Popover öffnen →
Für kurze Aktionen, Erläuterungen oder Kontextmenüs.
22 / GALLERY + LIGHTBOX
Gallery, Lightbox & Hotspots.
Für Cases, Produkte und erklärungsbedürftige Screenshots brauchen Bilder auch Interaktion.
23 / RICH MEDIA
Video, Audio & Motion.
Native Medien, eigene Controls und Motion-Varianten – ohne externe Demo-Abhängigkeit.
Case Video / Showreel.
Native Controls als Basis; für YouTube/Vimeo kann später Consent davorliegen.
Statement, Podcast oder Voice.
Auch Audio bekommt einen definierten visuellen Rahmen statt Browser-Zufall.
Leichte Motion statt Effekt-Overkill.
Bewegung erklärt etwas oder führt den Blick – und respektiert Reduced Motion.
25 / COUNTERS
Counter Boxes & Circles.
Für Kennzahlen, Fortschritt und kompakte Fakten – mit Kontext statt nur großer Zahl.
Beispielzähler mit Label.
Prozessanteil automatisiert.
26 / PROMO + LEAD
Banner, Promo Box & Newsletter.
Marketing-Elemente dürfen auffallen, ohne die ganze Seite in einen Funnel zu verwandeln.
Ein Projekt-Slot im November.
Für Relaunch, Automation oder einen neuen digitalen Service.
Projekt anfragen →27 / DYNAMIC CONTENT
Post Slider, Related Content & Taxonomy.
Für Blog, Cases und Lab-Inhalte brauchen wir auch dynamische Listen und Filterzustände.
28 / SCROLL UX
Reading Progress, Back to top & Sticky actions.
Kleine Helfer für lange Seiten und Dokumentationen.
30 / LOCATION
Map, Location & Opening info.
Eine Kartenintegration kann später echte Map-Daten laden. Hier testen wir Layout und Informationshierarchie ohne externen Dienst.
31 / ADVANCED FORMS
Validation, Upload, Consent & Spam protection.
Formulare brauchen neben dem Happy Path auch Fehler-, Upload- und Datenschutz-Zustände.
32 / UI STATES
Loading, Empty, Success & Error.
Produkte, Tools und Formulare brauchen definierte Zustände, nicht nur den perfekten Normalfall.
Daten werden geladen …
Noch nichts hier.
Ein guter Empty State erklärt den nächsten Schritt.
Erledigt.
Die Anfrage wurde erfolgreich verarbeitet.
Das hat nicht geklappt.
Klare Meldung, kein technischer Stacktrace.
33 / HERO PATTERNS
Hero-Varianten für unterschiedliche Aufgaben.
Nicht jede Seite braucht denselben großen Einstieg. Hier liegen drei Grundtypen als Referenz.
Große Aussage.
Wenig Ablenkung.
Für About, Cases und starke Inhaltsseiten.
Mehr erfahren →Bild + klare Conversion.
Für Landingpages, Produkte und Services.
Projekt starten →404 Sitecheck.
Produkt-Hero mit Status, Feature-Info und direkter Aktion.
Tool öffnen ↗34 / SLIDERS
Content-, Testimonial- & Hero-Slider.
Mehrere Slider-Typen mit denselben zugänglichen Controls statt drei unterschiedlichen Plugins.
Website als digitales Produkt.
Großer visueller Slide für Projekte oder Services.
„Komplex im Hintergrund. Einfach in der Bedienung.“
Demo Client / Automation
35 / MASONRY + FILTER
Portfolio-, Blog- & Media-Filter.
Ein flexibles Raster für Cases und Lab-Inhalte inklusive lokalem Filterzustand.
WEBEditorial website.
Lead → CRM → Teams.
Prozesskarte ohne Bild.
404 Chat.
RAG + Tools + Analytics.
Fast by design.
Document intelligence.
Interner Prototyp.
Systems talking.
Webhooks und Workflows.
36 / DATA VISUALIZATION
Charts & Diagramme.
Für Analytics, Reports und Produktdaten: ruhig, klar und interaktiv. Hover oder Fokus zeigt den konkreten Wert.
Leads
Performance
Traffic mix
Werte auf dieser Demo sind illustrativ. Die Interaktion ist echt; für produktive Charts würden die Werte aus Analytics, APIs oder WordPress-Daten gebunden.
37 / ADVANCED TABLES
Sortierbare Tabellen & Specs.
Für technische Daten, Vergleiche und Admin-nahe Frontends brauchen Tabellen mehr als nur Zeilen.
| 404 Chat | AI | Beta | 88 |
| Sitecheck | Tool | Live | 94 |
| Theme | WordPress | Build | 81 |
| Automation Lab | n8n | Lab | 76 |
38 / FORM WIZARD
Mehrstufige Anfrage statt Formularwand.
Genau die Richtung für unsere Kontaktseite: erst Anliegen, dann Kontext, dann Kontaktdaten.
39 / ICONS + PROGRESS
Icons, Icon Lists & Progress-Varianten.
Kleine Symbole sollen Teil des Systems sein – nicht ein zufälliger Mix aus fünf Icon-Paketen.
40 / QR + DOWNLOAD
QR-Code, Download CTA & Ressourcen.
Für Datenblätter, PDFs, Apps, Events oder den Sprung vom Printprodukt zur Website.
41 / MOTION + REVEAL
Reveal, Stagger & leichte Scroll-Effekte.
Animation als Akzent. Kein Element muss durchs Bild fliegen, nur weil es technisch möglich ist.
Bei prefers-reduced-motion werden die Animationen abgeschaltet.
42 / COMMERCE
Produktkarten, Preis, Menge & Cart State.
Kein Shop-Fokus für Studio 404, aber das Theme soll auch Produkt-/WooCommerce-nahe Layouts sauber tragen können.
Studio 404 Tee
Heavy cotton · black / lime
29,00 €Website Check+
Bezahlbarer Service als Produktkarte mit klarer Leistung statt klassischem Shopartikel.
- Technischer Review
- Priorisierte Findings
- 30 Min. Call
43 / EMBEDS
Externe Inhalte mit sauberem Consent-State.
Video, Maps, Social Posts oder externe Widgets sollten nicht einfach ungefragt laden.
44 / NOTIFICATIONS
Announcement Bar, Toast & Consent.
Hinweise brauchen unterschiedliche Gewichtung und Zustände: Erfolg, Information, Warnung und Fehler.
Die Änderung wurde übernommen.
Aktion erfolgreich abgeschlossen.
Neutraler Hinweis mit Zusatzkontext.
Etwas braucht Aufmerksamkeit.
Aktion konnte nicht abgeschlossen werden.
45 / LANGUAGE
Sprachumschalter & mehrsprachige Inhalte.
Für Deutsch/Englisch sollte der Switch klein bleiben und trotzdem eindeutig funktionieren.
Eine Website, die verstanden wird.
Der Inhalt wechselt hier nur lokal als Design-Demo. Produktiv übernimmt das später die Mehrsprachen-Lösung von WordPress.
Mehr erfahren →46 / EVENTS + DATES
Termine, Events & Kalenderkarten.
Für Workshops, Releases, Veranstaltungen oder buchbare Zeitfenster.
47 / DOCUMENTS
Dokumente, Specs & Resource Cards.
Downloads brauchen Titel, Typ, Metadaten und eine klare Aktion – nicht nur einen nackten Dateilink.
48 / ELEMENT MAP
Was wird Block, Pattern oder Core Style?
Nicht jedes Avada-artige Element braucht bei uns einen eigenen Builder. Viele Dinge lassen sich sauber mit Gutenberg-Core-Blöcken plus Styles lösen.
| Elementtyp | Studio-404-Ansatz | Status |
|---|---|---|
| Buttons, Bilder, Listen, Tabellen, Social | Core Block + eigene Styles | CORE |
| Hero, CTA, Pricing, Team, Post Cards | Patterns / Variationen | PATTERN |
| Tabs, Modal, Before/After, Carousel | Interaktive Theme-Komponente | INTERACTIVE |
| Kontakt-Wizard, Sitecheck, Chat, dynamische Daten | Plugin / eigener Block | PLUGIN |
Keep what works.
Delete what does not.
Diese Seite ist die gemeinsame Referenz für das Theme. Neue Komponenten sollten zuerst hier funktionieren, bevor wir sie auf produktiven Seiten verteilen.
Projekt besprechen →
29 / SOCIAL
Share, Follow & Profile Links.
Social Elemente im Studio-404-Stil statt bunter Fremdmarken-Buttons.