01 · Grundlage
Gemessene Referenzwerte, sinnvoll angewendet
Die Palette und Skala wurden aus dem bereitgestellten Referenz-Stylesheet gelesen. Die semantischen Namen beschreiben ihre Rolle im Leseraum und vermeiden eine Übernahme von Logos oder institutionellen Aussagen.
#150023 · Überschriften#344060 · Lauftext#252342 · Themenfooter#e6733c · nur grosse, dekorative Markierung#a3b5c1 · sekundäre Trennung#e0eef6 · Rahmen, Flächen02 · Schrift und Raum
Inter mit festen, gut lesbaren Stufen
Die Referenz nutzt Inter 400, 700 und 400 italic mit normalem Tracking. Im Leseraum bleiben Formulare mindestens 16 Pixel gross. Der Textbereich setzt ab Desktop auf 18/28 für konzentriertes Lesen.
| Rolle | Referenz | Verwendung im Leseraum | Angewendet |
|---|---|---|---|
| Mikro | 14 / 24px | Metadaten, Treffercount | 14 / 24px |
| Steuerung | 16 / 24px | Navigation, Eingaben, Buttons | 16 / 24px |
| Prosa Mobil | 16 / 24px | Einleitung und Methodik | 16 / 24px |
| Hero Mobil | 34 / 40px | Berichtseinstieg unter 720px | 34 / 40px |
| Lesetext gross | 26 / 36px | Bericht ab Desktop | 18 / 28px |
| Zwischenüberschrift | 34 / 40px | Kapitel und Teaser | 26 / 36px |
| Hero Tablet | 54 / 64px | Berichtseinstieg ab 720px | 54 / 64px |
| Hero Desktop | 72 / 86px | Berichtseinstieg ab 1024px | 72 / 86px |
03 · Wiederkehrende Muster
Orientierung und Recherche stehen vor Dekoration
Alle Muster behalten eine eindeutige Aktion. Der Wechsel von Navigation zu Recherche und zurück zum Beleg ist ohne versteckte Interaktion möglich.
Frage zum Bericht
Eine Anfrage bleibt immer dem Bericht zugeordnet. Die KI erstellt einen Vorschlag, keine unverifizierte Feststellung.
Die Antwort zeigt nur Stellen aus dem indexierten Bericht und nennt die Fundstellen.
Eine Quelle im Zusammenhang
Der Lesetext erhält bewusst weniger visuelle Signale als die Navigation. Eine Passage wird als Quelle lesbar, nicht als Karte oder KI-Ergebnis verkleidet.
04 · Zustände und Zugänglichkeit
Nachvollziehbar, bedienbar, rückgängig zu machen
Die Rechercheoberfläche kommuniziert ihr Ergebnis und ihre Grenzen mit Text. Farbe und Animation dürfen eine Information nie allein tragen.
Leer
«Noch keine Frage gestellt.» Erklärt, was als Nächstes möglich ist.
Wird geprüft
«Passagen werden im Bericht gesucht.» Die Anfrage bleibt sichtbar.
Keine belegte Antwort
«Zu dieser Frage wurden keine eindeutigen Stellen gefunden.» Bietet Suche oder Präzisierung an.
Fokus und Tastatur
Links, Schaltflächen, Eingaben und Offenlegen-Elemente bleiben nativ bedienbar. Sichtbarer Fokus: 2px, mit Abstand zum Element.
Kontrast
Tinte und Text dienen für Inhalt. Orange bleibt einer grossen oder dekorativen Markierung vorbehalten und trägt keinen kleinen Text.
Bildschirmgrössen
Navigation und Formulare stapeln sich auf Mobilgeräten. Touch-Ziele sind mindestens 44px hoch. Bei 200% Textvergrösserung ist kein Inhalt verdeckt.
Integrierte Produktionstokens aus src/civic.css
--font-product: 'Inter', Arial, sans-serif; --font-editorial-family: var(--font-product); --civic-ink: #150023; --civic-body: #344060; --civic-blue: #252342; --civic-orange: #e6733c; --civic-muted: #a3b5c1; --civic-light: #e0eef6; --civic-white: #fff; --type-xs: 0.875rem; --leading-xs: 1.5rem; --type-sm: 1rem; --leading-sm: 1.5rem; --type-base: 1.125rem; --leading-base: 1.5625rem; --type-lg: 1.25rem; --leading-lg: 1.75rem; --type-xl: 1.625rem; --leading-xl: 2.25rem; --type-2xl: 2.125rem; --leading-2xl: 2.5rem; --type-3xl: 3.375rem; --leading-3xl: 4rem; --type-4xl: 4.5rem; --leading-4xl: 5.375rem; --type-hero: var(--type-2xl); --leading-hero: var(--leading-2xl); --type-prose: var(--type-sm); --leading-prose: var(--leading-sm); --type-section: var(--type-lg); --leading-section: var(--leading-lg); --type-reading: var(--type-sm); --leading-reading: var(--leading-sm); --page-gutter: 1rem; --content-share: 100%; --container-max: 1280px; --space-section: 3rem; --space-page: 5rem; --footer-space: 5rem; --canvas: var(--civic-white); --surface: var(--civic-white); --surface-subtle: #f5f9ff; --surface-strong: var(--civic-light); --ink: var(--civic-ink); --ink-muted: var(--civic-body); --ink-faint: #5b6480; --line: #d5d7e6; --line-strong: #abb3cc; --accent: #4e6da5; --accent-hover: var(--civic-body); --accent-ink: #fff; --accent-soft: #edf2fa; --accent-on-soft: var(--civic-body); --radius-control: 0.25rem; --radius-panel: 0.625rem; --radius-footer: 1.25rem; --float-shadow: 0 1px 3px #25234226; --reading-highlight: var(--accent-soft); --reader-ground: #f5f9ff; --success: #246044; --success-soft: #edf6f0; --warning: #674600; --warning-soft: #fff5dc; --danger: #9d263f; --danger-soft: #fceff2;