Wie Trailwise aussieht, klingt und sich bewegt

Logo und Wortmarke

Die Bildmarke steht. Ascent, am 31. August 2026 übernommen: drei Balken, im Winkel von 17,5 Grad geschnitten, derselbe Winkel wie die Fase der Buttons. Die beiden hinteren sind bereits gelaufene Schritte und tragen die Tinte, der vordere trägt das Türkis. Zwei Werte, und nichts in der Zeichnung ist kleiner als ein Balken, und deshalb hält sie bei 16px, wo die abgelöste Zeichnung das nicht tat. Sie ersetzt den Field-Guide-Berg, der auf dieser Seite nie über „Vorschlag“ hinauskam.

Die Wortmarke und das eine türkise Wort

Space Grotesk 500 mit −0.05em, in Kleinbuchstaben. „trail“ steht in Tinte, „wise“ in Türkis, auf Hell wie auf Dunkel. Das ist die einzige Ausnahme von der Regel, dass Türkis eine Fläche ist und nie ein Wort, und die Ausnahme reist nicht mit: eine Überschrift in Türkis bleibt falsch. Die WCAG nehmen Logotype-Text vom Kontrast aus, aber das Verhältnis liegt bei 2,5:1 auf Weiß und 2,0:1 auf dem Sky-Band, und deshalb hat die Wortmarke eine Untergrenze. 24px Versalhöhe auf Weiß, 28px auf Sky. Darunter nimm die Bildmarke allein. Wortmarke und beide Lockups werden als Konturen ausgeliefert statt als lebender Text, sie stellen also ohne installierte Schriften korrekt dar: E-Mail, PDF, Druck.

Schutzraum und Mindestgröße

Der Schutzraum auf allen Seiten entspricht der Breite eines Balkens, 12 Einheiten im 72er-Raster. Unter 24px auf einfarbigem Grund nimm die Favicon-Zeichnung: zwei dicker nachgezeichnete Balken, nicht die verkleinerte Bildmarke. Auf der Tinte-Kachel bleiben die drei Balken bis 16px getrennt, und genau das nutzen der Browser-Tab und das App-Icon.

Farbe

Tinte und Papier machen die Arbeit. Türkis ist der eine Akzent, und es ist eine Fläche, nie ein Wort: mit 2.5 gegen Weiß fällt es als Text in jeder Größe durch. Wo Türkis gelesen werden muss, wird daraus Türkis dunkel. Himmel trennt einen Abschnitt vom nächsten und ist nie eine ganze Seite.

Diagrammserien · in dieser Reihenfolge vergeben, nie zyklisch

Gegen Weiß geprüft auf Helligkeit, Chroma, Trennbarkeit bei Farbfehlsichtigkeit und Kontrast. Alle acht sind sicher, wo Serien nebeneinander liegen, wie bei Linien und Balken. In einem Streudiagramm oder in Small Multiples, wo jedes Paar aufeinandertreffen kann, halten nur die ersten drei; ab der vierten fasse zu Sonstige zusammen oder facettiere.

Sequenziell und divergierend

Typografie

Zwei Schriftfamilien, und die Trennung ist strikt. Space Grotesk mit −0.05em ist für alles, was spricht. Noto Sans mit +0.02em ist für alles, was erklärt. Hierarchie kommt aus Größe und Gewicht, nie aus einer dritten Schrift. Hervorhebung ist Gewicht oder Farbe, nie kursiv.

Der Marker

Tokens

Container sind rund, Bedienelemente sind eckig, und der Kontrast zwischen beiden ist der Look. Mach die Bedienelemente nicht weicher und die Karten nicht kantiger.

Buttons

Eine Fase oben links über die volle Höhe, damit sich das Bedienelement in die Richtung neigt, in die alles andere läuft. Eine primäre Aktion pro Ansicht. Hover vertieft die Kerbe, statt eine Farbe zu tauschen, und das ist die einzige Stelle auf der Website, an der ein Hover eine Geste ist und kein Zustandswechsel.

Badges und Status

Versalien, gesperrt, eckig. Vier reservierte Statusfarben, die nie zu einer Diagrammserie werden. Eine Statusfarbe trägt Bedeutung nie allein: Sie kommt immer mit einem Punkt oder einem Wort.

Formulare

Labels sind immer sichtbar, in Mikrotypografie in Versalien über dem Feld. Hinweise stehen dauerhaft da, statt erst bei einem Fehler zu erscheinen. Felder sind eckig, 54px hoch, und der Fokus ist ein 3px starker Ring in Türkis mit 1px Offset.

Daten und Telemetrie

Zahlen stehen in der Displayschrift mit Tabellenziffern, damit sich eine Spalte nach unten vergleichen lässt und nicht verrutscht. Jedes berechnete Signal trägt seine Konfidenz, und ein Signal auf dünner Datenlage sagt das, statt eine plausible Zahl zu erzeugen. Der letzte Punkt ist das eine Stück dieses Systems, das keine andere Marke hat.

Motion

Eine Easing-Kurve und zwei Dauern. Scroll-getriebene Motion schreibt pro Frame eine einzige Custom Property auf ein Stage-Element und überlässt CSS den Rest, nie ein Listener pro Element. Die Signaturen sind der Kartenstapel, der ins Band hochfährt, die Treppe, die Stufe für Stufe erscheint und dann nach links abgeht, und der Fächer, der sich über einen Scrollanteil öffnet.

Fotografie

Echter Trail und echtes Wetter, nie Stock-Athletik. Hero-Bilder werden in einem einzigen Blau gedruckt: Das Foto liefert die Luminanz und --ws-duo liefert den Farbton, damit ein nebliger Wald und eine Laufbahn in derselben Welt landen. Überall sonst behalten Belegbilder ihre eigene Farbe, weil ein Diagramm deiner eigenen Daten nicht gestylt werden sollte.

Tonalität

Fachkundig und klar. Direkte Anrede, kurze Sätze gemischt mit längeren, konkret statt abstrakt. Wir erklären die Begründung hinter jeder Entscheidung und nennen die Grenze, statt sie zu verstecken. Wo wir etwas nicht wissen, sagen wir es, weil ein Signal, dem du still misstrauen gelernt hast, an dem Tag nichts ändert, an dem es zählt.

Richtig und falsch

Downloads

Das System als Seite zum Lesen, als Stylesheet zum Einbinden und die Tokens als Daten. Das Markenbuch ist die Referenz; das Stylesheet ist das, was ein internes Tool nutzen sollte, statt irgendetwas davon nachzubauen.