Visual specification for the generational family tree view. Covers the SVG canvas with Gen I–III nodes, the 268 px side panel (resting and add-form states), and responsive behavior at 768 px (tablet, slide-over) and 375 px (mobile, horizontal scroll). Light and dark themes throughout.
All colour values used by the tree canvas, nodes, connectors, and side panel. The component uses only semantic Tailwind tokens — no hardcoded hex. Light and dark themes are handled automatically by layout.css.
| Canvas bg | #f0efe9 — sand page background |
| Node bg default | #ffffff — white |
| Node bg selected | #012851 — navyAAA on white acc. bar |
| Node accent bar | #a1dcd8 — mint, 4 px left strip on selected |
| Node border default | #012851 1.5 px |
| Connector / dot | #012851 stroke-width 1.5, r=4.5 |
| Name text default | #01285114.5:1 AAA ✓ |
| Name text selected | #ffffff on #01285114.5:1 AAA ✓ |
| Years text default | #6b72804.8:1 AA ✓ |
| Years text selected | rgba(255,255,255,.6) — decorative, aria-hidden years |
| Gen label | #6b7280 — 8 px, tracking 2 px, aria-hidden |
| Panel surface | #ffffff |
| Direct pill | rgba(161,220,216,.2) bg · #a1dcd8 border · #012851 text |
| Derived pill | #f5f4ef bg · #e4e2d7 border · #4b5563 text |
| Canvas bg | #010e1e |
| Node bg default | #011526 |
| Node bg selected | #a1dcd8 — mint inverted |
| Node accent bar | #012851 — navy inverted |
| Node border default | #1e3a55 1.5 px |
| Connector / dot | #3a6080 stroke-width 1.5 |
| Name text default | #f0efe914.5:1 AAA ✓ |
| Name text selected | #012851 on #a1dcd89.2:1 AAA ✓ |
| Years text default | #8b97a57.1:1 AAA ✓ |
| Gen label | #4e6070 — aria-hidden |
| Panel surface | #011526 |
| Direct pill | rgba(0,199,177,.12) bg · #00c7b1 border · #f0efe9 text |
| Derived pill | #011a30 bg · #0d3358 border · #9ca3af text |
Full tree canvas with Gen I–III nodes and the 268 px side panel showing Maria Raddatz (selected). Rendered at ~65 % scale. Light and dark stacked.
Light. Maria Raddatz (Gen I, right) is selected — navy fill, mint accent bar, white text. Side panel at right shows direkte Beziehungen as mint pills and abgeleitete Beziehungen as sand pills. "+" add button is quiet / low-opacity.
Dark mode. Maria's node inverts to mint (#a1dcd8) fill with navy accent bar and navy text — the exact inverse of light. Direct pills use #00c7b1 border on near-black bg; derived pills use #0d3358 border. Canvas bg is #010e1e.
Left: resting state — "+" text button is quiet (low opacity) below the direct relationships list. Right: add-form expanded — a compact inline form replaces the quiet button. No modal.
Resting. "+ Beziehung hinzufügen" sits below direct-relationship pills at 40% opacity. It is a button, not a link. Derived relationships are always read-only (no add button).
Expanded. Clicking "+" reveals a compact inline form: relationship-type select (full width), focused person-search input (navy border = focus indicator), optional Von/Bis Jahr row, and Abbrechen + Speichern. No modal, no overlay.
Tree fills the full viewport width. The 268 px side panel is hidden by default and slides up as a bottom sheet when the user taps a node. Mode toggle and zoom controls remain visible in the page header.
Tablet. The 268 px side panel column is removed; the tree card spans full page width (minus 32 px gutter). Tapping any node slides up a bottom sheet containing the same panel content. Mode toggle and zoom buttons remain in the top bar.
App header is abbreviated (logo + avatar only, no nav links). "Stammbaum" appears as a page-level h1 below the header. The tree card overflows horizontally — the user scrolls left/right. Zoom controls are removed on mobile.
Mobile 375 px. Header is abbreviated — logo + avatar, no nav links. "Stammbaum" is a standalone h1. Baum/Liste mode toggle is full width. Tree card has overflow-x: scroll; the SVG renders at full 820 px width and the user pans. Zoom controls removed.
| Element | Tailwind / CSS | px value | Notes |
|---|---|---|---|
| Tree node | w-[144px] h-[50px] rounded-sm |
144 × 50 | SVG rect rx="2"; same size all generations |
| Selected accent bar | w-1 h-full bg-accent |
4 × 50 | Mint on light; navy on dark; left edge of selected node |
| Side panel | w-[268px] shrink-0 |
268 | Hidden at ≤ 768 px; becomes bottom sheet on node tap |
| Tree + panel gap | gap-[18px] |
18 | Flex row gap between tree card and side panel |
| Page padding | px-8 py-6 |
32 / 24 | Reduced to px-3 py-3 on mobile |
| Direct pill | rounded-full px-2 py-0.5 text-[9px] |
— | Mint border rgba(161,220,216,.2) bg; #a1dcd8 border light |
| Derived pill | rounded-full px-2 py-0.5 text-[9px] |
— | #f5f4ef bg; #e4e2d7 border light; read-only, no add button |
| Connector stroke | SVG stroke-width="1.5" |
1.5 px | #012851 light · #3a6080 dark |
| Marriage dot | SVG r="4.5" |
9 px dia | Filled circle at connector midpoints; same color as connectors |
| Gen label | text-[8px] tracking-[2px] uppercase |
8 px | aria-hidden="true"; #6b7280 light · #4e6070 dark |
| Node name text | font-serif text-[10px] font-bold |
10 px | Two lines: given name y+20, surname y+32; text-anchor middle at cx |
| Node years text | font-sans text-[8px] |
8 px | y+44 from node top; subdued color; not aria-hidden (content) |
| Zoom controls | flex border rounded-sm overflow-hidden |
26 × 26 each | Hidden on mobile (≤ 640 px) |
| Mode toggle (mobile) | flex w-full border rounded-sm overflow-hidden |
full width | Two segments: Baum (active) / Liste; full width on mobile only |
| Tree card scroll | overflow-x-auto |
— | Applied to tree card wrapper on mobile; SVG renders at full 820 px |