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.
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.
| 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-hiddennon-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 |
| 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-hiddennon-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.
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. Pills appear in both the sub-header chip row and the metadata Personen column. Arrow between chips is mint-coloured and aria-hidden.
Dark. Pills flip to rgba(0,199,177,.10) bg, #00c7b1 border, #f0efe9 text. Sub-header and metadata surfaces both use #011526.
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 light. 3-column metadata collapses to single column. Pills stay inline with names. Sub-header shows only title + primary action + overflow menu.
Tablet dark. Same collapse behaviour. Dark pill tokens apply throughout.
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 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 dark. Pill tokens #00c7b1/#f0efe9 at reduced 6px font — still passes AA on dark surface.
Three cases where the pill is silently omitted. The person name renders as normal — no gap, no placeholder.
inferredRelationship === null because the backend returns 404 (no kinship path). Name renders without trailing pill.inferredRelationship provides.receivers.length > 1 — inference endpoint is never called, inferredRelationship is null. No pill on any person chip.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.