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

Karl Raddatz

Sender chip only. No arrow. Document without recipients (e.g. a diary entry or certificate).

1 receiver

Karl Raddatz

→

Elfriede Raddatz

Both shown in full. No overflow.

2 receivers

Karl Raddatz

→

Elfriede Raddatz

Hans Raddatz

Both receivers shown. No overflow. Edge case — only do this at ≥768 px. On narrow screens, collapse to 1 + "+1".

3 receivers

Karl Raddatz

→

Elfriede Raddatz

+2 weitere

Sender + 1st receiver shown. Remaining 2 collapse into "+2 weitere" pill.

5 receivers

Karl Raddatz

→

Elfriede Raddatz

+4 weitere

Always sender + 1st receiver + "+N weitere" regardless of total count.

No sender

Elfriede Raddatz

First available person shown. No arrow (direction unknown). Typical for photos, certificates, undated documents.

Dark theme — key overflow states

1 receiver

Karl Raddatz

→

Elfriede Raddatz

3 receivers

Karl Raddatz

→

Elfriede Raddatz

+2 weitere

5 receivers

Karl Raddatz

→

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

K. Raddatz

→

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

K. Raddatz

→

E. Raddatz

Edit

Dark 375 px: teal accent bar, dark chip bg (#0A1218 + #1E2D3D border), muted arrow colour.

375pxLight · 3+ receivers

Rundbrief, 1951

K. Raddatz

→

E. Raddatz

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

K. Raddatz

→

E. Raddatz

Edit

Dark overflow: "+2" pill uses dark bg (#0A1218) + muted border. Same pill shape as the chips.

768 px · Tablet

768pxLight · 1 receiver

FAMILIENARCHIV

Dokumente

Brief an Großmutter, Weihnachten 1943

Hochgeladen

24.12.1943

Karl Raddatz

→

Elfriede Raddatz

Annotieren

Bearbeiten

768 px: full chip row with full names. All three action buttons visible. Status chip shown.

768pxDark · 1 receiver

FAMILIENARCHIV

Brief an Großmutter, Weihnachten 1943

Hochgeladen

24.12.1943

Karl Raddatz

→

Elfriede Raddatz

Annotieren

Bearbeiten

Tablet dark: all elements visible, dark chip vocabulary throughout.

768pxLight · 4 receivers

FAMILIENARCHIV

Rundbrief an die Familie, Sommer 1951

Archiviert

18.07.1951

Karl Raddatz

→

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

FAMILIENARCHIV

Dokumente

Personen

Brief an Großmutter, Weihnachten 1943

Hochgeladen

24.12.1943 · Hamburg

Karl Raddatz

→

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

FAMILIENARCHIV

Dokumente

Brief an Großmutter, Weihnachten 1943

Hochgeladen

24.12.1943 · Hamburg

Karl Raddatz

→

Elfriede Raddatz

Annotieren

Bearbeiten

1024 dark: full layout, teal accent bar and inverted primary button.

1024pxLight · 5 receivers

FAMILIENARCHIV

Dokumente

Rundbrief an die Familie, Sommer 1951

Archiviert

18.07.1951 · Berlin

Karl Raddatz

→

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

FAMILIENARCHIV

Brief an Großmutter, Weihnachten 1943

Karl Raddatz

→

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

FAMILIENARCHIV

Dokumente

Personen

Konversationen

Brief an Großmutter, Weihnachten 1943

Hochgeladen

24. Dezember 1943 · Hamburg

Karl Raddatz

→

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

FAMILIENARCHIV

Dokumente

Personen

Brief an Großmutter, Weihnachten 1943

Hochgeladen

24. Dezember 1943 · Hamburg

Karl Raddatz

→

Elfriede Raddatz

Annotieren

Bearbeiten

Desktop dark: full date text, teal border, all three actions visible.

1440pxLight · 5 receivers

FAMILIENARCHIV

Dokumente

Rundbrief an die Familie, Sommer 1951

Archiviert

18. Juli 1951 · Berlin

Karl Raddatz

→

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

FAMILIENARCHIV

Brief an Großmutter, Weihnachten 1943

Karl Raddatz

→

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

FAMILIENARCHIV

Rundbrief an die Familie, Sommer 1951

Archiviert

18.07.1951

Karl Raddatz

→

Elfriede Raddatz

+3 weitere

Weitere Empfänger

Hans Raddatz

Maria Raddatz

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

FAMILIENARCHIV

Rundbrief an die Familie, Sommer 1951

Archiviert

18.07.1951

Karl Raddatz

→

Elfriede Raddatz

+3 weitere

Weitere Empfänger

Hans Raddatz

Maria Raddatz

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) ✓.