01 · Überblick
Software mit Software verkaufen
Observability-Tools kaufen Leute, die Ihr Produkt am p95 Ihrer Marketing-Site messen. Signalforms Site ist deshalb keine Seite über ein Dashboard — sie enthält eines. Das Hero-Panel ist ein von Hand gebautes SVG: Browser-Chrome, ein Durchsatz-Chart, eine Fehlerraten-Sparkline, eine p95-Latenzanzeige und ein Log-Tail, das scrollt. Kein Screenshot, kein Stock-Render, kein Produktvideo.
Diese Entscheidung zieht Kreise. Ohne Fotografie ist das gesamte Seitengewicht Markup, und die Bildsprache muss aus der Struktur kommen — ein 14-Pixel-Radius, ein Violett, eine sehr dunkle Neutralrampe und viel Zurückhaltung dabei, wann überhaupt etwas glüht.
02 · Die Idee
In Millisekunden antworten, es in Millisekunden sagen
Das Produktversprechen lautet jedes Signal, eine Oberfläche, null Rätselraten. Die Site musste das vorführen statt behaupten — die Oberfläche musste also so erreichbar sein, wie Engineers tatsächlich nach Dingen greifen: eine Command-Palette auf ⌘K, Tabs, die ohne Seitenladen wechseln, und ein Preis-Toggle, der eine Frage beantwortet, statt ein Vertriebsformular zu öffnen.
Tastatur zuerst
Eine echte Command-Palette mit Fokus-Trap, Pfeilnavigation, Ziffern-Shortcuts und Scroll-Lock — keine Suchbox in einem Modal.
Das Produkt zeigen
Vierzehn Inline-SVGs tragen das Dashboard, die Charts und jedes Kundenlogo. Nichts ist gerastert.
Dunkel, das lesbar bleibt
Eine dreistufige Neutralrampe, deren gedämpftes Text-Token bei 5.72:1 auf dem Hintergrund fixiert ist — festgehalten im Stylesheet.
03 · Ziele
Das Briefing, als Randbedingungen
Aussehen wie das Produkt
Gleicher Radius, gleicher Panel-Schatten, gleiche Typo-Skala wie die App, für die sie wirbt — der Sprung von der Site zum Trial ist unsichtbar.
Keine Bilder ausliefern
Null Fotografie und null Raster-Assets, damit die Seite im Konferenz-WLAN schnell ist und auf jedem Display scharf.
Ohne Maus bedienbar sein
Palette, Tabs, Akkordeon und Preis-Toggle, alle per Tastatur gesteuert, mit korrektem ARIA-Zustand.
Niemanden einsperren
Das Overlay sperrt das Scrollen und zirkuliert den Fokus, solange es offen ist, und gibt den Fokus beim Schließen an den Auslöser zurück.
04 · Bauablauf
In zehn nummerierten Modulen gebaut
Das Skript ist als zehn nummerierte Blöcke in einer IIFE organisiert, jeder in sich geschlossen und jeder abgesichert, sodass ein fehlendes Element ein No-op ist statt ein geworfener Fehler. Die Seite funktioniert mit jeder Teilmenge davon.
Tokens und die Neutralrampe
Zweiundzwanzig Custom Properties: Hintergrund, zwei Oberflächen, eine versenkte Tönung, drei Textstufen, drei Violetttöne und vier Statusfarben.
Das SVG-Dashboard
Von Hand ins Markup gezeichnet — Chrome, Achsen, Serien, ein Live-Log-Tail —, damit es skaliert, Themes mitmacht und im Download nichts kostet.
Layout auf fünf Breakpoints
Nur fünf Media Queries in 46 KB CSS; die Bento- und Preisraster sind
auto-fitund brauchen keine Hilfe.Interaktionsmodule
Header-Zustand, Mobile-Nav, versetzte Anker, Reveals, Bento-Glow, Count-ups, Deep-Dive-Tabs, Preis-Toggle, FAQ-Akkordeon, CTA-Formular.
Die Command-Palette, zuletzt
Erst gebaut, als alles, wohin sie navigieren muss, schon existierte — ihr Index ist die echte Seite, keine hartkodierte Liste.
05 · Architektur
Die Form des Ganzen
Die Site modelliert die Pipeline des Produkts selbst — und sagt das in der Plattform-Sektion laut. Das Diagramm ist Inline-SVG: Jeder Verbinder trägt pathLength="100", sodass eine einzige scrollgetriebene Custom Property alle vier durch calc()-Fenster zeichnet. Ein Schreibzugriff, ein Diagramm.
├── index.html 52.4 KB — 7 Sektionen, 14 Inline-SVG, 0 Bilder
├── styles.css 46.1 KB — 22 Custom Properties, 5 Media Queries
└── script.js 18.5 KB — 608 Zeilen, 10 nummerierte Module
06 · Was sich gewehrt hat
Probleme, und was sie geschlagen hat
Das Hintergrund-Scrollen für die Palette mit overflow: hidden zu sperren, entfernt die Scrollleiste — und die ganze Seite springt seitwärts, sobald das Overlay öffnet.
Vor dem Sperren die Breite der Scrollleiste messen und sie als Padding auf demselben Element zurückzahlen. Die Seite bewegt sich um keinen Pixel.
Ein handgezeichnetes SVG-Dashboard muss von 360 px bis 2560 px lesbar bleiben — mit einer festen viewBox werden 7-Pixel-Beschriftungen entweder unleserlich oder riesig.
Das Panel besteht aus mehreren kleinen SVGs in einem CSS-Grid statt aus einem großen — das Chrome skaliert, die Schrift nicht. Jedes Chart behält sein Seitenverhältnis, und die Beschriftungen bleiben in der Dokumentschrift.
Hochzählende Statistiken sind ein Klischee, das obendrein die Barrierefreiheit bricht: Die Zahl animiert bei jedem Scroll-Durchgang, und Screenreader kündigen jeden Zwischenwert an.
Jeder Zähler feuert einmal, aus einem Observer, der sich selbst abmeldet, und unter prefers-reduced-motion schreibt er den Endwert sofort, statt dorthin zu animieren.
Ankernavigation setzt das Ziel unter den Sticky-Header — die angeklickte Überschrift ist genau das, was Sie nicht sehen können.
Ein gemeinsames scrollToTarget() zieht die gemessene Header-Höhe ab und bewegt den Fokus ans Ziel — Tastatur- und Mausnutzer kommen an derselben Stelle an.
07 · Was bleibt
Die Teile, die bleiben
⌘K überall
Von überall auf der Seite zu jedem Service, Trace oder Dashboard springen, mit echtem Fokus-Trap und Ziffern-Shortcuts.
Das gezeichnete Dashboard
Durchsatz, Fehlerrate, p95-Latenz, Ingest und ein Live-Log-Tail — alles Markup, alles theme-fähig, alles scharf bei jeder Pixeldichte.
Deep-Dive-Tabs
Traces, Alerts und Boards wechseln an Ort und Stelle, mit korrektem aria-selected und Roving Tabindex.
Preise, die antworten
Ein Monats/Jahres-Toggle mit aria-pressed, der die Zahlen umschreibt, statt ein Kontaktformular zu öffnen.
Cursor-Licht
Ein Pointer-Listener und zwei Custom Properties beleuchten sechs Karten. Deaktiviert bei groben Zeigern und unter Reduced Motion.
Statusfarbe, sparsam
Cyan, Grün, Amber und Rot existieren nur dort, wo ein Zustand gemeldet wird. Nichts Dekoratives trägt je eine Statusfarbe.
Command-Palette
Die Palette ist die einzige wirklich harte Komponente der Seite. Sie muss das Hintergrund-Scrollen sperren, ohne das Layout zu verschieben, Tab in beiden Richtungen in sich zirkulieren lassen, den Fokus an das zurückgeben, was sie geöffnet hat, eine Liste live filtern und Zifferntasten als Shortcuts annehmen — und dabei ankündbar bleiben, also role="dialog", aria-modal und ein beschriftetes Input statt eines gestylten div.
- aria-modal
- Focus trap
- Scroll lock
- Live filter
- Number shortcuts
- Focus restore
Bento-Glow
Sechs Feature-Karten teilen sich ein cursorverfolgtes Glühen. Die naive Version hängt an jede Karte einen pointermove-Listener und schreibt jede Gradient-Position einzeln — sechs Listener, sechs Schreibzugriffe pro Frame. Stattdessen schreibt ein Listener auf dem Grid zwei Custom Properties, und alle sechs Karten lesen sie in einem radial-gradient. Die Kosten sind identisch, ob es sechs Karten sind oder sechzig.
- One listener
- Two properties
- radial-gradient
- pointer: fine only
Die Rampe
Dunkle Interfaces scheitern am dritten Grau. Signalform nutzt genau drei Textstufen — #E6E8EE, #9CA1B2 und #868B9C — und die schwächste ist im Stylesheet mit den Verhältnissen annotiert, für die sie gewählt wurde: 5.72:1 auf dem Hintergrund und 5.23:1 auf der erhöhten Fläche. Nichts Dunkleres existiert in der Datei — es gibt also später nichts Dunkleres, wonach man greifen könnte.
- 3 text weights
- 2 surfaces
- 4 status colours
- WCAG AA verified
08 · Live starten
Hier ausprobieren
Der echte Build, eingebettet und lauffähig — probieren Sie ⌘K, sobald er geladen ist. Nichts wird geholt, bevor Sie es anfordern.
Der echte Build, direkt in der Seite. Die Live-Vorschau ist eine eingebettete Seite; mit Escape verlassen Sie sie.
Im Vollbild öffnen ↗
