logbuch/docs/design/direction.md

Logbuch Gestaltungsrichtung

Stand: 30.07.2026. Diese Datei ist verbindlich. Jede Farb-, Schrift- und Abstandsentscheidung wird hieraus abgeleitet, nichts wird zusätzlich erfunden.

Warum der erste Entwurf nicht trug

Der erste Entwurf bestand aus Haarlinien, Mono-Kleinkram und einer sehr großen Überschrift. Er funktionierte nur unter der Annahme, dass jeder Eintrag ein Bild mitbringt. Ohne Bilder blieb eine graue Liste ohne Halt. Die Gestaltung muss vollständig ohne Bildmaterial tragen und mit Bildmaterial besser werden, nicht umgekehrt.

Leitgedanke

Logbuch zeigt Meldungen aus einer Flotte von Projekten. Die wichtigste Information eines Eintrags ist nicht sein Datum, sondern von welchem Projekt er kommt. Deshalb trägt die Projektfarbe die Seite.

Signaturelement: die Kennplatte

Ein massives Farbfeld in der Projektfarbe mit dem Projektkürzel und der laufenden Eintragsnummer, gesetzt wie eine Rumpf- oder Containerbeschriftung.

┌──────────────┐
│ TRK          │
│ 0142         │
└──────────────┘

• Kürzel aus project.code, Rückfall auf die ersten drei Buchstaben des Slugs in Großbuchstaben
• Nummer immer vierstellig mit führenden Nullen
• Schrift: Mono, 600, weite Laufweite beim Kürzel, sehr groß bei der Nummer
• Textfarbe auf der Platte: immer Papierfarbe, nie Tinte
• In der Liste als schmale Variante, im Aufmacher als große Fläche

Die Platte ist der einzige Ort, an dem kräftige Farbe vorkommt. Alles andere bleibt ruhig.

Farbe

Grundpalette, hell:

Token	Wert	Verwendung
paper	#f2f1ec	Seitenhintergrund
surface	#fbfaf6	abgesetzte Flächen
ink	#14161a	Titel, Fließtext
ink-2	#4c5157	Anreißer, Sekundärtext
ink-3	#8a8f95	Beschriftungen, Datum
rule	#dedcd3	Trennlinien
signal	#c43a22	ausschließlich für Neu-Markierung und die Randlinie

Dunkel, dieselben Tokennamen:

Token	Wert
paper	#121417
surface	#191c20
ink	#edebe4
ink-2	#a9aeb4
ink-3	#757a80
rule	#2a2e34
signal	#e4603f

Projektfarben kommen aus der Datenbank, project.color. Sie werden nur auf Kennplatten und als Balken verwendet, niemals als Textfarbe auf Papier. Im dunklen Modus wird die Plattenfarbe über color-mix um 12 Prozent zur Papierfarbe abgedunkelt, damit sie nicht leuchtet.

Verboten: Farbverläufe, Schlagschatten außer einem einzigen für den Aufmacher, farbige Titel. Titel sind immer ink, auch wenn sie Verweise sind. Verweisblau gilt nur für echte Verweise im Fließtext.

Schrift

Selbst gehostet über next/font/google, keine Systemschriften mehr, damit es auf jedem Rechner gleich aussieht.

Rolle	Schrift	Einsatz
Display	Archivo, 600 und 700, Laufweite -0.02em	Titel, Wortmarke, Abschnittsköpfe
Fließtext	Source Serif 4, 400, Zeilenhöhe 1.6	Anreißer, Artikeltext
Technisch	JetBrains Mono, 500	Kennplatten, Datum, Nummern, Beschriftungen

Skala in rem, keine Zwischenwerte erfinden:

Stufe	Größe	Verwendung
micro	0.6875	Beschriftungen in Versalien
small	0.8125	Datum, Metazeilen
base	1.0625	Fließtext
lead	1.25	Anreißer im Aufmacher, Titel in der Liste
title	1.75	Abschnittsköpfe, Titel auf Projektseiten
hero	clamp(2.25, 4vw, 3.25)	Aufmachertitel, Seitentitel
plate	clamp(2, 5vw, 3.5)	Nummer auf der großen Kennplatte

Nachtrag 30.07.2026: Aufbau nach dem Vergleich

Ein zweiter Entwurf hat drei Dinge besser gelöst. Sie sind ab sofort verbindlich und stechen die Skizze weiter unten.

Feste Seitenleiste statt Filterzeile. Links eine schmale Spalte über die volle Höhe: Wortmarke mit dem Stand des Logbuchs, Suche, die Einträge Übersicht und Archiv, dann alle Projekte mit Farbpunkt, gruppiert nach Marke. Unten der Hell-Dunkel-Umschalter. Die Projekte sind Daten, die Leiste wächst mit ihnen. Ab Tablettbreite klappt sie zu einer Kopfzeile mit Schublade zusammen.

Der Aufmacher trägt ein Bild. Volle Breite des Inhaltsbereichs, darunter Projektzeile, Titel, Anreißer, Autor. Die Eintragsnummer steht sehr groß und sehr blass hinter dem Text, als Wasserzeichen. Ohne Bild übernimmt die Kennplattenfläche denselben Platz, das Wasserzeichen bleibt.

Zweite Spalte rechts. Neben dem Aufmacher stehen die zwei bis drei nächsten Einträge als kleine Karten mit Vorschaubild, Kürzel, Art, Titel und Anreißerbeginn.

Zeilen zeigen mehr. Eine Listenzeile trägt Kürzel und Nummer, die Art, den Titel, den Anreißer in einer Zeile, rechts Datum und Autor. Nicht nur Titel und Datum.

