Eine Designsystem-Doku, die auch Nicht-Designer:innen lesen können.

Übernommen verbatim aus den Spherity Corporate Identity Guidelines v1.0 (Kapitel 1). Diese Sektion ist nicht produktspezifisch — sie definiert die Marke, in deren Auftrag wir Produkte gestalten. Bei Widerspruch zwischen dieser Doku und den CI Guidelines gewinnen die CI Guidelines.

0.4 Brand Values

Wert	Kern
Security First	Enterprise-grade Verschlüsselung, Zero-Trust-Architektur.
Decentralization	Self-Sovereign Identity ohne zentrale Autoritäten.
Compliance	GDPR, eIDAS 2.0, DSCSA, ESPR — immer einen Schritt voraus.
Sustainability	EcoVadis Gold, Circular Economy als strategisches Thema.
Interoperability	Offene Standards (W3C DID, Verifiable Credentials).
Inclusivity	Barrierefreies Design ist kein Nice-to-have, sondern Grundvoraussetzung.

0.5 Wie sich das in dieser Doku niederschlägt

Brand Value	UI/UX-Konsequenz	Querverweis
Security First	Status sichtbar machen, keine UI-„Magie" bei sicherheitsrelevanten Aktionen, Quelle und Aktualität immer mitliefern.	§3.1 Trust First, Polish Second
Decentralization	Verifiable-Credential-UX (Issuer · Holder · Verifier) als First-Class-Pattern.	§6 CARO · §7 VERA · §8 EIDA · §9 KYLE
Compliance	Regulatorische Begriffe sichtbar (DSCSA, eIDAS, ESPR, EUDI), Audit-Trail-Export verbindlich.	§12.1 · §13
Sustainability	Geringer Token-Footprint, keine ressourcenintensiven Animationen, Reduced-Motion-Pflicht.	§11.6.1 · §11.10
Interoperability	Open-Standards-konforme Datenstrukturen sichtbar (DID, VC, X.509).	§6–§9
Inclusivity	WCAG 2.2 AA Pflicht, Keyboard-First, Focus-Ring 2 px Cyan #2BFEBB.	§14

Der UI/UX-Guide ist die Single Source of Truth für alles, was die vier Spherity-Produkte (CARO, VERA, EIDA, KYLE) visuell und funktional zusammenhält. Er definiert die Spielregeln, damit Designer:innen, Entwickler:innen, Marketing und Sales nicht jedes Mal neu verhandeln, wie ein Button aussieht oder wann CARO-Petrol verwendet werden darf.

1.1 Geltungsbereich

• Alle Produkte: CARO, VERA, EIDA, KYLE — sowohl Authenticated-Apps als auch Public-Surfaces.
• Marketing-Surfaces (Website, Social, HubSpot-Email) — referenzieren CI & Bildsprache (§11.1, §11.8).
• Customer-Whitelabel-Branding (§17) — nur über den definierten Token-Contract.

1.2 Quelle der Wahrheit

• Diese Datei design.md ist verbindlich für alle Designentscheidungen.
• Figma-Bibliotheken: ❖ Untitled UI Figma — PRO VARIABLES (v8.0) als fremdgepflegte Foundation und ❖ Spherity UI Extensions (v1.0) als Layer-2-Implementation der Tokens (§10.1). Spherity-Library-Cover öffnen ↗
• Bei Konflikt zwischen Figma und design.md: design.md gewinnt; Figma-Korrektur erforderlich.

Spherity hat vier Produkte, die alle auf der gleichen Verifiable-Credentials-Basis arbeiten — aber unterschiedliche Persönlichkeiten, Branchen und Workflows haben. Was sie verbindet: gleiche Komponenten, gleiche Type, gleiche Sprache. Was sie unterscheidet: ein einziger Sub-Brand-Akzent (max. 10 % der Fläche).

2.1 Produkt-Status & Reife

• CARO — produktiv, B2B-Authenticated, Customer-deployments laufen (US Pharma).
• VERA — produktiv. Zwei Surfaces: VERA Studio (Admin-UI, authenticated) und VERA DPP (öffentliche End-User-Webseiten). Siehe §3.4.
• EIDA — in Skalierung, EWC 3.1.2 + BANZ KYC live, branchenagnostisch.
• KYLE — Standalone aus EIDA-Komponenten, Know your customer Banking.

2.1.1 Branchen-Mapping

Produkt	Primär-Branche	Reichweite
CARO	US Pharma (Hersteller, Großhändler, Distributoren)	USA, DSCSA-Geltungsbereich
VERA Studio · VERA DPP	Hersteller / Brand Owner / Auditoren in regulierten Industrien (Battery, Textile, Construction, Tyre, Automotive, Electronics)	EU + international (DPPs erstellen + verlinken)
EIDA	Branchenagnostisch — alle Unternehmen mit Identity-/Wallet-Bedarf	EU (eIDAS 2.0 / EUDI Wallet)
KYLE	Banking · Finanzdienstleister	EU (Bundesanzeiger als Issuer-Datenquelle)

2.2 Gemeinsame Foundation

• Spherity UI Extensions (Figma-Library) — alle Komponenten gemeinsam.
• Token-Layer (§11) — die produktübergreifenden Design-Tokens (Color, Typography, Spacing, Radius, Shadow, Motion). Identisch über alle Produkte; Sub-Brand-Differenzierung erfolgt ausschließlich über die Sub-Brand-Akzentfarbe.
• Sub-Brand-Akzent ist der einzige visuelle Differenzierer (§11.1).

3.6 Anti-Pattern-Liste (Verstoß = Re-Review)

• Sub-Brand-Akzent als Hero-Background (> 10 % Fläche).
• Multi-Icon-Sets (UUI + Material + Lucide gemischt).
• Generic „Diverse-Team-mit-Laptop"-Stock-Photos.
• Cyan auf Public-DPP-Surfaces für CTA und Status gleichzeitig (Doppelbedeutung).
• Custom-Komponente, wo Untitled UI Pro eine Standardlösung anbietet.

Wir denken nicht in Produkten, sondern in Personas mit Aufgaben. Jede Persona hat eine eigene Branche, einen eigenen Sub-Brand-Akzent und eine eigene Sprache.

4.1 Persona-Tonality-Mapping

Alle vier Authenticated-Apps folgen dem gleichen Top-Level-Skelett: Sidebar links (Workspace + Hauptnavigation), Topbar oben (Suchen, Konto, Benachrichtigungen), Content-Bereich rechts. Mobile: Sidebar wird zum Drawer, Topbar bleibt sticky.

5.1 Top-Level-Skelett (verbindlich)

• Sidebar (left) — Workspace-Switcher (oben), Primary-Nav (Mitte), Help & Account (unten).
• Topbar (top) — Breadcrumbs, Suchen, Benachrichtigungen, Kontoeinstellungen (kein Avatar — Account-Zugriff liegt unten in der Sidebar).
• Content (right) — Page-Title, Filter-Bar, Table / Detail-Panel.
• Footer — auf Authenticated-Apps minimal (Version + Status); auf Public-DPP-Seiten klassischer Marketing-Footer.

5.2 Mobile-Strategie (cross-product)

• Authenticated-Apps sind Tablet-tauglich, nicht Phone-First. Phone wird unterstützt, ist aber Audit/Read-Only.
• VERA-Public-DPP ist Phone-First — Endkund:innen scannen QR-Code unterwegs.
• Drawer-Navigation auf Tablet ≤ 768 px; Burger-Menu auf Phone ≤ 480 px.

CARO ist Spherity's B2B-Lieferketten-Tool. Supply-Chain-Manager:innen prüfen damit Zertifikate ihrer Zulieferer, exportieren Audit-Trails für Compliance-Reports, und integrieren Excel-Workflows. Optisch Petrol-akzentuiert, high-density, Desktop-first.

6.1 Key Flows

• Lieferanten-Onboarding — Einladung → Self-Service-Verifizierung → Approval.
• Audit-Trail-Export — Filter nach Lieferant/Zertifikat-Typ → CSV/PDF-Export (§12.1).
• Findings-Workflow — Offen / Zur Überprüfung / Gelöst mit Owner-Assignment.

6.2 UI-Eigenheiten

• Excel-Export-Button ist primär (CARO-Persona arbeitet aus Excel heraus).
• Findings-Status-Chips verwenden Sub-Brand-Petrol nur für „Open" — nicht für CTAs.
• Bulk-Aktionen auf Tabellenebene → Untitled UI Pro Table-Komponente.

VERA ist zwei Produkte in einem: die Authenticated-App für DPP-Owner (Pharma, Battery, Textile) und die Public-DPP-Seiten für Endkund:innen, die per QR-Code reinkommen. Beide sehen unterschiedlich aus — bewusst.

7.1 Authenticated

• Sidebar + Topbar wie §5.1, Arctic Blue-Akzent für „Aktiv"-Status.
• DPP-Editor mit Schema-Validation (Battery-Passport, Textile-DPP, Construction-DPP).
• Bulk-Publishing → QR-Code-Generation → Public-URL.

7.2 Public DPP (Findings aus §7.6.1)

• Mobile-First, Hero ≥ 60 vh, Verifizierungs-Badge prominent.
• Disclosure-Pattern: technische Details collapsed by default, „Mehr anzeigen" → expand.
• Cyan #2BFEBB nur für „Verifiziert"-Status — nie für CTAs auf Public-Surfaces.
• Sprache: B1-Niveau, kurze Sätze, keine Fachbegriffe ohne Erklärung.

7.3 Templates

• Battery-Passport — fokussiert auf Capacity, Cycle-Count, Material-Compliance.
• Textile-DPP — Material-Origin, Recycled-Content, Waschpflege.
• Construction-DPP — embedded Carbon, Lifecycle-Stage, Recyclability.

EIDA ist Spherity's Identity-Layer für Healthcare, Banking, Public Sector. EU-Wallet-Integration, KYC, EWC 3.1.2, BANZ KYC. Indigo-akzentuiert, juristisch-präziser Tonfall.

8.1 Use Cases

• EWC 3.1.2 — EU-Wallet-Conformance, Step-Up-Auth-Flows.
• BANZ KYC — Banking-/Finanz-Onboarding mit AML-Screening.
• Healthcare-Identity — Patient-Linking, GDPR-konform.

8.2 UI-Eigenheiten

• Step-Up-Auth-Banner: gelb-orange (Warning, nicht Sub-Brand) — User muss handeln.
• Audit-Log-Detail-View: read-only, exportierbar.
• EWC-Conformance-Badge in Header sichtbar (Trust-Signal).

KYLE ist der Engineering-Spin-off aus EIDA-Komponenten. Stand-alone, API-First, für Teams die Onboarding selbst implementieren wollen. Gunmetal-akzentuiert, Console-affine Sprache.

9.1 Übernommen aus EIDA

• KYC-Schemas, AML-Screening-Engine, Audit-Log-Format.
• Step-Up-Auth-Patterns, EWC-Konformität.

9.2 KYLE-spezifische Entscheidungen

• API-First — UI ist Sandbox/Console, nicht End-User-Surface.
• Onboarding-Flow-Builder visuell (Drag-Drop-Steps).
• Engineering-Console-Aesthetic: monospace-lastig, dichter, dunkler Default.

Wir bauen nicht jede Komponente selbst. Wir bauen auf Untitled UI Pro v8.0 auf, ergänzen es mit Spherity UI Extensions, und produzieren finale Produkt-Files für CARO/VERA/EIDA/KYLE auf dieser Basis.

10.1 Regeln für neue Komponenten

• Erst suchen, dann bauen — gibt es das in UUI Pro v8? In Spherity Extensions?
• Wenn neu: in Layer 2 (Extensions) bauen, nicht in Product-Files.
• Component-Review nach POC-Design-Contract (§10.3.1) durch Design-Lead.
• Token-Bindung verbindlich (§11) — kein Hex-Code direkt in der Komponente.

