Marke
Ein Navy, das spricht, ein Türkis, das nie spricht, und ein blasses Band zum Durchatmen dazwischen. Eckige Bedienelemente gegen runde Container. Motion, die in eine Richtung läuft, statt zu dekorieren. Das Argument des Produkts ist, dass es dir sagt, wenn es etwas nicht weiß, also spielt die Oberfläche nie eine Sicherheit vor, die sie sich nicht verdient hat.
Grundlagen
Auf der Website steht die Marke als Wortmarke: Space Grotesk 500 mit −0.05em, in Tinte, nie in Türkis. Im aktuellen Design gibt es auf keiner Seite ein Icon.
Schutzraum und Mindestgröße
Der Schutzraum auf allen Seiten entspricht der Versalhöhe des T. Unter etwa 90px Breite ist die Wortmarke nicht mehr lesbar, und das ist die Untergrenze für ein Lockup im Header.
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.
--ws-ink#15344B12.93:1 · AADisplayschrift und dunkle Flächen
--ws-teal#03B8A52.5:1 · Nie TextDie Marke. Nur Flächen, nie ein Wort
--ws-teal-deep#00786C5.38:1 · AADas textsichere Türkis
--ws-sky#E2F5FFFläche · Tinte 11.53:1Das Band, das Abschnitte trennt
--ws-paper#FFFFFFFläche · Tinte 12.93:1Die Standardfläche
--ws-body#00000021.0:1 · AAFließtext ist echtes Schwarz, nicht Tinte
--ws-duo#1C5F916.78:1 · AADas Blau, in dem jedes Duotone-Foto gedruckt wird
--ws-muted#6A7F8E4.17:1 · Nur großSekundär- und Achsentext
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
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.
Gewebe nimmt Belastung auf, passt sich an, nimmt mehr Belastung auf, passt sich wieder an. Wenn die Belastung schneller kommt, als die Anpassung mithalten kann, versagt das Gewebe nicht auf der Stelle.
Notiz lesen| Rolle | Größe | Schrift | Wo es vorkommt |
|---|---|---|---|
| Mega | clamp(3.6rem,17.6vw,261px) | Display | Nur Abschlussbänder |
| H1 | clamp(2.9rem,8.1vw,120px) | Display | Seitentitel |
| H2 | clamp(2.2rem,4.05vw,60px) | Display | Abschnittsüberschriften, Artikeltitel |
| H3 | clamp(1.9rem,3.1vw,46px) | Display | Blocküberschriften |
| Lead | clamp(1.1rem,1.82vw,27px) | Fließtext | Ein Absatz unter einem Titel |
| Fließtext | clamp(1rem,1.21vw,18px) | Fließtext | Alles andere |
| Prosa | clamp(1.05rem,1.32vw,20px) | Fließtext | Langtext, begrenzt auf 68ch |
| Label | 16px, Versalien | Fließtext | Navigation, Buttons, Kicker |
Der Marker
Container sind rund, Bedienelemente sind eckig, und der Kontrast zwischen beiden ist der Look. Mach die Bedienelemente nicht weicher und die Karten nicht kantiger.
| Radius und Abstand | Wert |
|---|---|
| Karten, Dialoge | --ws-radius 32px |
| Tool-Panels | 8px |
| Jedes Bedienelement | 0px |
| Inhaltsbreite | --ws-maxw 1416px |
| Seitenrand | 20px, 32px ab 1024 |
| Header | 104px, 88px unter 1024 |
| Abstände | 4 8 12 16 24 32 48 64 96 |
| Elevation und Motion | Wert |
|---|---|
| Karte | 0 30px 60px −40px / 45% |
| Anheben bei Hover | 0 40px 80px −40px / 55% |
| Dialog | 0 60px 120px −50px / 70% |
| Easing | cubic-bezier(.22,.61,.36,1) |
| Micro | 220ms · Hover, Fokus, Farbe |
| Reveal | 800ms · Deckkraft und 24px nach oben |
| Fokusring | 3px solid, 3px Offset |
Komponenten
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.
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.
Garmin verbunden. Letzte Synchronisierung vor 4 Minuten.
Polar hat sich seit 6 Tagen nicht synchronisiert. Details, die älter als 28 Tage sind, lassen sich nicht mehr holen, sobald das Fenster zu ist.
Wir konnten Strava nicht erreichen. Verbinde neu, damit der Import weiterläuft.
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.
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.
| Einheit | Typ | Distanz | Ø Pace | Belastung |
|---|---|---|---|---|
| Montag | Locker | 8.0 km | 5:38 | 44 |
| Mittwoch | Intervalle | 10.2 km | 4:21 | 92 |
| Samstag | Lang | 24.0 km | 5:55 | 176 |
Muster
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.
| Muster | Timing | Was es macht |
|---|---|---|
| Reveal beim Eintreten | 800ms | Deckkraft und 24px nach oben. Nie zu Tode gestaffelt. |
| Stage fixieren | an den Scroll gebunden | Das Bild bleibt stehen, während der Text hindurchläuft |
| Übergabe | an den Scroll gebunden | Eine Passage geht nach links ab, während die nächste von rechts kommt |
| Button-Kerbe | 260ms | Der Schnitt wird tiefer. Das Label bewegt sich nicht. |
| Dialog | 420ms | Deckkraft und 20px nach oben |
| Reduzierte Bewegung | wird respektiert | Jedes Reveal löst sofort auf, und nichts bleibt versteckt |
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.
Marke
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.
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.
Dreißig Tage Trailwise Pro, deine Historie am ersten Tag importiert, und ein Plan, der sich danach richtet, was dein Körper wirklich macht.
LoslegenKostenlos während der privaten Beta. Keine Kreditkarte nötig.
So funktioniert die Beta
Wir haben einen Bestätigungslink an geschickt.
Deine Angaben sind gespeichert.
Diese E-Mail-Adresse ist bereits registriert. Falls sie noch nicht bestätigt war, haben wir einen neuen Bestätigungslink an geschickt.