# Stammbaum — Document Badge · Inline Pill Variant

Design spec for the inline relationship pill on the Document Detail page. Relationship labels appear as inline pills directly next to each person's name — both in the 48 px sub-header bar and in the Personen column of the 3-column metadata drawer. Example: Karl Raddatz ELTERNTEIL → Hans Raddatz KIND. This is View 2 of 3 in the Stammbaum document-badge feature set.

Familienarchiv · 2026-04-27 · Leonie Voss, UX Lead
Stammbaum Feature View 2 of 3 — Document Badge Inline Pill Variant Desktop / Tablet / Mobile Light + Dark

## 1 · Design tokens

All colour values used by the inline pill and its surrounding context. Light and dark themes are shown side by side. Contrast ratios are against the respective surface colour.

Karl Raddatz ELTERNTEIL
Karl Raddatz ELTERNTEIL
Pill anatomy
border-radius: 9999px · padding: 1px 8px
font: Montserrat 9px 700 uppercase letter-spacing .07em
margin-left: 8px from name span · vertical-align: middle
Light theme — surface #ffffff

Pill bg | rgba(161,220,216,.25) — near-white on white~14:1 AAA ✓ (text on near-white)
Pill border | #a1dcd8 — mint accent outline
Pill text | #012851 — navy ink14.5:1 AAA ✓
Person name | #4b5563 — Montserrat 11px (sub-header)
Meta person name | #012851 — Tinos 9.5px (metadata drawer)
Sub-header bg | #ffffff
Sub-header border | #e4e2d7
Arrow (decorative) | #a1dcd8 — `aria-hidden` non-text only
Meta label | #6b7280 — Montserrat 9px 700 uppercase4.8:1 AA ✓
Meta value | #012851 — Tinos 13px14.5:1 AAA ✓
Doc title | Tinos serif 18px · #012851
Avatar KR | #012851 — navy
Avatar HR | #5a2d6f — purple

Dark theme — surface #011526

Pill bg | rgba(0,199,177,.10) — dark teal washpasses AA ✓
Pill border | #00c7b1 — turquoise
Pill text | #f0efe9 — warm white14.5:1 AAA ✓
Person name | #9ca3af — (sub-header)
Meta person name | #f0efe9 — (metadata drawer)
Sub-header bg | #011526
Sub-header border | #0d3358
Arrow (decorative) | #00c7b1 — `aria-hidden` non-text only
Meta label | #8b97a57.1:1 AAA ✓
Meta value | #f0efe914.5:1 AAA ✓
Doc title | Tinos serif 18px · #f0efe9

⚠ Pill background rgba(161,220,216,.25) is nearly transparent on white — the effective contrast for the text is calculated against the near-white composite, yielding ~14:1. The arrow between sender and receiver chips in the sub-header is `aria-hidden="true"` — directional meaning is conveyed by DOM order (sender before receiver) and the visual left-to-right reading order.

## 2 · Desktop (1280 px) — light & dark

Full document detail page at ~65% scale. Sub-header bar (48 px) shows inline pills next to avatar chips. Metadata drawer is open, showing pills next to person names in the Personen column. Both light and dark themes shown side by side.

Light theme
W-0311 · Divacca
KR
Karl Raddatz ELTERNTEIL
HR
Hans Raddatz KIND
Details ▾
Transkribieren
Bearbeiten
Details
Datum
—
Ort
Divacca
Status
Hochgeladen
Personen
Absender
KR
Karl Raddatz ELTERNTEIL
Empfänger
HR
Hans Raddatz KIND
Schlagwörter
Familie 1923 Berlin

Light. Pills appear in both the sub-header chip row and the metadata Personen column. Arrow between chips is mint-coloured and aria-hidden.

Dark theme
W-0311 · Divacca
KR
Karl Raddatz ELTERNTEIL
HR
Hans Raddatz KIND
Details ▾
Transkribieren
Bearbeiten
Details
Datum
—
Ort
Divacca
Status
Hochgeladen
Personen
Absender
KR
Karl Raddatz ELTERNTEIL
Empfänger
HR
Hans Raddatz KIND
Schlagwörter
Familie 1923 Berlin

Dark. Pills flip to rgba(0,199,177,.10) bg, #00c7b1 border, #f0efe9 text. Sub-header and metadata surfaces both use #011526.

## 3 · Tablet (768 px)

The 3-column metadata grid collapses to a single stacked column. The sub-header truncates the document title and moves secondary actions behind a "…" overflow button. Pills remain inline next to person names in both locations.

Tablet · 768 px · Light
W-0311 · Divacca
Bearbeiten
···
Personen
Absender
KR
Karl Raddatz ELTERNTEIL
Empfänger
HR
Hans Raddatz KIND
Details
Ort
Divacca
Status
Hochgeladen
Schlagwörter
Familie 1923

Tablet light. 3-column metadata collapses to single column. Pills stay inline with names. Sub-header shows only title + primary action + overflow menu.

Tablet · 768 px · Dark
W-0311 · Divacca
Bearbeiten
···
Personen
Absender
KR
Karl Raddatz ELTERNTEIL
Empfänger
HR
Hans Raddatz KIND
Details
Ort
Divacca
Status
Hochgeladen
Schlagwörter
Familie 1923

Tablet dark. Same collapse behaviour. Dark pill tokens apply throughout.

## 4 · Mobile (375 px)

