The visual language, component patterns, accessibility rules, and responsive behaviour for the Familienarchiv web application. Informed by De Gruyter brand guidelines and adapted for a dual-audience archival product.
v1.02026-03Leonie Voss · UI/UX Lead
1 · Design Philosophy
Core principle
Archival warmth meets functional precision. The Familienarchiv interface is a quiet, focused tool for preserving family memory. It should feel like a well-organised library — warm parchment backgrounds, serif type for human names and content, sans-serif utility chrome — never a social app or consumer product.
Design for the senior researcher on a slow mobile connection in bright daylight first. If it works for them, it works for everyone.
Tone
Calm & purposeful
No decorative animation. No auto-dismissing toasts. No more than 3 focal points per screen. Actions are always available — nothing hides on hover-only.
Information density
Progressive disclosure
Advanced and destructive actions live in collapsible Danger Zone accordions. Filter panels expand when needed, collapse to a strip when not. Desktop can be denser; mobile must be breathable.
Accessibility
WCAG AA as baseline
Every text-background combination must meet WCAG 2.2 AA (4.5:1 for normal text, 3:1 for large text). Body copy targets AAA (7:1). Color is never the only cue — always pair with icon or label.
2 · Color System
De Gruyterbrand.degruyter.com
The De Gruyter brand palette is the source of truth for all color decisions. Primary is always black. Secondary colors are used with black only — never combined with each other. Accent colors appear only with black. The Familienarchiv app adapts this system by replacing black-dominant UI with deep navy (#002850) as the primary interactive color to soften the archival aesthetic while staying within the brand's dark-anchor principle.
De Gruyter Primary
Black — Primary
#000000
Dominates all layouts. Logo, headline type, layout anchoring. Always present.
White
#FFFFFF
Surfaces, cards, form fields. White logo on dark backgrounds.
De Gruyter Secondary Colors
Use each secondary color only with black — never combine two secondary colors together. Never use white text on Yellow-Green or Mustard.
Yellow-Green
#8A8B1D · PMS 384
⚠ Use BLACK text only. White fails contrast.
Muted Brown
#8C7E5E · PMS 2325
Warm neutrals, archival accents.
Silver
#CACAC9 · PMS 420
Decorative only. Never as text on white — fails contrast.
Blue-Green
#007596 · PMS 7705
5.3:1 on white → WCAG AA ✓ White text on this color.
Magenta
#A81266 · PMS 234
6.8:1 on white → WCAG AA ✓
Granite Gray
#615B66 · PMS 2363
Secondary body text on white only.
Mustard
#AF860E · PMS 1245
⚠ Use BLACK text only. Warning states.
De Gruyter Accent Colors
Accent colors are used only in combination with black. Never combine two accent colors — exception: data visualizations with a defined key.
Turquoise
#00C7B1
Gold
#FFB81C
9.1:1 on black → WCAG AAA ✓
Lavender
#BF4DA5
Blue
#008AD8
Rose
#F18070
OA Orange
#F18700
Open Access only. Not for general UI.
Familienarchiv Application Tokens
These CSS custom properties are the concrete values used in the app. They are derived from the De Gruyter palette and the archival aesthetic. Always use these tokens — never hardcode raw hex values in component code.
Token
Value
Preview
Usage
--brand-navy
#002850
Primary interactive color: buttons, active states, key headings, links. Replaces De Gruyter black in UI chrome.
--brand-nav
#0D2240
Navigation bar, sidebars, entity panels. Slightly darker than navy.
--brand-mint
#A6DAD8
Active state underlines, accent borders, hover highlights. Never as standalone text.
--brand-sand
#ECEAE4
Page background. Warm parchment. The breathing room of the layout.
--surface
#FFFFFF
Cards, detail panels, form fields, any white surface content lives on.
--surface-alt
#F7F5F2
List panel backgrounds, panel headers, table row alt. One step warmer than white.
--surface-hover
#F0EDE8
Hover state on list items, panel headers.
--border
#E8E4DF
Default card and form borders. Warm, not cold gray.
All text combinations must pass WCAG AA. Key pairs used in the app:
Button
14.7:1
AAA
#FFFFFF on #002850 — primary button, nav active
Nav
16.1:1
AAA
#FFFFFF on #0D2240 — navbar, sidebar
Body
18.1:1
AAA
#1A1A1A on #FFFFFF — body text on cards
Page
16.4:1
AAA
#1A1A1A on #ECEAE4 — text on sand background
Label
4.5:1
AA
#888888 on #FFFFFF — section labels, metadata. Minimum passing.
Muted
2.3:1
FAIL
#AAAAAA on #FFFFFF — decorative only, never for real text
DG
5.3:1
AA
White on DG Blue-Green — use white text on this
⚠
2.1:1
FAIL
DG Yellow-Green with white text — always use black text on this
OK
8.6:1
AAA
DG Yellow-Green with black text ✓
⚠
1.6:1
FAIL
DG Silver — decorative only, never as text color on white
Dark Mode Tokens
Dark mode is not a color inversion. It remaps tokens intentionally across the navy spectrum. The archival warmth is preserved through warm dark backgrounds.
Token
Light value
Dark value
Notes
--bg-page
#ECEAE4
#0A1628
Deep navy — not pure black
--bg-surface
#FFFFFF
#0F1E35
Cards, panels
--bg-surface-alt
#F7F5F2
#162236
List panels, alt rows
--bg-nav
#0D2240
#050E1A
Darker for nav in dark mode
--border
#E8E4DF
#1E3352
--border-strong
#C8C4BE
#2A4570
--text-primary
#1A1A1A
#E8E6E1
Warm white, not #FFF
--text-secondary
#555555
#A8B4C4
--text-muted
#888888
#6B7E96
Must pass 4.5:1 on dark bg
--brand-navy (interactive)
#002850
#4A8FD4
Lightened so links are visible
--brand-mint
#A6DAD8
#7DC4C0
Slightly desaturated for dark
✓ Do
Define all colors as CSS custom properties — never hardcode hex values in components
Map light → dark tokens semantically (--bg-surface not --white)
Use black text on De Gruyter Yellow-Green and Mustard backgrounds
Use white text on --brand-navy and --brand-nav backgrounds
Keep --text-muted (#888) as the minimum for readable labels
✕ Don't
Use De Gruyter Silver (#CACAC9) as a text color on white
Combine two De Gruyter secondary or accent colors in the same element
Implement dark mode by simply inverting the light palette
Use --text-xmuted (#AAA) for any text that carries meaning
Rely on color alone to convey state (always pair with icon or label)
3 · Typography
Two-font system
Montserrat (sans-serif) — UI chrome: labels, buttons, metadata, navigation. Mirrors De Gruyter's Gotham: modern, legible, uppercase for headings.
Merriweather (serif) — Content: person names, document titles, page headings, quoted text. Mirrors De Gruyter's Times: warm, authoritative, human.
Die Familie Raddatz lebte von 1887 bis 1943 in Breslau. Diese Sammlung enthält über 240 digitalisierte Briefe, Urkunden und Fotografien aus dem Familienbesitz.
Document summaries, notes fields, any long-form content. Minimum 16px — never smaller.
Status dots are always paired with a text label. Never use color alone for document lifecycle state.
5.6 · Alerts & Banners
ℹDer Import läuft im Hintergrund. Dies kann einige Minuten dauern.
⚠Es gibt ungespeicherte Änderungen. Bitte speichern Sie, bevor Sie die Seite verlassen.
✕Der Datei-Upload ist fehlgeschlagen. Maximal 50 MB pro Datei erlaubt.
✓15 Dokumente wurden erfolgreich importiert.
✓ Do
Include an icon + text in every alert (never color-only)
Add role="alert" for error messages, role="status" for info banners
For seniors: persistent banners stay visible until manually dismissed
Place banners above the related content area, not floating over it
✕ Don't
Auto-dismiss error or warning toasts on a timer
Stack more than 2 alerts in the same view
Use generic "An error occurred" — specify what failed and what to do
Show success alerts for trivial operations (e.g. typing a character)
5.7 · Empty States
📂
Keine Personen gefunden
Versuchen Sie einen anderen Suchbegriff oder legen Sie eine neue Person an.
Neue Person anlegen
Border: 2px dashed #D1CCC8 · bg #F7F5F2 · Icon in 48px circle · Serif heading · CTA button
5.8 · Danger Zone
⚠ Gefahrenzone
Diese Aktionen können nicht rückgängig gemacht werden. Bitte lesen Sie die Beschreibung sorgfältig, bevor Sie fortfahren.
Geben Sie zur Bestätigung den Namen "Anna Raddatz" ein:
Always hidden in a collapsed accordion on load. Require typed confirmation for irreversible delete actions.
5.9 · Save Bar
Long forms (edit document, edit person): sticky, full-bleed
Ungespeicherte Änderungen
Short forms (new person, new tag): card-style with top margin
6 · Dark Mode
Dark mode is available by default (millennial preference). It uses the deep navy spectrum — not grey or black — preserving the archival warmth in dark contexts. Always verify contrast ratios after remapping tokens.
FAMILIENARCHIVDokumentePersonenM. Raddatz
Dokument
Brief an Tante Frieda, Weihnachten 1932
Von: Karl Raddatz · An: Frieda Schiller
Dark mode palette: page bg #0A1628 · surface #0F1E35 · text #E8E6E1 · muted text #6B7E96 · interactive #4A8FD4 · mint #7DC4C0
✓ Do
Use prefers-color-scheme: dark as the CSS media query trigger
Lighten interactive colors for dark mode (#4A8FD4 instead of #002850)
Use warm near-white (#E8E6E1) instead of pure white for text on dark
Re-verify every text-background contrast pair in dark mode separately
Keep mint accent (#7DC4C0) for active states — slightly desaturated from light mode
✕ Don't
Simply invert the light mode palette — this breaks the visual hierarchy
Use pure black (#000) as the dark background — too harsh
Use the same #002850 navy as interactive color — it disappears on dark bg
Hardcode colors in components — always use CSS custom properties
Assume light mode contrast ratios carry over to dark mode
7 · Accessibility — WCAG 2.2
Dual-audience requirement
Familienarchiv serves both millennials (25–42) and seniors (60+). The senior constraint is the design driver: it almost always improves the millennial experience too. If a 67-year-old professor on mobile in sunlight can use it, everyone can.
1.4.3 — AA
Contrast Ratio: Text
Normal text (below 18px regular / 14px bold): minimum 4.5:1. Large text (18px+ regular or 14px+ bold): minimum 3:1. Body copy target: 7:1 (AAA).
Label text #888 on white: 4.5:1 ✓ Body text #1A1A1A on white: 18.1:1 ✓
1.4.11 — AA
Non-text Contrast
UI components (form borders, focus rings, icons) need 3:1 contrast against their background. A #D1D5DB form border on white = 1.9:1 — add focus state immediately.
Form border #D1D5DB on white: 1.9:1 (fails — acceptable only when focus state at 3:1+ compensates)
2.4.7 — AA
Focus Visible
Every interactive element must have a clearly visible focus indicator. Use outline: 3px solid rgba(0,40,80,.4); outline-offset: 2px. Never outline: none without replacement.
1.3.1 — A
Info & Relationships
Form labels must be programmatically associated with inputs. Section headings must use correct heading elements. Status colors must have text or icon pairing.
Body copy and person names must target 7:1 contrast ratio — AAA level. This serves seniors and outdoor mobile use. Use #1A1A1A on white (18.1:1) and #0D2240 on white (18.6:1).
2.5.3 — A
Label in Name
The accessible name of a button must contain its visible text. Icon-only buttons need aria-label. Visible "Speichern" button → aria-label must include "Speichern".
2.4.3 — A
Focus Order
Tab order must match visual reading order. Modal dialogs trap focus. On mobile, the sticky save bar must be reachable by keyboard. Avoid tabindex values above 0.
4.1.3 — AA
Status Messages
Dynamically injected alerts must be announced by screen readers without receiving focus. Use role="alert" for errors, role="status" for non-critical updates (import progress).
Seniors (60+) — Additional Requirements
Text & Readability
Minimum 16px body text — prefer 18px
Line-height minimum 1.6 for all body copy
Paragraph spacing minimum 0.5em
No text below 12px for any visible content
Avoid italic text for long passages
Interaction
Touch targets minimum 44×44px, prefer 48px
Persistent primary navigation always visible
No timed interactions or auto-advancing content
Redundant cues: color + icon + text label
Max 3 focal points per screen on mobile
Semantic HTML Landmarks
Every page must contain these landmark elements to enable screen reader navigation:
Element
Purpose
Required
<header>
Site navigation bar
✓ Always
<nav>
Primary navigation links with aria-label="Hauptnavigation"
✓ Always
<main>
Main page content — only one per page
✓ Always
<footer>
Page footer with meta links
✓ Always
<aside>
Sidebar panels (person card, filter panel)
When sidebar present
role="dialog" + aria-modal="true"
Modal overlays (confirm delete)
When modal present
8 · Spacing & Layout Rhythm
Spacing follows a 4px base grid. All values are multiples of 4. Key values in the component system:
Token
Value
Usage
--space-1
4px
Icon gaps, tight inline spacing
--space-2
8px
Chip gaps, input inner padding
--space-3
12px
Card inner padding (compact), list item padding
--space-4
16px
Form group spacing, section body padding
--space-5
20px
Card padding (default), panel padding
--space-6
24px
Section gap, grid gap on mobile
--space-8
32px
Page horizontal padding, section separation
--space-12
48px
Page top/bottom padding, masthead padding
--space-18
72px
Section-to-section gap
Panel system
Entity Nav: 120px (desktop), 48px icon strip (tablet), hidden (mobile). List Panel: 240px (desktop), collapsible to 32px handle (tablet), full-screen push (mobile). Detail Panel: fills remaining space. Total fixed columns on desktop: 120 + 240 = 360px out of ~1200px viewport.
9 · Quick Reference
Things you must always do
Visible focus ring on every interactive element
Color + icon/text together for any status indication
<label for> on every form input
aria-label on every icon-only button
Start design at 375px, test at 320px
CSS custom properties for every color value
44px minimum touch target height on mobile
role="alert" on dynamically injected error messages
main, nav, header, footer landmarks on every page
Typed confirmation for irreversible delete actions
Things you must never do
outline: none without a custom focus replacement
Color alone to convey state (error, success, status)
Text below 12px in production
Auto-dismiss error or warning toasts
White text on De Gruyter Yellow-Green (#8A8B1D)
Silver (#CACAC9) as text color on white
Combine two De Gruyter secondary colors
Dark mode as a simple light-mode inversion
Hardcode hex values in components
Design desktop-first and shrink to mobile
Familienarchiv Style Guide · v1.0 · 2026-03
Leonie Voss · UI/UX Lead · Based on De Gruyter brand guidelines