# TopBar B1 — Responsive Spec · Light & Dark · Overflow

Complete breakdown of the Refined Baseline across all five viewport widths, both themes, and all receiver counts (0–5+). Includes annotate-active states and the full responsive collapse rules.

Familienarchiv · 2026-03-30 · Leonie Voss, UX Lead

## 1 · Design tokens

All values used across this spec. The topbar uses only these tokens — no hardcoded colours in components.

Light theme

bg-surface | #FFFFFF — topbar background
border-line | #E4E2D8 — bottom border, dividers
bg-primary | #012851 — accent bar, primary btn, avatars
text-primary-fg | #A1DCD8 — text on navy
text-ink | #1A1A1A — title (mapped via bg-primary in nav)
text-ink-3 | #AAAAAA — date, meta
bg-muted | #F0EFE9 — chip background, back btn
Accent bar | `border-left: 3px solid var(--color-primary)`

Dark theme

bg-surface | #0F1923 — topbar background
border-line | #1E2D3D — bottom border, dividers
Accent bar | #A1DCD8 (text-primary-fg) — teal replaces navy
Primary btn | bg #A1DCD8 · text #012851 — inverted
text-ink | #EAE8E2 — title
text-ink-3 | #3E5065 — date, meta
Chip bg | #0A1218 · border #1E2D3D
Ghost btn | border #1E2D3D · text #6080A0 · active: teal bg

## 2 · Receiver overflow patterns

How the chip row adapts from 0 receivers to 5+, in both themes. The rule: always show the sender chip, always show the first receiver chip, collapse remaining into a "+N weitere" pill. 0 or 1 receiver: no overflow needed.

Light theme — all receiver counts
0 receivers
KR
Karl Raddatz
Sender chip only. No arrow. Document without recipients (e.g. a diary entry or certificate).
1 receiver
KR
Karl Raddatz
→
ER
Elfriede Raddatz
Both shown in full. No overflow.
2 receivers
KR
Karl Raddatz
→
ER
Elfriede Raddatz
·
HR
Hans Raddatz
Both receivers shown. No overflow. Edge case — only do this at ≥768 px. On narrow screens, collapse to 1 + "+1".
3 receivers
KR
Karl Raddatz
→
ER
Elfriede Raddatz
+2 weitere
Sender + 1st receiver shown. Remaining 2 collapse into "+2 weitere" pill.
5 receivers
KR
Karl Raddatz
→
ER
Elfriede Raddatz
+4 weitere
Always sender + 1st receiver + "+N weitere" regardless of total count.
No sender
ER
Elfriede Raddatz
First available person shown. No arrow (direction unknown). Typical for photos, certificates, undated documents.
Dark theme — key overflow states
1 receiver
KR
Karl Raddatz
→
ER
Elfriede Raddatz
3 receivers
KR
Karl Raddatz
→
ER
Elfriede Raddatz
+2 weitere
5 receivers
KR
Karl Raddatz
→
ER
Elfriede Raddatz
+4 weitere

## 3 · Viewport-by-viewport

Each viewport shown in light + dark, with a 1-receiver (default) and 3-receiver (overflow) state side by side.

