# 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.