Kürzel-Schreibweise. Kürzel und Nummer werden als TRK-0142 gesetzt, mit Bindestrich, nicht als zwei getrennte Angaben.

Aufbau der Übersicht

┌───────────────────────────────────────────────────────────────┐
│ LOGBUCH   alle · trakk · mta360 · ...          suchen    ☀    │ schmal, klebend
├───────────────────────────────────────────────────────────────┤
│ ZULETZT                                7 Einträge · 14 Tage   │ Augenbraue
│                                                               │
│ ┌───────────────┬───────────────────────────────────────────┐ │
│ │  TRK          │ FEATURE                            NEU    │ │ Aufmacher
│ │               │ Regel-Engine: Bedingung trifft Aktion     │ │
│ │  0142         │ Anreißer in Serifenschrift, zwei Zeilen   │ │
│ │               │ 30.07.2026 · Paul · Trakk                 │ │
│ └───────────────┴───────────────────────────────────────────┘ │
│                                                               │
│ ── ÄLTERE EINTRÄGE ──────────────────────────────────────     │
│ ▌MTA 0141  Spalten per Rechtsklick verwalten      29.07.      │ dichte Zeilen
│ ▌TEL 0140  10.000 Tracker auf einer Karte         28.07.      │
│ ▌TRK 0139  SLA-Uhr zählt Feiertage nicht mit      25.07.      │
│                                                               │
│ ── ARCHIV ───────────────────────────────────────────────     │
│ 2026  [Jan 14] [Feb 11] [Mär 18] ...                          │
└───────────────────────────────────────────────────────────────┘

Der Aufmacher ist genau ein Eintrag, der neueste. Alles darunter ist dicht und zum Überfliegen gebaut: eine Zeile pro Eintrag, links ein Balken in der Projektfarbe, dann Kürzel und Nummer in Mono, dann der Titel in Display, rechts das Datum. Bei Überfahren wächst der Balken und der Titel rückt zwei Pixel nach rechts.

Sechs Einträge müssen ohne Scrollen sichtbar sein. Der erste Entwurf brauchte für vier Einträge einen ganzen Bildschirm, das war der Kern des Problems.

Aufbau der Beitragsseite

Reihenfolge: Kennplatte klein und Projektzeile, dann Titel, dann Anreißer als Lead in lead, dann der Inhalt in einer Lesespalte von 38rem. Metadaten stehen nicht zwischen Titel und Text, sondern als eine ruhige Zeile unter dem Titel und ausführlich am Fuß des Artikels.

Der Anreißer wird nie doppelt gezeigt. Wenn der erste Inhaltsblock denselben Text enthält, wird der Block übersprungen.

Fehlende Bilder

Bilder gibt es noch nicht. Ein Eintrag ohne Bild bekommt deshalb im Aufmacher die große Kennplatte als Fläche, nicht einen leeren Rahmen und keinen Platzhalter mit Kamerasymbol. Sobald ein Beitrag ein Aufmacherbild hat, tritt die Platte auf die schmale Variante zurück und das Bild übernimmt die Fläche.

Bewegung

Sparsam. Beim Laden erscheinen die Listenzeilen versetzt um je 40 Millisekunden mit 6 Pixel Versatz. Beim Überfahren wächst der Farbbalken. Sonst nichts. Bei prefers-reduced-motion entfällt alles.

Sorgfalt im Detail

Der Auftraggeber hat den ersten Bau nicht als kaputt bezeichnet, sondern als lieblos. Das ist die genauere Kritik. Struktur allein reicht nicht, die folgenden Kleinigkeiten sind Pflicht, nicht Kür:

• Zahlen laufen tabellarisch. font-variant-numeric: tabular-nums überall, wo Nummern und Daten untereinander stehen. Eine Liste, in der die Nummern zittern, sieht ungepflegt aus.
• Datum spricht wie ein Mensch. Jünger als sieben Tage: "vor drei Tagen". Älter: das Datum. Im Titelattribut immer das genaue Datum.
• Lesedauer je Beitrag, geschätzt aus der Textmenge, in der Metazeile. Sagt dem Leser, worauf er sich einlässt.
• Autor als Kürzel-Marke, zwei Buchstaben in einem kleinen Feld in Tintenfarbe. Kein Bild, keine leere Silhouette.
• Leerzustände sagen, was als Nächstes zu tun ist. Nicht "Keine Einträge", sondern was der Leser jetzt tun kann, mit einem Weg dorthin.
• Trennlinien nur zwischen Gleichartigem. Der letzte Eintrag einer Liste bekommt keine Linie nach unten.
• Überschriften brechen ausgeglichen, text-wrap: balance für Titel, pretty für Fließtext. Keine einzelnen Wörter in der letzten Zeile.
• Textauswahl trägt die Signalfarbe, nicht das Browserblau.
• Sichtbarer Tastaturfokus in Signalfarbe, nicht der Standardrahmen des Browsers.
• Überfahren fühlt sich an: der Farbbalken wächst, der Titel rückt zwei Pixel, beides in 120 Millisekunden.
• Die 404-Seite ist gestaltet und trägt eine eigene Zeile, keine Standardmeldung.
• Der Aufmacher bekommt genau einen Schatten, sehr weich, damit er von der Fläche abhebt. Sonst gibt es im ganzen Entwurf keine Schatten.

Wenn eine dieser Kleinigkeiten fehlt, ist die Arbeit nicht fertig, auch wenn die Seite lädt.

Qualitätsboden

Bis 22rem Breite benutzbar, sichtbarer Tastaturfokus, Kontrast mindestens 4.5 zu 1 für Fließtext, keine nativen Scrollbars, hell und dunkel aus denselben Tokens.