Sub-header is simplified to back arrow and document title only — no person chips in the bar. Metadata is full-width single column. Each person row is `flex; align-items: center; flex-wrap: nowrap` — avatar, name, and pill on one line. If the name is very long the row wraps gracefully before the pill. Only primary action buttons are shown.

Mobile · 375 px · Light
W-0311 · Divacca
Bearbeiten
Absender
KR
Karl Raddatz ELTERNTEIL
Empfänger
HR
Hans Raddatz KIND
Ort
Divacca
Status
Hochgeladen
Schlagwörter
Familie 1923 Berlin

Mobile light. No chips in sub-header — only title + primary action. Person rows: avatar + name + pill, flex-wrap:nowrap. Pill text drops to 6px to fit.

Mobile · 375 px · Dark
W-0311 · Divacca
Bearbeiten
Absender
KR
Karl Raddatz ELTERNTEIL
Empfänger
HR
Hans Raddatz KIND
Ort
Divacca
Status
Hochgeladen
Schlagwörter
Familie 1923

Mobile dark. Pill tokens #00c7b1/#f0efe9 at reduced 6px font — still passes AA on dark surface.

## 5 · Edge cases — when no pill is rendered

Three cases where the pill is silently omitted. The person name renders as normal — no gap, no placeholder.

No family relationship → no pill
Absender
KR
Karl Raddatz
Empfänger
ME
Maria Engel
— no pill —
`inferredRelationship === null` because the backend returns 404 (no kinship path). Name renders without trailing pill.
Social relationship (Kollegen) → pill shows label
Absender
KR
Karl Raddatz KOLLEGE
Empfänger
FW
Fritz Weber KOLLEGE
Non-family relationships (Kollege, Freund, etc.) returned by the inference endpoint still render as pills. The pill component is label-agnostic — it renders whatever `inferredRelationship` provides.
Multiple receivers → no pill
Absender
KR
Karl Raddatz
Empfänger
HR
Hans Raddatz
ER
Elfriede Raddatz
— no pill —
`receivers.length > 1` — inference endpoint is never called, `inferredRelationship` is `null`. No pill on any person chip.

## 6 · Implementation reference

Exact CSS/Tailwind values for every element of the pill and its context. Use these as the ground truth during implementation review.

Element | Tailwind / CSS | Notes
--- | --- | ---
Inline pill (light) | `rounded-full border border-[#a1dcd8] bg-[rgba(161,220,216,.25)] px-2 py-0.5 text-[9px] font-bold uppercase tracking-[.07em] text-[#012851] ml-2 align-middle inline` | Montserrat 9px 700. `ml-2` = 8px from name span. `vertical-align: middle` aligns cap-height to person name.
Inline pill (dark) | `dark:bg-[rgba(0,199,177,.10)] dark:border-[#00c7b1] dark:text-[#f0efe9]` | All three dark overrides applied together. Rest of pill class unchanged.
Person name span | `font-sans text-[11px] text-[#4b5563] dark:text-[#9ca3af]` (sub-header) or `font-serif text-[9.5px] text-ink dark:text-[#f0efe9]` (metadata) | Name and pill share a `flex items-center gap-0` wrapper. Pill is the immediate next sibling of the name `<span>`.
Sub-header chip area | `flex items-center gap-1.5` | Wraps one sender chip + arrow + one receiver chip. Placed after the doc-title block, before action buttons.
Chip (avatar + name + pill) | `flex items-center gap-1` | Avatar, name span, and pill as three siblings inside the chip div.
Arrow between chips (sub-header) | `h-2.5 w-2.5 shrink-0 text-[#a1dcd8] dark:text-[#00c7b1]` with `aria-hidden="true"` | Arrow SVG carries no semantic information. DOM order (sender chip before receiver chip) conveys direction for assistive technology.
Person avatar (sub-header) | `w-5 h-5 rounded-full flex items-center justify-center text-[6px] font-bold text-white shrink-0` | 20×20 px. Initials in 6px bold white. Background colour is person-specific (set inline).
Person avatar (metadata) | `w-5 h-5 rounded-full flex items-center justify-center text-[6.5px] font-extrabold text-white shrink-0` | Same 20×20 px. Slightly heavier weight (800) to match existing drawer card style.
Pill condition | `{#if inferredRelationship} … {/if}` wraps both the sender pill and the receiver pill | Render only when `inferredRelationship !== null && receivers.length === 1`. The check lives in `+page.server.ts`, not in the component.
Pill label value | `inferredRelationship.labelFromA` next to sender, `inferredRelationship.labelFromB` next to receiver | Labels are pre-translated strings from the backend. No frontend i18n key needed for the label text itself.
Mobile person row | `flex items-center gap-1 flex-nowrap` | `flex-wrap: nowrap` keeps avatar + name + pill on one line. If name overflows container, truncate name with `truncate`, never truncate the pill.
Mobile pill font-size | `text-[6px]` at ≤375 px | Reduced from 9px (desktop) to 6px on mobile to fit without overflow. Contrast still passes AA at 6px bold.
Sub-header at mobile | Chips removed entirely from sub-header at `max-width: 767px` | Sub-header shows only back arrow + document title + primary action button. Person chips with pills appear only in the metadata section on mobile.

Accessibility note: The pill text ("ELTERNTEIL", "KIND") is uppercase visually but the accessible name should be the mixed-case label from the backend (`labelFromA`). Apply `aria-label={labelFromA}` on the pill span so screen readers announce "Elternteil" not "E-L-T-E-R-N-T-E-I-L". The visual uppercase is achieved with CSS `text-transform: uppercase`, not by changing the source string.