10.2 POC-Design-Contract

• POCs leben in einer Vibe-Coding-Sandbox-Library, nicht in Product-Files.
• Drei Status: Exploration (Sandkasten) → Candidate (Review-Ready) → Approved (in Layer 2).
• POC ohne Approval darf nicht in Production-Builds landen.

Vier Brand-Farben, vier Sub-Brand-Farben. Brand ist Pflicht, Sub-Brand ist die Persona-Akzentuierung — und limitiert auf 10 % der Fläche.

Archivo für alles UI & Display, IBM Plex Mono für Labels, Tokens und Code. Fertig. Keine dritte Schriftart.

--space-1:  4px
--space-2:  8px
--space-3:  12px
--space-4:  16px
--space-6:  24px
--space-8:  32px
--space-12: 48px
--space-16: 64px

Grid: 12-Spalten, Gap 24 px, Max-Width 1280 px (Authenticated), 1140 px (Marketing)

--radius-sm:  4px   /* Chips, Badges */
--radius-md:  8px   /* Inputs, Buttons */
--radius-lg:  12px  /* Cards */
--radius-xl:  16px  /* Modals */
--radius-full: 9999px

--shadow-sm:  0 1px 2px rgba(2,56,82,0.08)
--shadow-md:  0 4px 12px rgba(2,56,82,0.12)
--shadow-lg:  0 12px 32px rgba(2,56,82,0.18)

• --ease-out: cubic-bezier(0.16, 1, 0.3, 1) — Default für Hover, Reveal.
• --duration-fast: 120ms — UI-Hover, Toggles.
• --duration-base: 200ms — Modals, Panels.
• --duration-slow: 320ms — Page-Transitions.
• prefers-reduced-motion: reduce respektieren.

Definition. Micro-Animations sind kurze (≤ 250 ms), funktionale Bewegungen, die einen Zustandswechsel im UI sichtbar machen — Button-Press, Toggle-Flip, Field-Focus, Toast-Slide, Drawer-Open. Sie sind kein Schmuck. Sie sind Feedback-Mechanismen: das UI antwortet dem User, dass es seine Eingabe gehört hat. Spherity nutzt Micro-Animations sparsam — Vertrauen wird durch Stabilität signalisiert, nicht durch Choreographie.

Kategorie	Use-Case	Dauer	Easing	Was die Animation kommuniziert
Hover-Feedback	Button, Card, Row, Link	100–150 ms	ease-out	„Dieses Element ist klickbar."
Focus-Ring	Input, Button, Tab — Tastatur-Focus	100 ms Fade-in	ease-out	„Diese Stelle hat Tastatur-Focus."
State-Change	Toggle, Checkbox, Radio, Switch	150–200 ms	ease-out	„Klick registriert, Wert ist jetzt X."
Disclosure	Accordion, Collapsible, Tooltip	200 ms	ease-out	„Hier kommt mehr Inhalt."
Toast / Banner	Success-Toast, Error-Banner	200 ms in / 200 ms out	ease-out / ease-in	„Etwas Neues ist passiert, lies es kurz."
Drawer / Modal	Side-Drawer, Confirmation-Modal	250 ms	ease-in-out	„Kontext wechselt — Hintergrund pausiert kurz."
Loading-Spinner	API-Call, Validate-VC	siehe §11.6.1.3	linear	„Das System arbeitet noch."
Skeleton-Loader	Tabellen-Initial-Load, Cards	1.4 s Pulse-Loop	ease-in-out	„Daten kommen, hier wird eine Tabelle erscheinen."
Validation	Inline-Field-Error nach Submit	100 ms Color + max. einmaliger 4 px Shake	ease-out	„Dieses Feld stimmt nicht — schau es dir an."
Page-Transition	SPA-Route-Wechsel	150 ms Cross-Fade	ease-in-out	„Du bist auf einer neuen Seite."
Number-Counter	KPI-Dashboard, Compliance-Score	600 ms one-shot	ease-out	„Die Zahl hat sich geändert, hier ist der neue Wert."

No-Go	Warum nicht
Bounce / Elastic / Spring (sichtbar überschwingend)	Verspielt, App-Store-haft. Untergräbt Trust-Voice. Wir sind kein Consumer-Produkt.
Idle-Animationen (pulsierender Button im Ruhezustand)	Lenkt vom eigentlichen Inhalt ab, frisst Aufmerksamkeit, die der User für Compliance braucht.
Hover-Wackler / Wobble	Lustig auf Marketing-Sites, untergräbt Vertrauen in einem Pharma-Audit-Trail.
Parallax-Scroll in der Authenticated App	Performance-Risiko, Reduced-Motion-Hostile, nicht dokumentarisch.
Animationen > 400 ms in der Authenticated App	User wartet auf Interaktion — jede zusätzliche Zehntelsekunde fühlt sich wie Lag an.
Decorative-Motion ohne State-Bezug (rotierende Logos, schwebende Icons)	Verstößt gegen Lakmus-Prinzip. Trägt keine Information.
Stagger mit > 80 ms Delay zwischen Elementen über mehr als 5 Items	Eine 8-Zeilen-Tabelle mit 80 ms Stagger braucht 640 ms — User wartet auf seine Daten.
Animierte Lade-Mascots / animated illustrations als Loader	UUI nutzt Skeleton-Loader und einen ruhigen Spinner — keine Mascots, keine animierten Illustrationen.
Auto-Play-Video-Hero auf Public-DPP	Public-DPP ist Compliance-Dokument. Nicht Marketing.
Animationen, die Reduced-Motion ignorieren	Verstößt gegen WCAG 2.3.3 + Spherity-A11y-Pflicht. Kein Pardon.

Spherity-Operationen haben oft echte Wartezeiten (VC-Validation, GS1-Sync, DPP-Publish). Loading-States sind kritisch — und müssen abgestuft animiert werden. Indeterminate Spinner für Operationen > 5 s ist ein Anti-Pattern: User schließen die App, weil sie nicht wissen, ob das System noch lebt.

