Skill Reference
Design Guardrails
Absolute NOs
| Was | Beispiel | Stattdessen |
|---|---|---|
| Glowing blue networks | Leuchtende Knoten-Linien als Hero-BG auf PQC-Page | Petrol Dark + sparse Hairline-Grid |
| Floating holograms | Schwebende 3D-UI über Hands in Renders | Dokumentarisches Foto, leicht unscharf |
| Sci-fi cityscapes | Neon-Stadt-Skyline hinter Wallet-Demo | Klare Brand-Surface, typografisches Statement |
| Stock-photo smiling at laptops | Zwei Geschäftsleute vor Laptop lachen | Echte Spherity-Aufnahmen oder kein Foto |
| Overloaded dashboards | 12 Widgets, 6 Farben, 4 Charts auf einer Seite | Max. 3 primäre Datenpunkte, klare Hierarchie |
| Cyan-on-pure-black | #2BFEBB auf #000000 als Hero | Petrol Dark #0F1F2A als Base |
| Gradient text | background-clip: text + Verlauf auf Headline | Solide Farbe, Emphasis via Gewicht |
| Side-stripe borders | border-left: 3px solid #2BFEBB auf Card | Voller Border oder Background-Tint |
| Identical card grids | 6 gleiche Icon+Heading+Text-Cards in einer Reihe | Featured-2-Mini-1 oder typografische Liste |
| Glassmorphism als Deko | backdrop-filter: blur auf Content-Cards | Solide Surface mit klarer Elevation |
Subtle NOs
| Was | Beispiel |
|---|---|
| Zu viele Akzentfarben | Cyan + CARO-Petrol + Warning-Orange gleichzeitig sichtbar |
| Symmetrische Layouts überall | Drei gleichgroße Spalten auf jeder Section der Page |
| Overly polished SaaS look | Weicher Drop-Shadow auf jedem Element, viele Rounded Corners |
| Marketing-Buzzwords | „Supercharge your compliance workflow" |
| Em-Dash-Overuse | Mehr als 2 — in einem Body-Text-Block |
| Bounce/Elastic Easing | Button springt bei Hover-State |
Quality Check
Vor jedem finalen Output prüfen:
- Glaubwürdig? Würde ein Compliance-Officer das ernst nehmen?
- Minimal? Kann ein Element entfernt werden, ohne Information zu verlieren?
- Infrastruktur, nicht Marketing? Fühlt es sich nach Werkzeug oder nach Werbung an?
- Regulierte Industrie? Passt es zu Pharma, Finance, Automotive — nicht zu Consumer-Apps?
Wenn nein → vereinfachen.
Positioning Protection
Spherity = Infrastruktur, nicht App.
| Richtig | Falsch |
|---|---|
| Sachliche Statusanzeige mit Quelle + Zeitstempel | Animierter „Verified"-Badge mit Konfetti |
| Tabelle mit Audit-Trail-Einträgen | Bunte Timeline mit Icon-Markern |
| Mono-String für DID/VC-Referenz | „Magic Link" mit Sparkle-Icon |
| Klarer Error mit Ursache + nächstem Schritt | Toast: „Something went wrong 😕" |
Final Rule
Wenn es wie ein Startup-Landing-Page-Template aussieht → ist es falsch.
Wenn jemand bei ungebrieftem Blick sagt „das hat eine KI gemacht" → neu schreiben, nicht reparieren.
Querverweise: design.md §3.6 AI-Slop-Test · AI Behavior