320 px · XS Mobile
320pxLight · 1 receiver
Brief a. Großmutter
K.Raddatz → E.Raddatz · 24.12.1943
Edit
At 320 px the chip row collapses completely. Sender and receiver are shown as plain text in the meta line below the title. Only Edit button shown.
320pxDark · 1 receiver
Brief a. Großmutter
K.Raddatz → E.Raddatz · 24.12.1943
Edit
Dark: teal accent bar, inverted primary button. Meta text uses ink-3 dark (#3E5065).
320pxLight · 3+ receivers
Rundbrief, 1951
K.Raddatz → E.Raddatz +4 · 18.07.1951
Edit
Overflow at 320 px: "+4" appended to the plain-text meta line (no chips rendered at this width).
375 px · Standard Mobile
375pxLight · 1 receiver
Brief a. Großmutter, 1943
KR
K. Raddatz
→
ER
E. Raddatz
Edit
375 px: chips appear with abbreviated names (first initial + last name). Circle back button returns. Annotate hidden; only Edit shown.
375pxDark · 1 receiver
Brief a. Großmutter, 1943
KR
K. Raddatz
→
ER
E. Raddatz
Edit
Dark 375 px: teal accent bar, dark chip bg (#0A1218 + #1E2D3D border), muted arrow colour.
375pxLight · 3+ receivers
Rundbrief, 1951
KR
K. Raddatz
→
ER
E. Raddatz
+2
Edit
At 375 px the overflow pill appears immediately after 1st receiver. Short form: "+2" (no "weitere" — space too tight).
375pxDark · 3+ receivers
Rundbrief, 1951
KR
K. Raddatz
→
ER
E. Raddatz
+2
Edit
Dark overflow: "+2" pill uses dark bg (#0A1218) + muted border. Same pill shape as the chips.
768 px · Tablet
768pxLight · 1 receiver
Brief an Großmutter, Weihnachten 1943
Hochgeladen
24.12.1943
·
KR
Karl Raddatz
→
ER
Elfriede Raddatz
Annotieren
Bearbeiten
768 px: full chip row with full names. All three action buttons visible. Status chip shown.
768pxDark · 1 receiver
Brief an Großmutter, Weihnachten 1943
Hochgeladen
24.12.1943
·
KR
Karl Raddatz
→
ER
Elfriede Raddatz
Annotieren
Bearbeiten
Tablet dark: all elements visible, dark chip vocabulary throughout.
768pxLight · 4 receivers
Rundbrief an die Familie, Sommer 1951
Archiviert
18.07.1951
·
KR
Karl Raddatz
→
ER
Elfriede Raddatz
+3 weitere
Annotieren
Bearbeiten
Tablet overflow: "+3 weitere" — full word fits comfortably. Chip row still has room for date + sender + 1st receiver + overflow pill.
1024 px · Laptop
1024pxLight · 1 receiver
Brief an Großmutter, Weihnachten 1943
Hochgeladen
24.12.1943 · Hamburg
·
KR
Karl Raddatz
→
ER
Elfriede Raddatz
Annotieren
Bearbeiten
1024 px: location added to date in meta row ("24.12.1943 · Hamburg"). Full names, all buttons labelled.
1024pxDark · 1 receiver
Brief an Großmutter, Weihnachten 1943
Hochgeladen
24.12.1943 · Hamburg
·
KR
Karl Raddatz
→
ER
Elfriede Raddatz
Annotieren
Bearbeiten
1024 dark: full layout, teal accent bar and inverted primary button.
1024pxLight · 5 receivers
Rundbrief an die Familie, Sommer 1951
Archiviert
18.07.1951 · Berlin
·
KR
Karl Raddatz
→
ER
Elfriede Raddatz
+4 weitere
Annotieren
Bearbeiten
5 receivers at 1024 px: the chip row has room for date + location + sender + 1st receiver + "+4 weitere". No truncation needed.
1024pxLight · Annotate active
Brief an Großmutter, Weihnachten 1943
KR
Karl Raddatz
→
ER
Elfriede Raddatz
Beenden
Annotierungsmodus aktiv
Klicken Sie auf eine Textstelle im Dokument, um eine Anmerkung hinzuzufügen.
Annotate active: Edit + Download removed. Ghost button fills navy. 18 px hint strip. PDF area gets a subtle navy outline to indicate click-target mode.
1440 px · Desktop
1440pxLight · 1 receiver
Brief an Großmutter, Weihnachten 1943
Hochgeladen
24. Dezember 1943 · Hamburg
·
KR
Karl Raddatz
→
ER
Elfriede Raddatz
Annotieren
Bearbeiten
1440 px: date written out in full ("24. Dezember 1943"). More breathing room in the chip row. All buttons with labels.
1440pxDark · 1 receiver
Brief an Großmutter, Weihnachten 1943
Hochgeladen
24. Dezember 1943 · Hamburg
·
KR
Karl Raddatz
→
ER
Elfriede Raddatz
Annotieren
Bearbeiten
Desktop dark: full date text, teal border, all three actions visible.
1440pxLight · 5 receivers
Rundbrief an die Familie, Sommer 1951
Archiviert
18. Juli 1951 · Berlin
·
KR
Karl Raddatz
→
ER
Elfriede Raddatz
+4 weitere
Annotieren
Bearbeiten
Desktop overflow: full date · sender · 1st receiver · "+4 weitere". The overflow pill never needs to grow beyond 7 chars ("+99 mehr" at most).
1440pxDark · Annotate active
Brief an Großmutter, Weihnachten 1943
KR
Karl Raddatz
→
ER
Elfriede Raddatz
Beenden
Annotierungsmodus aktiv
Klicken Sie auf eine Textstelle im Dokument.
Dark annotate: teal ghost button fills teal bg + navy text. Hint strip uses teal text on very dark bg. PDF outline uses 15% teal instead of navy.

## 4 · Responsive behaviour rules

Exact breakpoint decisions for every element. Implement these as Tailwind responsive classes.

Element | ≤ 320 px | 375–767 px | 768–1023 px | ≥ 1024 px
--- | --- | --- | --- | ---
Topbar height | 44 px | 50 px | 52 px | 52 px
Back button | Square icon (24×24 px, `border-radius: 3px`) | Circle (26×26, `border-radius: 50%`) | Circle (28×28) | Circle (28×28)
Title font | 10 px / 800 / Georgia | 10.5 px / 800 | 11.5 px / 800 | 12–12.5 px / 800
Meta row (chips) | Hidden — replaced by plain-text meta line below title | Shown — abbreviated names (first initial + last name) | Shown — full names | Shown — full names + location
Date format | Short: `24.12.1943` inline in meta text | Short: `24.12.1943` | Short: `24.12.1943` | Long: `24. Dezember 1943`
Location in date | Hidden | Hidden | Shown if present | Shown if present
Status chip | Hidden | Hidden | Shown inline with title | Shown inline with title
Overflow threshold | N/A — chips hidden; overflow shown as "+N" in plain text | After 1st receiver → "+N" (no "weitere") | After 1st receiver → "+N weitere" | After 1st receiver → "+N weitere"
Annotate button | Hidden | Hidden | Shown with text label | Shown with text label
Edit button | Shown — text "Edit" | Shown — text "Edit" | Shown — text "Bearbeiten" | Shown — text "Bearbeiten"
Download button | Hidden | Hidden | Shown as icon | Shown as icon
Divider between actions | Hidden | Hidden | Shown | Shown
Accent bar | `border-left: 3px` — always present | `border-left: 3px` | `border-left: 3px` | `border-left: 3px`
Hint strip (annotate) | Hidden — no annotation mode on mobile | Hidden | 18 px strip below main row | 18 px strip

## 5 · Overflow tooltip — expanded state

Clicking or tapping the "+N weitere" pill opens a compact floating panel listing all remaining recipients. Shown at desktop size, light and dark.

1024pxLight · tooltip open
Rundbrief an die Familie, Sommer 1951
Archiviert
18.07.1951
·
KR
Karl Raddatz
→
ER
Elfriede Raddatz
+3 weitere
Weitere Empfänger
HR
Hans Raddatz
MR
Maria Raddatz
GR
Gerhard Raddatz
Annotieren
Bearbeiten
Overflow pill fills navy on click/focus. White tooltip panel drops below with a heading "Weitere Empfänger" + each person as avatar + full name. Clicking a name navigates to their person profile.
1024pxDark · tooltip open
Rundbrief an die Familie, Sommer 1951
Archiviert
18.07.1951
KR
Karl Raddatz
→
ER
Elfriede Raddatz
+3 weitere
Weitere Empfänger
HR
Hans Raddatz
MR
Maria Raddatz
GR
Gerhard Raddatz
Annotieren
Bearbeiten
Dark tooltip: dark bg (#0F1923) + dark border, heading uses ink-3 dark, names use ink-2 dark (#8AAABB). Pill inverts to teal bg + navy text when active.

## 6 · Implementation notes

Chip overflow logic | Compute in Svelte: `$derived` — if `receivers.length > 1`, show `receivers[0]` + overflow pill with count `receivers.length - 1`. At ≥768 px only, show both receivers if count = 2 (no overflow needed for exactly 2).
Overflow tooltip | Use a Svelte `$state(false)` toggle + `onclick` on the pill. Render the tooltip as an absolutely positioned `<div>` inside the chip row container (overflow: visible on the row). Close on outside click via `onclickoutside`.
Tooltip accessibility | Pill: `role="button" aria-expanded={open} aria-label="{count} weitere Empfänger"`. Tooltip: `role="list"`. Each name: `role="listitem"`. Close on Escape via `onkeydown`.
Back button | Always an `<a href="/documents">`, never a `<button>`. `aria-label="Zurück zur Dokumentenliste"`. Shape changes via CSS class: `rounded-sm` at <375 px, `rounded-full` at ≥375 px.
Dark mode accent bar | `border-left: 3px solid var(--color-primary)` in light → `var(--color-primary-fg)` in dark. The component should not hardcode a colour — use the CSS custom property so it follows the theme automatically.
Annotate hint strip | Only mount the strip DOM element when `annotateMode === true` (Svelte `{#if}`). Don't use CSS height animation — avoids layout shift with the PDF viewer below. Hidden entirely on <768 px (annotation not available on touch).
Touch targets | Back (circle, 28 px rendered) → extend clickable area with `padding: 8px` (44 px total ✓). Overflow pill (≈55 px wide) → already ≥44 px ✓. Edit button (≥60 px wide) ✓.