Wartezeit	UI-Pattern	Animation
< 200 ms	Keine Animation nötig	—
200 ms – 1 s	Button-Inline-Spinner (16 px)	Linearer Spin, 1.0 s pro Umdrehung
1 s – 5 s	Skeleton-Loader oder Inline-Spinner	1.4 s Pulse, ease-in-out
5 s – 30 s	Determinate Progress-Bar mit %-Anzeige + Beschreibung („Validating credential 3 of 12…")	Lineare Progress-Animation
> 30 s	Async-Pattern: Toast „Job läuft im Hintergrund, du bekommst eine Benachrichtigung" + Job-Status-Page-Link	Kein Spinner — User soll weiterarbeiten dürfen

Bei prefers-reduced-motion: reduce reduzieren wir alle Animationen auf:

• Erlaubt: Opacity-Fades (≤ 100 ms), Color-Shifts ohne Translation.
• Nicht erlaubt: Translation, Scale, Rotation, Skeleton-Pulse, Number-Counter-Tick, Progress-Bar-Sweep.

Konkret: Toggle-Knob springt instant. Toast erscheint per Fade ohne Slide. Skeleton bleibt statisch. Number-Counter zeigt direkt den Endwert. Die App muss vollständig nutzbar sein, ohne dass eine Animation gelaufen ist. Wenn ein State-Change nur durch Animation erkennbar ist, ist die Implementierung defekt — Reduced-Motion-User dürfen niemals Information verlieren.

Animation	Approver
Standard-Pattern aus §11.6.1.1 (Hover, Focus, Toggle, Toast, Drawer)	Frei — Komponente nutzt die Tokens
Neue Pattern-Idee, die noch nicht in §11.6.1 dokumentiert ist	Design-Lead + Spec-Update in §11.6.1
Animation > 400 ms (außer Public-DPP-Hero)	Design-Lead — schriftliche Begründung warum nicht kürzer
Animation auf Marketing-Hero / Press-Page	Design-Lead + CMO
Animation mit Sound-Effekt	Design-Lead + CMO — Default ist „kein Sound"

Nur Untitled UI Icons. Kein Material, kein Lucide, kein Heroicons. Wenn UUI ein Icon nicht hat, gibt es einen Approval-Workflow für Custom-Icons.

• Stroke 1.5 px, optisch zentriert auf 24×24 px Frame.
• Custom-Icons: an Stroke 1.5 px + UUI-Optik anpassen, in Spherity-Library committen.
• Nie mit Material/Lucide/Heroicons mischen — auch nicht in Marketing-Slides.

Drei Visual Register: B2B-Authenticated, Public DPP, Marketing-Sales. Illustration ist Default für In-App-Surfaces. AI-Photography ist seit v0.7 publizierbar — Spherity ist Klein-Team und kann nicht jede Sub-Brand-Landing mit eigenem Photoshooting füllen. Damit das nicht zur Stock-Cliché-Lücke wird, durchläuft jedes AI-Photo fünf Akzeptanz-Gates und eine Approver-Matrix. Vollständige Prompts: Brand Board → §10 AI Prompt Library + §10.5 Master Template.

11.8.4 Photography-Quellen

• Eigenes Shooting (Goldstandard) — Pflicht für Team / About / Customer-Testimonial.
• Lizenzierte Bildagentur (Getty Editorial, Stocksy) — kein Shutterstock-Generic.
• AI-Photo nach Master-Template (§11.8.5.3) — für Sub-Brand-Marketing-Material.

11.8.5.2 AI-Photo · 5 Akzeptanz-Gates

1. Subjekt: Hand · Objekt · Instrument · Workflow-Detail. Keine Gesichter im Fokus.
2. Kontext: Real-industriell (Pharma-Lab, Battery-Plant, Supply-Chain-Hub). Kein Open-Plan-Office.
3. Licht & Farbe: Cool, klinisch · Spherity-Palette dominiert + max. 1 Sub-Brand-Akzent.
4. Look: Editorial · Dokumentar (B2B-Fachmagazin) — keine Stock-Library.
5. AI-Provenance: Tool-Wasserzeichen sichtbar · Asset-Inventory-Eintrag mit ai-photo-Tag.

11.8.5.3 Master-Prompt — Adaption für Canva Magic Media

Gleicher Master-Prompt, andere Tool-Mechanik. EDITABLE/FIXED-Logik bleibt — nur Modifier-Syntax und Aspect-Ratio werden tool-spezifisch behandelt.

Master-Prompt-Element	Midjourney / DALL·E / Gemini	Canva Magic Media
Aspect-Ratio (--ar 16:9)	im Prompt	Nicht im Prompt. Vorab über Canvas-Größe: 1920×1080 (Hero) · 1080×1080 (LinkedIn) · 1080×1920 (Story)
Negative-Prompt (--no)	im Prompt	Nicht unterstützt. Positiv umformulieren: cool overcast neutral lighting statt no golden-hour
Style-Modifier (--stylize, ::2)	im Prompt	Wird ignoriert. Style-Preset wählen: Photo oder Concept Art. Nicht Drawing/3D/Anime
Hex-Farben im Prompt	bedingt verlässlich	Unzuverlässig. Im Prompt nur als Beschreibung (deep teal petrol tone); Hex-Werte nach Generierung über Canva Brand Kit → Recolor
AI-Provenance-Mark	manuell ergänzen	Automatisch. Canva-Badge sichtbar belassen — nicht entfernen
EDITABLE-Achsen	direkt nutzbar	direkt nutzbar
FIXED-Zonen	syntaktisch durchsetzbar	Kuratorisch durchsetzen — Auge des Designers, nicht Modifier

Pflicht-Schritte Canva-Workflow:

1. Canvas-Größe vor dem Prompt setzen.
2. Style-Preset zwingend Photo oder Concept Art.
3. Negative-Prompts in positive Beschreibungen umformulieren.
4. Brand Kit → Recolor auf Spherity-Palette + ein Sub-Brand-Akzent.
5. Provenance-Badge sichtbar lassen + Asset-Inventory-Eintrag tool: Canva-Magic-Media.
6. Akzeptanz-Gates §11.8.5.2 gelten 1:1 — ein verfehltes Gate schickt den Output zurück, auch wenn Canva ihn „schöner" rendert.

11.8.5.4 Approver-Matrix

• Design-Lead: Marketing-Banner · LinkedIn · Whitepaper-Cover · Sales-Deck-Section-Cover · Sub-Brand-Landing-Hero.
• CMO-Sign-off zusätzlich: Press-Release · Investor-Deck-Title · Customer-Testimonial-Hero · About-Page · Recruiting-Asset.
• Frei: Drafts / Figma-Sketches / interne Workshops (ohne externe Verwendung).

11.8.5.5 Asset-Inventory · Pflichtfelder

• asset-id · filename · tag: ai-photo | ai-illustration
• tool · prompt-text (oder Library-Slot-Ref) · generated-on
• approver (Design-Lead bzw. CMO) · scope (Use-Case + Zeitraum)
• provenance-mark-visible: true (sonst nicht freigegeben) · re-validated-on

Foundation (gilt weiterhin)

• Style: flat editorial, Schematic-Linework 1.5–2 px, Engineering-Aesthetic.
• Keine echten Personen-Gesichter (auch nicht in AI-Photo) · keine Customer-Brands ohne Freigabe.
• Gradients erlaubt für Background-Surfaces — nicht in Illustrations/Iconography.
• Sub-Brand-Akzent in Illustration ≤ 10 %, in Marketing-Hero ≤ 25 %.
• Naming: spherity.img.<register>.<surface>.<subject>.<variant>
• AI-Provenance-Mark erhalten — Wasserzeichen unverändert sichtbar (§3.1, §18.1).
• Public-facing AI-Imagery zusätzlich als „AI-assisted" kennzeichnen (EU AI-Act).
• Re-Validierung: Bei jedem Major-Branding-Update werden alle Assets mit ai-photo/ai-illustration-Tag systematisch geprüft.

Spherity betreibt einen offiziellen YouTube-Kanal als zentrale Plattform für Educational-Videos: Spherity · @spherity2017. Marketing, Sales und Customer Success bespielen den Kanal gemeinsam — Produkt-Demos, Webinar-Cuts, How-to-Tutorials, Release-Walkthroughs, Pitch-Recaps. Ein einziger Kanal ist verbindlich; Sub-Brand-eigene Kanäle sind nicht vorgesehen.

11.9.1 Tool-Stack (verbindlich)

Aufgabe	Tool	Hinweis
Screen-Recording	ScreenStudio (screen.studio)	Standard für alle publishbaren Videos. Keine Alternative-Tools (OBS, QuickTime, Loom).
Video-Production	motionVFX mPodcast (motionvfx.com/collections/mpodcast)	Lower-Thirds, Title-Cards, Transitions. Final Cut Pro / DaVinci Resolve.
Captions	YouTube Auto-Captions + manuelle Korrektur	Compliance-Begriffe (DSCSA, eIDAS, ESPR, EUDI) und Produktnamen sind häufige Auto-Caption-Fehler — gegenlesen Pflicht.
Thumbnail	Canva-Master-Template (§11.10)	AI-Bilder nur mit §11.8.5-Approval.

11.9.2 Visual-Identity

• Spherity-Wordmark-Bug: 24–32 px Höhe, 60 % Opacity, persistent oben/unten rechts.
• Sub-Brand-Akzent: genau ein Akzent pro Video (CARO · VERA · EIDA · KYLE · oder Mutter ohne Akzent).
• Lower-Thirds: Archivo Bold Name + Regular Rolle, Spherity-Navy #023852 bei 85 %, Sub-Brand-Akzent als 2 px Top-Border.
• Title-Cards: Archivo Bold, Sentence-Case, max. 14 Wörter (§13.2).
• Cursor-Highlight: ScreenStudio „Soft Highlight" — niemals Cyan-Pulse-Ring oder Roter-Klick-Marker.
• Captions: Sentence-Case, max. 32 Zeichen pro Zeile, max. 2 Zeilen, White-on-semi-transparent-Black.

11.9.3 Datei-Naming

spherity_[product]_[type]_[topic-slug]_[YYYY-MM-DD]_v[N].mp4

[type]: demo · tutorial · walkthrough · webinar · release · pitch · customer-story

11.9.4 Thumbnail-Template

• 1920×1080 px · Spherity-Navy Vollfläche oder §11.8.5.3 AI-Photo
• Archivo Bold, max. 5 Wörter Title, Sentence-Case
• 8 px Sub-Brand-Akzent-Bar links · Wordmark unten rechts (32 px)
• Verboten: Schock-Faces · rote Pfeile · Allcaps-Rant-Style · Emoji-Stapel

11.9.5 Approver-Matrix

• Jedes publizierte Video: Marketing + Design + Product (alle drei gemeinsam).
• + Auftraggeber bei Customer-Story, Partner-Webinar, Sales-Pitch (Briefer/Initiator).
• + CMO bei Press-Release-Hero · Investor-Update.
• Frei: Interne Cuts (All-Hands, Workshop) — solange nicht extern.
• Reihenfolge: Design (Visual-Identity) · Marketing (Botschaft) · Product (fachliche Korrektheit) — alle drei stimmen zu, dann live.

11.9.6 No-Gos

• ✗ Eigener Sub-Brand-Kanal (nur @spherity2017)
• ✗ Posing-Smile-Talking-Head ohne fachlichen Inhalt
• ✗ Cursor-Pulse-Ring oder Roter-Klick-Marker
• ✗ Auto-Captions ohne Korrektur publizieren
• ✗ Mehr als ein Sub-Brand-Akzent
• ✗ Allcaps-Schock-Headlines, Schock-Thumbnails
• ✗ Musik-Opener > 5 s
• ✗ AI-Thumbnail ohne §11.8.5-Approval
• ✗ Logo-Bug bei Customer-Testimonial wegcropt

Spherity betreibt einen zentralen Canva-Workspace als operative Asset-Bibliothek für alle Mitarbeiter:innen, die Brand-Material produzieren — Marketing, Sales, Customer Success, Recruiting, Hiring-Manager. Der Workspace ist Single Source of Truth für schnell-anpassbare Layouts (Social-Posts, Slide-Decks, One-Pager, Thumbnails). Er ersetzt nicht Figma (Single Source of Truth für Produkt-UI), sondern ergänzt es um Marketing- und Sales-Assets.

11.10.1 Ordner-Struktur

Spherity Brand Workspace/
├── 00_Brand-Foundation/         (Read-only · Logos · Farben · Type · Icons)
├── 10_Master-Templates/         (Pflicht-Templates · nicht direkt bearbeiten)
│   ├── 11_Presentation/         (Pitch-Deck · Sales-Deck · Customer-Deck)
│   ├── 12_Whitepaper/           (Cover · Inner-Pages · Backcover)
│   ├── 13_OnePager/             (Sub-Brand · Use-Case)
│   ├── 14_Social/               (LinkedIn-Square · Karussell · Story)
│   ├── 15_Email-Signature/
│   └── 16_Video-Thumbnail/      (YouTube-Master, s. §11.9.4)
├── 20_Sub-Brand-Assets/
│   ├── 21_CARO/  22_VERA-Studio/  23_VERA-DPP/  24_EIDA/  25_KYLE/
├── 30_Campaigns/                (Quartals-Kampagnen)
└── 90_Archive/                  (> 12 Monate alt)

Pflicht-Regel: 10_Master-Templates/ sind schreibgeschützt für alle außer Design-Lead. Wer ein Template nutzt, dupliziert in 20_Sub-Brand-Assets/ oder 30_Campaigns/.

11.10.2 Pflicht-Templates (Mindestbestand)

Template	Format	Verwendung
Sales-Deck Master	16:9	Sub-Brand-Customer-Pitches
Pitch-Deck Investor	16:9	Spherity-Mutter, kein Sub-Brand-Akzent
Whitepaper Cover	A4	Use-Case-Whitepaper, Regulatory-Briefings
LinkedIn-Square	1080×1080	Single-Post · Quote-Cards
LinkedIn-Karussell	1080×1080 · 10 Slides	Educational-Karussell
YouTube-Thumbnail	1920×1080	Master laut §11.9.4
Email-Signatur	statisches PNG	Mitarbeiter-Signatur
One-Pager Sub-Brand	A4	Sales-Leave-Behind

11.10.3 Operative Regeln

• Kein E-Mail-Versand aus Canva. PNG/PDF herunterladen, über Sales-Tools / HubSpot / Mitarbeiter-Mail versenden.
• Brand Kit hart durchsetzen. Spherity-Palette + Sub-Brand-Akzente; andere Farben für Nicht-Designer nicht aufrufbar.
• Fonts gelockt: Archivo + IBM Plex Mono — keine anderen Canva-Fonts.
• AI-Bilder: §11.8.5.3 Canva-Magic-Adaption gilt 1:1, alle 5 Akzeptanz-Gates §11.8.5.2.
• Versionierung: Alte Master-Version → 90_Archive/, neue Version mit Datums-Suffix.
• Asset-Inventory: AI-haltige Canva-Assets im Brand Asset Inventory (§11.8.5.5) erfassen.
• Berechtigungen: Marketing/Design/Product = Edit auf Master · Andere = Edit auf Sub-Brand + Campaigns, View auf Foundation.

11.10.4 Approver

• Master-Template ändern → Design-Lead
• Sub-Brand-Asset publizieren → Design-Lead + Marketing
• Whitepaper / Investor / Press → Design-Lead + CMO
• Customer-Pitch → Marketing + Sales-Owner (Design bei AI-Bild)
• Recruiting → Design-Lead (CMO bei externer Press-Reichweite)
• Internes Deck → Frei

11.10.5 No-Gos

• ✗ Direkt im Master editieren
• ✗ Eigene Stock-Photos ins Brand Kit
• ✗ Andere Fonts als Archivo + IBM Plex Mono
• ✗ E-Mail-Versand aus Canva
• ✗ AI-Bilder ohne §11.8.5.3 + 5 Akzeptanz-Gates
• ✗ Mehr als ein Sub-Brand-Akzent
• ✗ Sub-Brand-Akzent als Primärfarbe (> 10 % Fläche)
• ✗ Edit-Rechte auf 00_Brand-Foundation/

Manche Patterns wiederholen sich in allen vier Produkten — Audit-Trail-Export, Forms, Tabellen, Empty-States. Die definieren wir einmal, damit nicht jedes Produkt sein eigenes Rad erfindet.

12.1 Audit-Trail-Export (cross-product)

• Trigger: Button im Detail-View einer beliebigen Entity (Lieferant, DPP, Identity, Onboarding).
• Format: CSV (Default), PDF (signed), JSON (für Engineering).
• Inhalt: Timestamp, Actor, Action, Resource-ID, Hash, Signature.
• UI-Komponente: AuditExportPanel in Spherity UI Extensions.

12.2 Forms (cross-product)

• Untitled UI Pro Form-Komponenten als Basis, Inline-Validation.
• Required-Marker mit Asterisk + screen-reader-Label.
• Error-State: roter Border + Helper-Text unterhalb des Inputs.
• Submit-Button: primärer CTA-Style, deaktiviert bei Validation-Errors.

12.3 Tables (cross-product)

Foundation: Application/Table aus Untitled UI Pro Figma v8.0. Spherity-Layer-2-Cells (DID, Status, Trust-Anchor, Compliance, Audit-Mini, Signature) sind Composites aus UUI-Cell-Variants — keine neuen Atome.

12.3.0 UUI-Komponenten-Mapping (verbindlich)

Spherity-Pattern	UUI-Komponente	Variant
Tabellen-Wrapper	Application/Table	size = md / sm / lg
Header-Zelle	Table cell – Header	sort = none/asc/desc
Text-Zelle	Table cell – Text	supporting-text optional
Avatar + Name	Table cell – User	size = sm / md
Status-Pill	Table cell – Badge + Components/Badge	Color über Spherity-Status-Tokens (§11.1), nicht freie UUI-Color
Action-Cell	Table cell – Actions	dropdown = true
Selection-Checkbox	Table cell – Checkbox	UUI Checkbox xs
Toolbar	Application/Table header	with filters
Pagination	Application/Pagination	page-default / card-minimal
Empty-State im Body	Application/Empty state – Featured icon	als Body-Replacement

12.3.1 Wann Tabelle?

• Tabelle — primär vergleichend skanbar, ≥ 4 Attribute pro Zeile, Sort/Filter nötig.
• Card-Grid — primär visuell, ≤ 3 Attribute, Auswahl-Use-Case.
• Definition-List — Key-Value-Paare einer einzelnen Entity (Detail).
• Timeline / Log — chronologisch + Event-basiert (Audit-Trail, KYLE Stream).

12.3.2 Density

• Comfortable (56 px, Default) — Such-/Übersichts-Listen mit Status-Dot.
• Compact (40 px) — Audit-Logs, Monitoring-Streams, Schema-Registries.
• Spacious (72 px) — DPP-Liste mit Thumbnail + Sub-Text.
• Density ist per Tabelle vorgegeben, nicht user-toggle-bar — außer in Audit-/Log-Sichten.

12.3.3 Spalten-Standards

• Identifier (Mono): IBM Plex Mono, Ellipsis, Tooltip, Click-to-Copy.
• Status: Status-Dot 8 px + Label, Farbe aus §11.1 Status-Tokens.
• Trust-Anchor: Trust-Badge (high/medium/low/distrusted) + Org-Name.
• Datum: Locale-aware (§15) — DE DD.MM.YYYY, US-CARO MM/DD/YYYY.
• Numerisch: Rechtsbündig, Tausender-Trennung, Einheit-Suffix.
• Actions: Rechtsbündig, max. 1 Primary-Icon-Button + Overflow ⋯.

12.3.4 Sort, Filter, Pagination

• Sort: Click-Toggle asc/desc, Multi-Sort nur opt-in via Shift-Click.
• Filter: ≤ 4 Status-Werte als Toolbar-Pills, mehr als Drawer-Filter, aktive Filter als Chip-Liste mit × clear.
• Suche: Toolbar, debounced 300 ms, cross-column Match-Highlight.
• Pagination: 25/50/100 Rows, Server-Side ab > 1.000 Rows, Streams → Virtualisierte Liste.
• URL-State: Sort/Filter/Page in URL-Params — Pflicht für Audit-/Compliance-Sichten (Reproduzierbarkeit für Auditor:innen).

12.3.5 Selection & Bulk-Actions

• Row-Click öffnet Detail. Selection nur via Checkbox.
• Bulk-Bar erscheint über Toolbar bei ≥ 1 Selection.
• Select-All-Across-Pages: Banner mit zweitem CTA bei aktivem Filter — verhindert Versehens-Mass-Aktionen.
• Destructive-Bulk: Confirmation-Modal mit Counter, ab ≥ 50 Items Type-to-Confirm.
• Bulk-Audit-Trail: eine Audit-Entry mit Counter + Item-IDs, nicht 12 separate Entries.

12.3.6 Spezial-Cells (Spherity Layer-2)

• DID-Cell = UUI Table cell – Text + Mono-Font + Truncation + Click-to-Copy.
• Status-Cell = UUI Table cell – Badge mit Status-Token-Color-Mapping.
• Trust-Anchor-Cell = UUI Table cell – User, Trust-Badge ersetzt Avatar.
• Compliance-Indicator-Cell = UUI Table cell – Badge als Badge-Group (max 3 + Overflow).
• Audit-Trail-Mini = Sparkline im UUI-Cell-Frame.
• Signature-Status-Cell = UUI Table cell – Badge + Featured icon/sm.

12.3.7 States innerhalb der Tabelle

• Empty (kein Dataset): Body durch UUI Empty state – Featured icon + + New …-CTA ersetzen, Toolbar/Header bleiben.
• Empty (gefilterte Sicht): „No results" + Clear filters-Button, Filter-Chip-Liste sichtbar.
• Loading (initial): 5–8 Skeleton-Rows, kein Spinner-Center.
• Loading (incremental): Pulse-Bar oben + bestehende Rows mit opacity: 0.6.
• Error (network): Inline-Error-Block mit Retry, Toolbar/Header bleiben aktiv.
• Row-Loading (Inline-Action): Pulse-Border + Action-Icon → Spinner.
• Stale: Banner „Data updated 4 min ago — [Refresh]".

12.3.8 Responsive

• ≥ 1024 px: volle Tabelle.
• 768–1023 px: optionale Spalten ausblenden (Spalten-Priority), Filter-Drawer statt Pills.
• < 768 px: Card-Mode statt Tabelle. Niemals horizontal-scrollende Tabellen auf Mobile.

12.3.9 A11y (Accessibility)

• Native <table> + <thead>/<tbody> — UUI-Default, nicht ändern.
• <th scope="col"> für Header, <th scope="row"> für Row-Identifier (z. B. DID).
• aria-sort="ascending|descending|none" auf aktivem Header.
• Selection-Checkboxes mit aria-label; Header-Checkbox aria-label="Select all visible rows".
• Bulk-Bar mit role="status" + aria-live="polite".
• Row-Click-Magic nicht alleinstehend — Action-Button am Row-Ende für Screen-Reader-User.

12.3.10 Anti-Pattern

• ❌ <div>-Pseudo-Tabellen.
• ❌ Mehr als ein sichtbarer Action-Button pro Row.
• ❌ Sortierung ohne sichtbaren Sort-Indikator.
• ❌ Filter ohne Reset-Möglichkeit.
• ❌ Horizontaler Scroll auf Mobile.
• ❌ Bulk-Action ohne Confirmation.
• ❌ Verschiedene Spalten-Reihenfolgen für dieselbe Entity in verschiedenen Produkten (Token-Vertrag §16).
• ❌ Sub-Brand-Farben in Cell-Backgrounds — Status nutzt §11.1 Status-Tokens.

12.4 Empty-States (cross-product)

Foundation: Application/Empty state aus Untitled UI Pro Figma v8.0. Spherity-Layer-2-Empty-Variants (Compliance-Permission, Trust-Anchor-Setup, AI-Illustration, Audit-Log) sind Composites aus UUI-Empty-State-Variants — keine neuen Atome.

12.4.0 UUI-Komponenten-Mapping (verbindlich)

Spherity-Empty-Type	UUI-Komponente	Variant
Standard-Empty (Liste, Widget)	Empty state – Featured icon	size = md, color = gray/primary, 1 CTA
First-Use-Onboarding	Empty state – Featured icon	size = lg, 2 CTAs (primary + Learn more)
No-Results-Filter	Empty state – Featured icon	size = sm/md, color = gray, CTA = Clear filters
Permission-Denied	Empty state – Featured icon	size = lg, color = warning, CTA = Request access
Org/User-Bezogen	Empty state – Avatar	size = md
Hero-Empty (Public-DPP / Onboarding-Wizard)	Empty state – Image	size = lg, custom Spherity-AI-Illustration (§12.4.5)
Featured Icon	Components/Featured icon	theme = light-circle / modern, color = brand-cyan / gray / warning

12.4.1 Wann Empty, wann Loading, wann Error

• Loading läuft → Skeleton (s. §12.3.9). Nicht Empty-State.
• Daten fertig, leer → Empty-State.
• Filter ohne Treffer → Filter-Empty (anderer Copy + Clear filters).
• API-/Netzwerk-Fehler → Error-State, niemals Empty.
• Permission-Denied → Permission-Empty (volle Seite, nicht Toast).

12.4.2 Empty-Typen

• First-Use — einladend, 2 CTAs (Create + Learn).
• Standard-Leer — neutral, 1 CTA + New ….
• No-Results-Filter / Suche — sachlich, Filter löschen.
• Permission-Denied — erklärend, Zugriff anfordern + Admin kontaktieren.
• Resource-Frozen (Compliance-Lock nach Publish) — Erklärung, Audit-Protokoll öffnen.
• Audit-Log-Empty — read-only, sachlich, kein CTA.

12.4.3 Anatomie

• Featured Icon (UUI md/lg/xl) — Pflicht außer in Hero-Image-Variant.
• Title — Sentence-Case, max. 6–8 Wörter, sagt was leer ist.
• Supporting Text — 1–2 Sätze, erklärt warum + was als nächstes.
• Primary CTA — Verb-Objekt, niemals „Click here".
• Secondary CTA — optional (Lern-Link, Filter-Anpassung, Skip).
• Foot-Hint — optional Mono-Mini-Note bei Compliance-Setup-Empties.

12.4.4 Featured-Icon-Color-Map

• First-Use, Standard-Leer → Spherity Cyan (Primary) — ermutigend.
• No-Results (Filter / Search) → Gray — neutral, kein „motivieren".
• Permission-Denied / Resource-Frozen → Warning (Amber) — Compliance-Signal.
• Audit-Log-Empty → Gray — sachlich.

12.4.5 Custom-Illustration (sparsam, nur 3 Cases)

• First-Use-Hero in VERA Public DPP — einzige Marketing-tonal-zulässige Empty-Surface.
• Onboarding-Wizard-Hero (z. B. KYLE „Set up your first watchlist").
• Marketing-Landing-Empty (sehr selten).

AI-Illustrationen folgen §11.8.5 AI-Photography-Policy — 5 Akzeptanz-Gates, Master-Prompt-Template, Approver-Matrix (Design-Lead default · CMO bei Press/Investor/Customer-Testimonial/About/Recruiting), Asset-Inventory-Pflichtfelder.

Verboten: Stock-Illustration-Pack, Cartoon-People, „Bored Person at Empty Desk", Mascots, Featured-Icons mit zu vielen Farben.

12.4.6 Voice & Copy

• DE-Sie-Form in B2B-Authenticated-Surfaces.
• Locale-aware Datums-Erwähnungen — niemals globaler MM/DD/YYYY-Default.
• Keine Emojis, keine Ausrufezeichen.
• Title sagt was fehlt, Supporting warum + was als nächstes.

12.4.7 Empty-State innerhalb anderer Container

• Tabelle (Body) — Empty md im <tbody>-Zentrum, Toolbar/Header bleiben.
• Dashboard-Widget — Empty sm im Card-Frame.
• Drawer / Side-Panel — Empty sm/md, Drawer-Header bleibt.
• Modal-Body — Empty sm, Modal-Footer bleibt.
• Volle Seite — Empty lg, max-width 480 px zentriert.

12.4.8 A11y

• Title als <h2> (oder passend zum Heading-Level), nicht <div>.
• Featured Icon dekorativ: aria-hidden="true".
• Filter-Empty in aria-live="polite"-Region — Wechsel wird announced.
• Permission-Denied-Title in role="alert".
• Focus-Management: bei Filter-Reset Fokus auf Primary-CTA des Empty.
• prefers-reduced-motion respektieren bei animierten Illustrationen.

12.4.9 Anti-Pattern

• ❌ Stock-Illustrationen mit Cartoon-People.
• ❌ Empty-State ohne CTA, wo Aktion möglich wäre.
• ❌ Generische „Nothing here yet"-Texte.
• ❌ Empty-State und Error-State visuell gleich.
• ❌ Mehrere Featured-Icon-Farben in derselben App.
• ❌ Emojis oder Ausrufezeichen im Empty-Text.
• ❌ Featured Icon weglassen.
• ❌ Permission-Denied als Toast.
• ❌ AI-Illustration ohne Asset-Inventory-Eintrag (§11.8.5.5).

12.5 Charts & Datenvisualisierung (cross-product)

Foundation: UUI Pro Application/Chart als Visual-Vorgabe. Render-Library: Recharts (React) als Default. Spherity-Layer-2-Charts (Compliance-Trend, Audit-Frequency-Sparkline, Trust-Score-Gauge) als Composites über UUI-Chart-Variants.

12.5.0 UUI-Komponenten-Mapping

Spherity-Pattern	UUI-Komponente	Render
Linien-Trend	Chart – Line	Recharts <LineChart>
Area / Stacked-Area	Chart – Area	Recharts <AreaChart>
Bar (vertikal/horizontal)	Chart – Bar	Recharts <BarChart>
Donut / Pie (max 5 Kategorien)	Chart – Donut	Recharts <PieChart>
Sparkline (Cell-embedded)	Chart – Sparkline	Recharts ohne Achsen
Heatmap	Chart – Heatmap	Recharts custom oder Nivo
Gauge / Progress	Chart – Gauge	Recharts <RadialBarChart>

12.5.1 Wann Chart, wann Tabelle, wann Stat-Card

• Stat-Card — eine Zahl + Trend + Delta (Dashboard-Header).
• Sparkline — Mini-Trend in Tabellen-Cell.
• Line / Area — Trend über Zeit.
• Bar — Vergleich zwischen Kategorien.
• Donut — Anteils-Verteilung, max. 5 Kategorien.
• Heatmap — zwei Dimensionen + Intensität.
• Gauge — Wert gegen Soll/Range (Trust-Score, Coverage %).
• Tabelle statt Chart — wenn exakte Werte oder ≥ 20 Punkte ohne klaren Trend.

12.5.2 Color-Tokens (verbindlich)

• Primärer Trend → color.primary.cyan #2BFEBB.
• Sekundär → color.primary.dark-blue #023852.
• Status (Success/Warning/Error/Neutral) aus §11.1 Status-Tokens.
• Sub-Brand-Akzent max. 1 Datenreihe innerhalb des Sub-Brand-Kontexts.
• Bei > 5 Reihen: Bar-Chart sortiert oder Top-5 + „Other".

12.5.3 Anatomie

• Title + Supporting Metric (aktueller Wert + Delta).
• Y-Axis mit Locale-aware Format, Default-Start = 0.
• X-Axis mit Datums-Format Locale-aware.
• Grid: subtile horizontale Linien (4–6 max), opacity 0.4.
• Legend: unter dem Chart oder oben rechts, Status-Dot + Label.
• Tooltip: on-Hover und on-Focus, Mono für Zahlen.
• Time-Range-Picker: 7d / 30d / 90d / 12m / Custom.

12.5.4 States im Chart

• Empty → UUI Empty-State im Chart-Body.
• Loading initial → Skeleton-Pseudo-Linie.
• Loading incremental → Pulse-Bar oben, opacity 0.6 auf bestehenden Daten.
• Error → Inline-Error mit Retry, Toolbar bleibt.
• Single-Data-Point → zentrierter Punkt, kein Pseudo-Trend.
• Stale → Banner „Updated 4 min ago — [Refresh]".

12.5.5 A11y

• aria-label mit Title + Kernaussage Pflicht.
• Daten-Tabelle als sr-only-Sibling (Recharts Pattern-Hook).
• Color-Independence: Linien-Stil (solid/dashed/dotted) zusätzlich zu Farbe.
• Tooltip via Focus, nicht nur Hover.
• prefers-reduced-motion respektieren.

12.5.6 Anti-Pattern

• ❌ 3D-Charts (verzerren Werte).
• ❌ Donut mit > 5 Kategorien.
• ❌ Y-Achse ohne 0-Bezug bei „Wie viel?"-Charts (Manipulations-Risiko).
• ❌ Rainbow-Color-Schema oder Sub-Brand-Mix in einem Chart.
• ❌ Status-Token-Missbrauch (Cyan für Error etc.).
• ❌ Tooltip nur on-Hover (bricht Keyboard-A11y).
• ❌ Charts ohne Daten-Tabellen-Fallback (bricht WCAG).
• ❌ Real-Time-Updates ohne Throttling.

12.6 Permissions-Visualisierung (cross-product)

Permissions sind compliance-relevant (DSCSA, ESPR, eIDAS, EWC). Visualisierung muss klar machen: was kannst du sehen, was nicht, warum nicht, wie kommst du an Zugriff.

12.6.1 Drei Sichtbarkeits-Stufen

• Visible — Daten normal sichtbar.
• Locked-Visible (Default) — Lock-Icon + Platzhalter ••• restricted, Tooltip erklärt Wer/Warum/Wie. Transparenz schlägt Stealth.
• Hidden — Feld komplett ausgelassen. Nur bei explizitem regulatorischem Grund (DSGVO Art. 17, DSCSA-Trade-Secret), mit Audit-Hash der ausgelassenen Daten.

12.6.2 Lock-Tooltip-Pflichtinhalt

• Wer kann es sehen (Rolle-Liste).
• Warum gesperrt (Compliance-Code wenn anwendbar).
• Wie Zugriff bekommen („Zugriff anfragen" → Approval-Flow).

12.6.3 Approval-Flow-Stepper

• Steps: Eingereicht → Zur Überprüfung → Genehmigt/Abgelehnt → Vergeben → Abgelaufen.
• Asynchron: User submittet, Approver bekommt Notification, kein Modal-Block.
• Audit-Trail: jede State-Änderung erzeugt Audit-Entry (§12.1).
• Time-Bound: default 90 Tage, Auto-Expire mit 7-Tage-Vorwarnung.
• Re-Apply: nach Reject/Expire mit Begründung erneut anfragen.

12.6.4 Role-Matrix-Marker

• ✓ — volle Berechtigung.
• ◐ — teilweise / kontextabhängig (Tooltip).
• — — keine Berechtigung.
• 🔒 — berechtigt aber gesperrt (z. B. 2FA-Pflicht).

12.6.5 Audit-Trail-Coupling

• Permission granted/revoked → Audit-Entry.
• Restricted-Field-Access (autorisiert) → Audit-Entry mit Hash der Daten.
• Permission-Denied (Versuch) → Audit-Entry.
• Approval submitted/decided → Audit-Entry.

12.6.6 A11y

• Lock-Icon: aria-label="restricted".
• Tooltip via Focus und Hover.
• Approval-Flow-Stepper als <ol> mit aria-current="step".
• Permission-Denied-Title in role="alert".

12.6.7 Anti-Pattern

• ❌ Restricted-Felder einfach weg (User weiß nicht, ob Daten fehlen oder Zugriff fehlt).
• ❌ Permission-Denied als Toast.
• ❌ Tooltip ohne Compliance-Begründung.
• ❌ Approval ohne Zeitlimit oder Audit-Trail.
• ❌ Restricted-Field-Access ohne Audit-Entry.
• ❌ Sub-Brand-Color für Lock-Icon (cross-product = neutral-grau).

12.7 Onboarding & Wizards (cross-product)

Foundation: UUI Pro Application/Stepper + Form-Wizard. Spherity-Onboarding-Extensions: Sandbox-Banner, Sample-Data-Toggle, Resume-Card, Onboarding-Hero-Empty.

12.7.1 Drei Modi

• Production — realer Setup, persistiert ab Step-1.
• Sandbox-Playground — persistent Warning-Banner „Sandbox — 24 h Auto-Delete · Nicht für Audit", Topbar mit Stripe-Pattern.
• Guided-Tour — read-only Walkthrough mit Sample-Data.
• Wechsel zwischen Modi immer mit Confirmation-Modal.

12.7.2 Wizard-Anatomie

• Topbar: Wizard-Titel + Close (mit Confirm bei Unsaved-Changes).
• Stepper: alle Steps sichtbar (auch zukünftige), aktiver = current, abgeschlossene = complete.
• Step-Title + Supporting.
• Step-Body: Form (§12.2) oder Choice-Layout.
• Footer-Actions: Back / Save Draft / Continue.
• Skip-Action nur bei optionalen Steps.

12.7.3 Sandbox-Regeln

• Persistent Warning-Banner oben — nicht Hover-only.
• Stripe-Pattern-Topbar als peripher-erkennbarer Visual-Marker.
• Keine Audit-Trail-Persistenz (eigener Sandbox-Audit-Mode).
• Keine externen Aufrufe (kein Email-Versand, keine Webhooks, keine On-Chain-Issuance).
• Sample-Data-Marker sandbox: true im JSON-Export.
• Migration via expliziter „Promote to production"-CTA.

12.7.3a Playground als Produkt-Feature (VERA · EIDA · KYLE)

Stand 2026-05: Aktiv in Entwicklung. „Playground" ist die produktinterne Bezeichnung für den Sandbox-Mode-Wizard und erfüllt zwei Funktionen mit gleichem Code-Pfad: Onboarding-Playground (neue Customer mit Sample-Daten) und Demo-Playground (anpassbar für Sales-Demos).

Produkt	Step-1-Beispiel	Sample-Daten
VERA Studio	„Erstellen Sie Ihren ersten DPP" — Industrie wählen, Template-Vorschlag	ACME Battery 18650 mit RCS-Audit-Trail
EIDA	„Issuer-Setup" — Org-Domain, DID-Methode, Trust-Anchor	Spherity Sandbox GmbH, Test-DIDs
KYLE	„Verifizieren Sie eine Geschäftspartner-Identität" — HRB-Lookup, Watchlist	Mustermann GmbH, Bundesanzeiger-Stub-Response
CARO	Kein Playground in der ersten Welle — DSCSA-Bedeutung lässt Sandbox-„Übung-Daten" als Verwechslungsrisiko erscheinen.

Sample-Daten werden zentral in Spherity UI Extensions › Imagery-Library als JSON-Fixtures gepflegt — nicht pro Produkt-File neu erfunden. Keine echten Customer-Identifikatoren in Sample-Daten.

12.7.4 Resume-Pattern

• Resume-Card im Dashboard mit Wizard-Titel + Progress + Datum.
• Email-Resume-Link 24 h gültig.
• Auto-Save alle 30 s pro Step.
• Resume-Conflict-Handling bei zweitem Tab.

12.7.5 A11y

• Stepper als <ol> mit aria-current="step".
• Step-Title als <h2>, Fokus bei Step-Wechsel auf Heading.
• Progress-Announcement in aria-live="polite".
• Sandbox-Banner mit role="status".
• Save-Draft-Feedback mit aria-live="polite".

12.7.6 Anti-Pattern

• ❌ Wizard ohne Save-Draft.
• ❌ Stepper, der zukünftige Steps verbirgt.
• ❌ Sandbox-Banner nur als Tooltip.
• ❌ Sandbox-Daten in Production-Audit-Trail mischen.
• ❌ Wizard-Close ohne Unsaved-Confirmation.
• ❌ Auto-Promote von Sandbox zu Production.
• ❌ Email-Resume-Link mit unbegrenzter Gültigkeit.

12.8 Email-Templates (HubSpot, cross-product)

Foundation: HubSpot-Native-Email-Builder als Render-Layer + Spherity-Email-Template-Library (cross-product Header, Footer, Voice). Email-Clients haben uneinheitliches CSS — Tabellen-Layout, kein Flexbox/Grid, Inline-CSS, Web-Font mit Helvetica/Arial-Fallback.

12.8.1 Token-Mapping (Email-safe)

• font.body → Archivo, Helvetica, Arial, sans-serif.
• font.mono → 'IBM Plex Mono', Menlo, Consolas, monospace.
• color.primary.dark-blue #023852 — Header, Buttons.
• color.primary.cyan #2BFEBB — sparsam (Akzent / Status-Highlight).
• Sub-Brand-Akzente nur in Marketing-Emails, nicht Transactional.

12.8.2 Transactional vs. Marketing

• Transactional: sachlich, max. 1 Primary-CTA, niemals Emojis/Ausrufezeichen, Reply-To noreply@spherity.com.
• Marketing: etwas wärmer, 1 Primary-CTA, Reply-To news@spherity.com, sparsam Emojis (max. 1 in Customer-Story-Subjects).
• Beide: Personen-Reply-To verboten.

12.8.3 Master-Template-Slots

• Header — Spherity-Logo (Mono Dark-Blue / White auf Dark-Mode), Höhe 32 px.
• Hero — H1 mit Subject-Echo + Lead-Sentence.
• Body — Hauptinhalt, Mono für IDs/DIDs/Hashes.
• Primary CTA — Bullet-Proof-Button, Dark-Blue Filled.
• Sub-Content — optional Audit-Trail-Link.
• Footer — Spherity GmbH + Adresse + Impressum + Datenschutz + Unsubscribe + Reason-of-Sending.

12.8.4 Layout-Regeln

• Container 600 px max.
• Tabellen-Layout (cross-client kompatibel), kein Flexbox/Grid.
• Padding 24 px Container, 16 px zwischen Sektionen.
• Body-Zeilenhöhe 1.6.
• Bilder max. 600 px, JPEG/PNG, Alt-Text Pflicht, keine Background-Images.
• Buttons: Bullet-Proof + VML-Fallback für Outlook.
• Dark-Mode via prefers-color-scheme: dark (Apple/iOS Mail / Outlook 365).

12.8.5 Compliance-Footer (DE-EU-Pflicht)

• Impressum-Link (TMG §5).
• Datenschutz-Link (DSGVO).
• Unsubscribe-Link One-Click (DSGVO + CAN-SPAM).
• Spherity-Adresse.
• Reason-of-Sending: „This email was sent because …".
• Reply-To: noreply@spherity.com (tx) / news@spherity.com (mk).

12.8.6 Template-Inventar (Spherity HubSpot-Library)

• Transactional (tx-*): credential-issued/revoked, dpp-published, audit-export-ready, approval-submitted/decided, watchlist-event, license-request, onboarding-resume.
• Marketing (mk-*): newsletter-monthly, product-update (per Sub-Brand), customer-story.

12.8.7 A11y

• Alt-Text-Pflicht (Logo-Alt = „Spherity").
• Body-Kontrast ≥ 4.5:1, Buttons ≥ 3:1.
• Native <h1>/<h2>, nicht <div font-size>.
• Link-Texte konkret („DPP öffnen"), nicht „Hier klicken".
• Plain-Text-Variante (HubSpot auto, manuell prüfen).

12.8.8 Anti-Pattern

• ❌ Custom-Fonts ohne Fallback.
• ❌ Background-Images für kritische Inhalte (Outlook ignoriert).
• ❌ Buttons als reine <a>-Links (Bullet-Proof Pflicht).
• ❌ Personalisierung ohne Fallback.
• ❌ Sub-Brand-Color in Transactional-Footer.
• ❌ Unsubscribe versteckt (DSGVO-/CAN-SPAM-Verstoß).
• ❌ Reply-To = Personen-Mailbox.
• ❌ Tracking-Pixel ohne DSGVO-Consent.
• ❌ Emojis in Transactional-Subjects.

12.9 Print-Styles (cross-product)

Spherity-Surfaces werden gedruckt — Audit-Reports, DPP-PDF-Exports, Compliance-Findings, Customer-Approval-Letters. Print ist Compliance-Vertrag: Issuer, Hash, Timestamp, Audit-Trail-URL müssen sichtbar bleiben.

12.9.1 Foundation

• Alle Print-Anpassungen in @media print. Keine separaten Print-Routes.
• Body 11 pt Archivo, Mono 10 pt IBM Plex Mono.
• Margins 20 mm oben/unten, 18 mm links/rechts.
• A4 default DE-Surfaces, Letter US-Surfaces (@page { size: A4 }).
• Background-Colors auf white (Drucker drucken BG oft nicht). Status via Border statt BG.

12.9.2 Hide / Show

• Hide: Topbar, Sidebar, Buttons, Modals, Drawers, Tooltips, Skeletons, Hover-Effekte, Cookie-Banner.
• Show: Spherity-Footer mit Issuer-Info, vollständige Mono-IDs (kein Ellipsis), Audit-Trail-URL als Plain-Text, Generation-Timestamp, Page-Numbers.

12.9.3 Komponenten-Verhalten

• Tabellen: page-break-inside: avoid für Rows, Header repeat über Seiten.
• Charts: statisches PNG/SVG, Daten-Tabelle als Sibling sichtbar.
• DID-Cells: voller DID sichtbar.
• Status-Badges: Border + Label-Text (nicht nur Color).
• Links: URL hinter Text — a::after { content: " (" attr(href) ")"; }.

12.9.4 Page-Break

• Headings: page-break-after: avoid.
• Tabellen-Rows / Figures / Footer-Compliance: page-break-inside: avoid.
• Audit-Trail-Sektion: page-break-before: always.

12.9.5 PDF-Export-Pattern

• Audit-Trail-Export, DPP-PDF, Credential-PDF: Backend-Render (Puppeteer) mit Letterhead + Signature.
• Browser-Print bleibt für ad-hoc-Exports erlaubt.
• Compliance-Exports niemals via Browser-Print (Cross-Browser-Inkonsistenzen).

12.9.6 Anti-Pattern

• ❌ Background-Colors als einziger Status-Indikator.
• ❌ Truncated-IDs (Compliance-Pflicht: vollständig).
• ❌ Hover-/Focus-only-Inhalt.
• ❌ Charts ohne Daten-Tabelle-Sibling.
• ❌ Page-Breaks mitten in Logical-Units.
• ❌ Browser-Print für Compliance-Exports.

12.10 Browser-Support-Matrix

12.10.1 Tier-1 (offiziell, vollständig getestet)

• Chrome Desktop + Mobile (aktuelle + vorherige Major).
• Safari Desktop + iOS (aktuelle + vorherige Major).
• Edge Chromium (aktuelle + vorherige Major).
• Firefox ESR + aktuelle.

12.10.2 Tier-2 (Best-Effort)

• Brave (≈ Chrome).
• Vivaldi / Opera.
• Samsung Internet (Mobile, vor allem VERA Public DPP).

12.10.3 Nicht unterstützt

• Internet Explorer (alle Versionen) — EOL bei Microsoft.
• Browser > 2 Major-Versionen alt.
• Embedded Webviews (Auth-Flows in System-Browser öffnen).

12.10.4 Feature-Strategie

• CSS Grid + Flexbox + Custom Properties: Voraussetzung.
• Container Queries: Progressive Enhancement, Media-Query-Fallback.
• prefers-reduced-motion: Pflicht (§14).
• Native <dialog>: Polyfill für ältere Safari.
• WebCrypto-API: Pflicht für DID/Credential-Operationen.
• Service-Worker / PWA: nur VERA Public DPP (Offline).

12.10.5 Nicht-supported-Empty-Page

UUI Empty state – Featured icon, color = warning, ohne App-Chrome. „Browser nicht unterstützt" + „Browser-Empfehlungen anzeigen"-CTA.

12.10.6 Anti-Pattern

• ❌ Polyfill-Bloat für IE.
• ❌ Browser-Sniffing für UI-Logik (Feature-Detection statt User-Agent).
• ❌ Fixierte Browser-Versionen — Range bei jedem Browser-Release nachziehen.
• ❌ „Funktioniert in Chrome" als Release-Kriterium.
• ❌ App-Crash auf IE statt Empty-Page.

Spherity-Voice ist präzise, vertrauensvoll, ruhig. Keine Sales-Sprech. Keine Tech-Hipness. Keine Ausrufezeichen.

• Sentence-Case für alle Buttons & Labels (nicht Title-Case).
• Aktivsätze, kurze Sätze, max. 14 Wörter pro UI-String.
• Sie-Form in DE, formell. You in EN, neutral.
• Statt „Klicken Sie hier" → konkretes Verb („Bericht herunterladen").
• Statt „Daten werden verarbeitet…" → „Bericht wird erstellt — ca. 30 s".
• Fehler: Was ist passiert + was kann ich tun, nicht nur „Error 500".

Alle Buttons, Labels, Tab-Titel, Menüeinträge, Dialog-Titel und Empty-State-Titel werden in Sentence-Case geschrieben — kein Title-Case (Marketing-Erbe), kein ALL-CAPS (außer bei IBM Plex Mono Compliance-Codes wie DSCSA, EUDI, ESPR).

	Buttons	Tab-Titel	Empty-State-Titel
✓ gut (DE)	„Credential ausstellen" · „Filter zurücksetzen" · „Audit-Protokoll öffnen"	„Übersicht" · „Ausgestellte Credentials" · „Verifikationen"	„Noch keine DPPs erstellt"
✓ gut (EN)	„Sign credential" · „Reset filters" · „Open audit log"	„Overview" · „Issued credentials" · „Verifications"	„No DPPs yet"
✗ Title-Case	„Sign Credential" · „Reset Filters" · „Open Audit Log"	„Issued Credentials" · „Verifications"	„No DPPs Yet"
✗ ALL-CAPS	„SIGN CREDENTIAL" · „PUBLISH DPP"	—	—

Ausnahmen (begrenzt):

• Eigennamen in laufendem Text: „Bundesanzeiger Verlag", „Trust4EU", „Catena-X" — bleiben in ihrer offiziellen Schreibweise.
• Compliance-Codes in Mono: DSCSA, EUDI, ESPR, eIDAS 2.0 — UPPER ist korrekt, weil Akronyme.
• Sub-Brand-Namen: CARO, VERA, EIDA, KYLE — als Wordmarks gesetzt (Spherity-CI), Caps auch im UI.

UI-Strings sind aktiv und kurz. Max. 14 Wörter pro Satz in Supporting-Texten, Empty-States, Tooltip-Erklärungen, Inline-Fehlern. Längere Erklärungen gehören in die Doku, nicht ins UI.

	Beispiel
✓ gut (DE, 11 Wörter, Aktiv)	„Sie haben noch keinen DPP erstellt. Starten Sie mit einem Produkt."
✗ schlecht (DE, 24 Wörter, Passiv, Schachtelsatz)	„Es können in dieser Sicht aktuell keine DPPs angezeigt werden, da von Ihnen noch keiner erstellt worden ist; bitte beginnen Sie."
✓ gut (EN, 9 Wörter)	„Sign the credential to publish it on the registry."
✗ schlecht (EN, 21 Wörter)	„In order to publish the credential to the registry, please first ensure that the credential has been signed by clicking below."

Konkret bei Fehlern: „Was passiert ist." + „Warum (wenn bekannt)." + „Was als nächstes." Drei kurze Sätze, kein Schachtelsatz.

RTL = Right-to-Left, also Schriftrichtung von rechts nach links — relevant für Arabisch, Hebräisch, Farsi und einige weitere Sprachen. RTL ist aktuell nicht im Spherity-Lokalisierungs-Scope (s. §15), aber Komponenten werden bereits jetzt RTL-bereit geschrieben, damit eine spätere Aktivierung kein Komponenten-Rewrite auslöst.

Praktische Regel für Design und Engineering:

• Logical CSS Properties statt direktionaler: margin-inline-start statt margin-left, padding-inline-end statt padding-right, inset-inline-start statt left. Browser kippen das automatisch in RTL-Locales.
• Icons mit Richtungsbedeutung (Pfeile, Chevrons, Back-Buttons) müssen sich in RTL spiegeln. Icons ohne Richtungsbedeutung (Schloss, Häkchen, Stern) bleiben gleich.
• Tabellen-Spaltenreihenfolge wird in RTL gespiegelt — Spalten-Designs sollten daher nicht von einer fixen Links-nach-Rechts-Lese-Logik abhängen.
• Text-Alignment auf start/end statt left/right.
• Flex/Grid: flex-direction: row kippt in RTL automatisch — keine hardcoded row-reverse.

Engineering-Lead und Design-Lead reviewen RTL-Bereitschaft quartalsweise im Komponenten-Audit. Sobald ein Customer RTL fordert, soll der Aktivierungspfad „Locale-Toggle umlegen + visuelles Smoke-Testing" sein — nicht „Library refactoren".

Spherity-Produkte werden in regulierten Branchen eingesetzt. Accessibility ist compliance-relevant — nicht nice-to-have.

14.1 Focus-Ring (CI-konform)

outline: 2px solid #2BFEBB;
outline-offset: 2px;
border-radius: inherit;

14.2 Kontrast

• Body-Text auf Background: ≥ 4,5:1.
• Large-Text (≥ 18 px regular oder ≥ 14 px bold): ≥ 3:1.
• UI-Komponenten + Borders: ≥ 3:1 gegen umgebenden Hintergrund.

14.3 Release-Checkliste (PR-Template)

• ☐ Alle interaktiven Elemente per Tastatur erreichbar (Tab + Shift-Tab).
• ☐ Focus-Ring sichtbar, nicht gestripped (outline: none verboten ohne Replacement).
• ☐ Screen-Reader-Test (VoiceOver oder NVDA) für neue Flows.
• ☐ Kontrast-Check für alle neuen Color-Tokens.
• ☐ prefers-reduced-motion respektiert.

Default ist Deutsch & Englisch, weitere EU-Sprachen on-demand. Strings leben in i18n-Files, nie hardcoded.

• Locale-Codes: de-DE, en-US (Default), fr-FR, nl-NL, es-ES on-demand.
• Strings in locales/<code>.json, ICU MessageFormat.
• Datums-/Zahlenformate per Intl.*-API, nie manuell.
• Text-Expansion: 30 % Buffer für DE → EN, 15 % EN → FR/ES.
• RTL nicht aktuell required, aber Layout darauf vorbereiten (logical CSS-Properties).

16.1 Was darf produktspezifisch sein?

• Sub-Brand-Akzent (≤ 10 % Fläche).
• Persona-spezifische Sprache (Engineering-Console-Stil bei KYLE etc.).
• Density (CARO/EIDA hoch, VERA DPP niedrig).
• Mobile-Strategie (VERA DPP Phone-First, Rest Tablet+).

16.4 Customer-Feedback-Tooling: Gleap

Single-Source-of-Truth-Tool: Gleap als zentraler Customer-Feedback-Channel über CARO, VERA Studio, EIDA, KYLE. E-Mail-Feedback bleibt als Fallback, ist aber nicht der Default-Pfad.

Touchpoint	Verhalten
Floating-Bubble	Persistent bottom-right in jedem authentifizierten B2B-Surface, 24 px Abstand. Mobile in Drawer integriert. Niemals auf Public-DPP-Surfaces.
Empty-/Error-States	„Etwas fehlt? Bug gefunden?" → CTA „Feedback senden" öffnet Gleap mit Page-Context vorbefüllt. Verbindlich in §12.4.
In-App-Surveys	NPS / CES / Custom ausschließlich über Gleap. Kein Eigenbau-Survey-Pattern.
Customer-Findings	Aus Calls/Demos/Reviews → in Gleap unter dem entsprechenden Produkt-Project. Nicht in Notion oder Slack.

Audit-Trail-Coupling: Bei sicherheits-/compliance-relevanten Findings muss der Gleap-Ticket-Link in §12.1 Audit-Trail-Export referenziert werden.

Manche Surfaces dürfen Customer-Branding tragen — andere bleiben strikt Spherity. Die Trennlinie verläuft am Trust-Signal: alles, was „verifiziert durch Spherity" kommuniziert, behält Spherity-CI.

17.1 White-Label-fähige Surfaces

• Public DPP-Seiten (VERA) — Customer kann Logo, Primary-Color, Header-Photo setzen.
• Onboarding-Flows (KYLE) — Customer-Branding auf Step-Screens.
• Email-Templates (HubSpot-basiert) — Customer-Logo, Customer-Footer.

17.2 Locked Surfaces

• Verifiziert-Badge → immer Spherity-Cyan + Spherity-Wordmark.
• Audit-Trail-Export → Spherity-Footer „Verifiziert von Spherity".
• Authenticated-App-Chrome → Spherity-Branding.

17.3 Token-Contract

• Customer überschreibt nur whitelisted Tokens: --customer-primary, --customer-logo-url, --customer-font-display.
• Alle anderen Tokens bleiben Spherity-defaulted.
• Approval-Workflow vor Go-Live: Brand Review (Design-Lead) + Legal Review.

17.4 Co-Branding-Regel: „by Spherity"

• Customer-Logo prominent, „by Spherity" als Subtitle (Mono, 60 % Opacity).
• Nie umgekehrt — Spherity-Logo niemals dem Customer untergeordnet.
• Mindestmaß: Wordmark-Höhe ≥ 14 px · Schutzraum: ≥ Wordmark-Höhe allseitig.

17.4.1 Konkretes Lockup — VERA Public DPP Footer

Beispiel-Szenario: Battery-Hersteller „NorthCell GmbH", Customer-Brand #0F3D2E, Light-Mode Theme. Customer ist Issuer, Spherity ist Plattform-Provider.

Maße (verbindlich)

Element	Maß	Token
Footer-Höhe	96 px	—
Customer-Logo-Höhe	24–32 px (max. 32 px)	—
Spherity-Wordmark-Höhe	14 px Mindestmaß · 16 px Default · 18 px Hero-Footer	—
Schutzraum	≥ Wordmark-Höhe allseitig	—
Abstand Customer ↔ Spherity	≥ 24 % der Footer-Breite	—
Padding Footer-Inner	24 px horizontal/vertikal	space.6
Light-Mode Stempel-Farbe	Wordmark #023852 · Icon #2BFEBB	navy + cyan
Dark-Mode Stempel-Farbe	Wordmark #FFFFFF · Icon #2BFEBB	—

Verboten im Lockup

• ✗ Wordmark unter 14 px Höhe
• ✗ Wordmark in Customer-Brand-Color umfärben
• ✗ Spherity-Icon entfernen, Wordmark allein zeigen
• ✗ Stempel als „Powered by"-Tagline auflösen
• ✗ Stempel hinter Tooltip / Hover-State verstecken
• ✗ Mehr als ein Lockup auf derselben Surface (Header oder Footer, nicht beides)
• ✗ Customer-Logo direkt anklebend („NorthCell × Spherity"-Lockup)

1. Discovery — Problem-Statement, User-Research, Persona-Check.
2. Exploration — Vibe-Coding-Sandbox, niedrige Treue, schnell.
3. Design Review — POC-Design-Contract (§10.3.1), Lead-Approval.
4. Spec & Handoff — Tokens, Komponenten, Edge-Cases dokumentiert.
5. Build — Engineering-Implementation gegen Spec.
6. Release-Check — A11y-Checkliste (§14.3), Cross-Product-Konsistenz (§16).

18.1 KI im Designworkflow

• AI-Imagery (DALL·E, Gemini): Approval-pflichtig (§11.8.5).
• AI-Photo: publizierbar mit 5 Akzeptanz-Gates (§11.8.5.2) · Design-Lead approved für Marketing/Web · CMO-Sign-off bei Press / Investor / Customer-Testimonial / About / Recruiting.
• AI-UX-Copy: Vorschläge ja, finale Strings durch Design-Lead.
• Prompts dokumentieren in Brand Board → §10 AI Prompt Library + §10.5 Master Template.
• Asset-Inventory-Pflicht für jedes publizierte AI-Asset (§11.8.5.5).

Spherity-Thumbnails folgen einem festen Layout-Grid mit Hero-Image links (60 %), Title-Overlay rechts (40 %) auf Petrol-Background, Sub-Brand-Akzent-Streifen oben oder unten, und einem konstanten Spherity-S-Mark. Klare Lesbarkeit auf 200 × 112 px ist das Akzeptanzkriterium — alles, was darunter nicht funktioniert, fliegt raus.

Text-Limit: max. 30 Zeichen auf 2 Zeilen, Archivo Bold ab 80 px Setzung, Sentence-Case (nicht ALL-CAPS). Cyan bleibt Akzent für 1–2 Schlüsselwörter, niemals Volltext-Farbe.

• Format: 16:9 · 1280 × 720 px · JPG (Default) oder PNG · max. 2 MB.
• Safe-Zone: innere 80 % · Bottom-Right 200 × 60 px frei (YouTube-Timer-Badge).
• Layout-Grid: Hero-Image links 60 % · Title-Overlay rechts 40 % · Sub-Brand-Akzent-Streifen 8–10 px · S-Mark 8 % der Höhe.
• Text: max. 30 Zeichen, 2 Zeilen, Archivo Bold ≥ 80 px, Sentence-Case (§13.1).
• Motive: Face · Product-Screenshot · AI-Bild · Abstract (siehe §19.4 in design.md).
• AI vs. Foto: echte Person → Foto, Konzept → AI mit Provenance-Mark (§11.8.5).
• Master-Templates: Canva-Workspace 13_Video/Thumbnails/ (§11.10).
• Querverweis: §11.9 Video & YouTube (Format, Aufnahme, Approver).

Pitch-Decks bestehen aus genau 5 Slide-Mastern: Title · Section-Divider · Content · Quote/Statement · Closing. Andere Layouts sind nicht erlaubt — wer ein neues Master braucht, läuft den Approval-Prozess. Petrol Dark dominiert Title/Section/Closing, Mockup-BG-Light dominiert Content (Lesbarkeit), Cyan ist Akzent für 1–2 Schlüsselwörter pro Slide.

Sub-Brand-Akzent: genau einer pro Deck (das Produkt, dem das Deck gehört). Cross-Produkt-Pitches (Spherity-Mutter) tragen keinen Sub-Brand-Akzent. Referenz-Decks im assets/-Ordner: Spherity Presentation.pdf und VERA Sales Pitch Deck.pdf.

• Slide-Master: M1 Title · M2 Section-Divider · M3 Content · M4 Quote · M5 Closing.
• Pflicht-Elemente: Sub-Brand-Klärung im Cover · Datum + Version (Footer rechts) · Footer-Bar auf jeder Content-Slide · Copyright · Closing-Kontakt.
• Bild-Standards: Customer-Logos monochrom Petrol · Product-Screenshots ohne AI-Fake-UI · AI-Bilder mit Provenance + 5 Akzeptanz-Gates (§11.8.5.2) · Diagramme in Spherity-Token-Farben.
• Master-Files: Canva-Workspace 12_Pitch/Master/ + PowerPoint + Keynote + Google Slides parallel im Brand-Drive.
• Approver: Marketing-Lead (Sales) · CMO (Investor) · Design-Lead (Visual) · Founder (Conference).
• Naming: YYYY-MM-DD_<Produkt>_<Kontext>_v<X>.pptx.

One-Pager sind das kompakteste Spherity-Marketing-Format: A4 Hochformat, 5 vertikale Zonen (Header · Hero · 3-Modul-Body · CTA · Footer mit QR), in 30 Sekunden lesbar. Body-Module sind aus 6 Bausteinen komponierbar: Problem-Statement, Solution-Statement, Stat-Tile, Quote-Block, Checklist, Workflow-Visual — max. 3 nebeneinander.

Pflicht: QR-Code mit UTM-Tracking (niemals spherity.com generisch), Datum + Version im Footer, Spherity-Logo Header + Footer, Sub-Brand-Zuordnung direkt unter der H1.

• Format: A4 Hochformat 210 × 297 mm · Bleed 3 mm bei Druck · Margins 16 mm außen.
• Vertikale Zonen: Header 0–40 mm · Hero 40–90 mm · Body 90–240 mm · CTA 240–270 mm · Footer 270–297 mm.
• Body-Module: Problem · Solution · Stat-Tile · Quote · Checklist · Workflow-Visual.
• Export: RGB-Web-PDF + CMYK-Print-PDF separat · optional PNG @ 300 dpi für Slack-/LinkedIn-Embed.
• QR-Code: min. 18 × 18 mm · konkrete Landing-URL mit UTM-Tracking.
• Tool: Canva (Primary, 15_Print/One-Pager/) · Adobe InDesign (Backup für Druck-Anforderungen).
• Naming: YYYY-MM-DD_<Produkt>_<Topic>_v<X>_<RGB|CMYK>.pdf.

spherity.com ist das wichtigste owned Channel außerhalb der Produkte. Sie folgt denselben Designsystem-Regeln wie die Apps: Untitled UI Tokens mit Spherity-Override, Archivo + IBM Plex Mono, Buttons + Forms + Icons aus Layer 1/2 reusen. Sub-Brand-Akzent erscheint nur auf der jeweiligen Sub-Brand-Landing, nirgends sonst.

Performance-Budget: LCP < 2 s, CLS < 0.05. A11y-Pflicht: WCAG 2.2 AA, Tastatur-Nav end-to-end, Skip-Link, Cyan-Focus-Ring 2 px. CMS-Stack: Headless (Sanity oder Contentful — Owner-Decision offen, §25), Frontend Next.js mit SSG/ISR.

• Sitemap-Top-Level: Home · /products/{caro,vera,eida,kyle} · /solutions · /resources/{whitepaper,press,blog,customer-stories} · /company/{about,careers,contact} · /legal · /powered-by-spherity.
• Header: sticky 80 px · Wordmark links · Top-Nav mittig (Products-Dropdown · Solutions · Resources · Company) · Kontakt-CTA rechts.
• Hero-Patterns: Home = Petrol-Hero · Sub-Brand-Landing = Off-White mit Sub-Brand-Akzent-Block · Solutions = Branchen-Foto/AI · Blog = kleiner Hero · Careers = Team-Foto.
• Sub-Brand-Tiles: Logo (nativer Gradient, 48 px) · Akzent-Streifen 4 px · Tagline max. 12 Wörter · 2 Branchen-Pills · CTA „Learn more →" in Sub-Brand-Farbe.
• Footer: 4-Spalten Top-Footer (Products · Solutions · Resources · Company) + Social-Bar + Newsletter-Signup + Bottom-Strip mit Legal-Links + Build-Version.
• Performance: LCP < 2.0 s · CLS < 0.05 · INP < 200 ms · JS-Bundle initial < 100 KB gzipped · Bilder WebP/AVIF mit JPEG-Fallback.
• A11y: WCAG 2.2 AA · Cyan-Focus-Ring 2 px (§14.1) · Skip-Link · Tastatur end-to-end · Cookies-Consent tastatur-bedienbar.
• CMS: Headless · Marketing pflegt Content · Design pflegt Komponenten-Bibliothek · Preview-URL pro Change · Approver-Matrix in design.md §22.9.

Spherity-Channels: LinkedIn (primär) · X · Bluesky · YouTube · GitHub. Instagram und TikTok bleiben aus — Channel-Mismatch zur B2B-Audience.

6 erlaubte Bild-Patterns: Hero-Statement · Stat-Tile · Customer-Logo-Tile · Product-Screenshot · AI-Hero · Geometrie-Statement. Andere Layouts entstehen nicht ohne Design-Lead-Freigabe.

23.2 Bild vs. Text — Beispiele

✅ Do	❌ Don't
Bild zeigt Hero-Statement „VERA Studio v2 ist da" + S-Mark. Caption listet Features, Vorteile, CTA.	Bild zeigt den kompletten Post-Text als Wand-of-Text. Caption wiederholt denselben Text.
Bild zeigt Stat-Tile „96 % Compliance-Rate". Caption erklärt, wie die Zahl zustande kommt.	Bild zeigt 5 Bullet-Points in 11 pt. Auf 200 × 200 px komplett unlesbar.
Bild zeigt Customer-Logo + 1 Quote. Caption erzählt die Story.	Bild widerspricht Caption (Bild: „2026-02", Caption: „2027-02"). Trust-Schaden.

23.4 Format-Übersicht

Channel	Format	Resolution
LinkedIn Single-Post	1:1 oder 4:5	1200 × 1200 / 1080 × 1350
LinkedIn Karussell	1:1, max. 10 Slides	1080 × 1080
LinkedIn Banner (Company)	4:1	1584 × 396
X / Bluesky Post	16:9 oder 1:1	1920 × 1080 / 1080 × 1080

• Sub-Brand-Akzent: genau einer pro Post (§11.5).
• Hashtags: max. 3–5 (LinkedIn) / 2–3 (X) — in der Caption, niemals im Bild.
• Pride-Variante: 1.–30. Juni nur Profilbilder (§11.1.5) — nicht in Posts, Bannern oder Decks.
• Querverweis: LinkedIn-Beispielsichten + Anti-Beispiele → social.html.

Versionsnummer im Footer. Major-Update bei Token-Breaking-Changes, Minor bei neuen Sektionen, Patch bei Korrekturen.

• Version-Schema: vX.Y — Major.Minor (kein Patch im Doku-Kontext).
• Owner: Design-Lead (brand@spherity.com).
• Review-Cadence: Quartalsweise + ad-hoc bei größeren Releases.
• Changelog: §19.1 (in design.md, nicht hier abgebildet).
• Sync: Diese HTML-Variante wird parallel zur design.md gepflegt — bei jedem Update beide aktualisieren.

Designsystem ist nie fertig. Hier die aktuell offenen Punkte — mit Owner und Review-Datum in der design.md.

Aktuelle offene Punkte (v1.1)

• VERA · Public-DPP User-Feedback / Ratings für Konsumenten — Default-aus zementiert (§7.6.1 Punkt 13), aber Reviews-Komponente noch nicht im Layer-2-Designsystem spezifiziert.
• White-Label · „Powered by Spherity"-Erklärseiten-URL — Linkziel unter dem „by Spherity"-Stempel im Public-DPP-Footer noch nicht gepflegt (Marketing).
• White-Label · Brand-Theme-SLA verbindlich festlegen — 5-Werktage-Ziel in §17.3 ist Vorschlag; Customer-Success muss gegen Vertrags-SLAs spiegeln.
• EIDA-App-Brand-Indigo vs. Marketing-Indigo — Figma nutzt #0872a5 Untitled-UI-Petrol, design.md §11.5 nennt #4961A8 Indigo als Marketing-Sub-Brand. Trennung in §11.5 ausarbeiten (siehe figma-dev-sync.md Item ⑨).
• SPHERITY-Logo-Varianten · SPHERITY_col.svg und SPHERITY_1c_BLK.svg nicht im offiziellen Set — bei Bedarf vom Brand-Team anfordern.

Cross-Product Pattern-Updates für Figma + Dev (v1.1 → v1.2)

Gepflegt in figma-dev-sync.md — bi-weekly Design-Sync mit Eng-Leads: Light-Mode-Default (Item ⓪) · Org-vs-User Layout (①) · ⌘K-Removal (②) · EIDA-Doppel-Mark (③) · Service-Cards (④) · Tab-Counts (⑤) · KYLE-Master (⑥) · Logo-Hard-Rule-Audit (⑦) · Status-Farben-Audit (⑧) · EIDA-Palette-Discrepancy (⑨) · Test-Tenant-Konvention (⑩).

Erledigte Phasen (Archivnotiz)

Tables · Charts · Empty-States · Email · Onboarding · Permissions · Print-Styles · Browser-Support — alle in §12 (Pattern-Bibliothek) integriert und live.

Übernommen verbatim aus den Spherity Corporate Identity Guidelines v1.0 (Kapitel 17). Diese Sektion gilt für alle Spherity-Mitarbeiter:innen — nicht nur das Design-Team. Eingangs- und Eskalationsadresse: brand@spherity.com.

21.2 Was gilt als Verstoß?

Kategorie	Beispiele
Visuell	Falsche Farben, eigene Schriften, modifiziertes Logo, Sub-Brand-Akzent in Cross-Product-Asset, mehr als ein Akzent.
Prozessual	Externes Material ohne Brand-Freigabe, nicht freigegebenes KI-Tool, Master-Template direkt editiert, AI-Asset ohne 5 Akzeptanz-Gates (§11.8.5.2).
Inhaltlich	Falsche Produktnamen („OID" statt „EIDA"), nicht freigegebene Aussagen über Roadmap/Customer/Compliance, regulatorische Begriffe falsch verwendet.
Ethisch	„Im Stil von [Künstler]"-Prompts, KI-Inhalte ohne Kennzeichnung, AI-Provenance-Mark wegcropt (§11.8.5), Personen-Bilder ohne Einwilligung.

21.3 Ablauf bei einem Verstoß

Schritt	Wer	Was
1 · Entdeckung	Jede:r Mitarbeiter:in	Meldung an brand@spherity.com mit Asset-URL/Screenshot.
2 · Klärung	Marketing + Design	Klärt mit der Person — was sollte erreicht werden, welche Vorlage hat gefehlt.
3 · Korrektur	Marketing + Design + Person	Korrektes Material wird erstellt. Bei publiziertem Asset: zurückziehen, korrigieren, neu publizieren.
4 · Lerneffekt	Brand-Team	Bei wiederkehrenden Lücken: neue Vorlage prüfen (Canva-Master §11.10, Master-Prompt-Slot §11.8.5.3, Doku-Erweiterung).

21.4 Eskalation

Bei schwerwiegenden oder wiederholten Verstößen — insbesondere bei externem Schaden für die Marke (Customer-Beschwerde, Press-Berichterstattung, Investor-Wahrnehmung, Recruiting-Reputation) — informiert das Brand-Team das direkte Management der betreffenden Person. Dies ist keine Sanktion, sondern Notwendigkeit, um das Markenbild langfristig zu schützen.

21.5 Verbindliche Spherity-Kanäle

Anlass	Kanal
Verstoß melden	brand@spherity.com
Brand-Frage / Vorlage fehlt	brand@spherity.com
AI-Bild-Approval	Approver-Matrix §11.8.5.4
Video-Approval	Marketing + Design + Product (§11.9.6)
White-Label-Theme-Anfrage	brand@spherity.com (§17)

21.6 Was kein Verstoß ist

• Interne Drafts, Wireframes, Workshop-Material — solange nicht extern publiziert.
• Ad-hoc-Slides für interne All-Hands, die nicht in Customer-Decks recycelt werden.
• POC-Skizzen in der Design-Sandbox (§10.3.1) auf Basis nicht-finalisierter DS-Komponenten.
• Persönliche Social-Posts ohne Spherity-Logo/Botschaft.

Sobald ein Asset jedoch Logo, Spherity-Farben, Produktname oder Brand-Botschaft trägt und den internen Sphäre verlässt, fällt es in den Geltungsbereich.