axewhyzed/agentic-skills

UI/UX-Engineering & Moderne Produkt-Designsysteme

Ein rigoroser, institutioneller Betriebsleitfaden für User-Interface-Engineering, UX-Architektur, Design-Tokens, Komponentenbibliotheken und ästhetische Produkttransformationen.

---

1. Kernbetriebsprinzipien

1. Informationsdichte mit Atempausen: Hochdichte Layouts (Linear, Bloomberg, Stripe, TradingView) präsentieren maximales Signal pro Viewport-Pixel ohne Überladung. Dies wird durch bewussten Kontrast, kompakte typografische Skalen, 1px subtile Ränder und konsistente Spacing-Raster (4px / 8px) erreicht.
2. Richtlinien für hohe handwerkliche Qualität: Unverfeinerte, generische Standardeinstellungen ablehnen:
   • ❌ Keine übersättigten Lila/Indigo-Verläufe.
   • ❌ Kein unlesbarer, kontrastarmer Grau-auf-Grau-Text (text-gray-400 auf Weiß oder text-zinc-600 auf Schwarz).
   • ❌ Keine Emoji-Symbole anstelle von klaren Vektor-SVGs (Lucide / Radix).
   • ❌ Keine riesigen, leeren, schwebenden Karten mit massiven Radien (rounded-3xl) und winzigem, nicht ausgerichtetem Text.
   • ❌ Keine fehlenden Tastatur-Fokus-Zustände oder reine Maus-Interaktionen.
   • ✔️ Verwenden Sie zielgerichtete Farbpaletten, subtile 1px Ränder (border-slate-800), Monospace-Tabellenziffern (font-mono tabular-nums), klare Mikro-Badges und zugängliche Kontrastverhältnisse ($>4.5:1$).
3. Domänenspezifische Farbsemantik:
   • In Finanz-/Quant-Anwendungen haben Farben eine hochriskante semantische Bedeutung.
   • Grün (#10B981 / #22C55E): Positives Alpha, Rentabilität, Kaufsignale, Aufwärtstrend.
   • Rot (#EF4444 / #F43F5E): Verluste, Drawdowns, forensische Risiken, Verkaufssignale, negativer Cashflow.
   • Bernstein / Gelb (#F59E0B): Vorsicht, Triage erforderlich, neutrales Regime, Warnhinweise.
   • Blau / Cyan (#3B82F6 / #06B6D4): Informationszustände, Fokusringe, primäre Aktionsschaltflächen, neutrale Trends.
   • Farbenblindheits-Barrierefreiheit: Verlassen Sie sich niemals nur auf Farbe. Kombinieren Sie Farbindikatoren mit Richtungsglyphen (▲, ▼, —), Status-Badges oder Tooltips.
4. Vorhersehbare wahrgenommene Leistung:
   • Keine Layout-Verschiebungen (CLS < 0.1): Reservieren Sie Platz für nachgeladen geladene Diagramme und Tabellen.
   • Optimistisches Feedback: Sofortige aktive Zustände (<50ms Feedback) bei Schaltflächenklicks und Filterumschaltern.
   • Skelette statt ganzseitiger Spinner: Behalten Sie das Seitenlayout und die Navigationsumgebung bei, während Daten geladen werden.

---

2. Design-Token-Architektur

Ein robustes Designsystem ist in drei expliziten Token-Stufen aufgebaut:

graph TD
    Primitive["1. Primitive Token<br>(Rohwerte: slate-900, emerald-500, font-size-14, 8px)"]
    Semantic["2. Semantische Token<br>(Absicht: surface-background, text-primary, border-subtle, status-success)"]
    Component["3. Komponenten-Token<br>(Bereichsspezifisch: table-header-bg, badge-pill-padding, chart-grid-stroke)"]

    Primitive --> Semantic --> Component

2.1 Farb-Token-Matrix (Institutionelle Dunkel- & Hellthemen)

Semantischer Token	Dunkelmodus-Wert	Hellmodus-Wert	Verwendung
bg-app	#0B0F17 (Tiefes Obsidian)	#F8FAFC (Schieferton)	Viewport-Hintergrund
bg-surface	#111827 (Reichhaltiges Zink/Schiefer)	#FFFFFF (Reines Weiß)	Karten, Panels, modale Dialoge
bg-surface-hover	#1E293B (Gedämpftes Blau-Grau)	#F1F5F9 (Heller Schiefer)	Tabellenzeilen-Hover, Menüpunkt-Hover
border-subtle	#1E293B (1px sauberer Rand)	#E2E8F0	Kartenränder, Tabellentrennlinien
border-accent	#334155	#CBD5E1	Fokussierte Eingaben, aktive Tab-Ränder
text-primary	#F8FAFC (Hoher Kontrast, 16:1)	#0F172A	Primäre Überschriften, Datenwerte in Tabellen
text-secondary	#94A3B8 (Schiefer 400, 7:1)	#475569	Metrik-Labels, Beschreibungen, Zeitstempel
text-muted	#64748B (Schiefer 500, 4.5:1)	#64748B	Fußzeilen, deaktivierte Zustände, Abkürzungshinweise
accent-primary	#2563EB (Königsblau)	#2563EB	Primäre CTA-Buttons, aktive Optionsfelder
status-bullish	#10B981 (Smaragd)	#059669	Gewinne, Kaufüberzeugung, positiver CAGR
status-bearish	#EF4444 (Rosa/Rot)	#DC2626	Drawdowns, Disqualifikationen, hohe Verschuldung
status-caution	#F59E0B (Bernstein)	#D97706	Veraltete Daten, Überprüfung erforderlich, moderate Flaggen

2.2 Typografische Skala & Zahlenformatierung

/* Unverzichtbar für Finanzterminals & hochdichte Tabellen */
.tabular-numbers {
  font-family: var(--font-mono), monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

• Überschriften (Display/Titel): Halbfett / Fett (600/700), enge Laufweite (letter-spacing: -0.03em), Zeilenhöhe 1.2.
• Textkörper & Bedienelemente: 13px–14px (text-sm), mittel (500) für interaktive Labels, normal (400) für Text.
• Mikro-Labels & Badges: 11px–12px (text-xs), fett/halbfett (600/700), Großbuchstaben mit tracking-wider.
• Zahlen & Metriken: Monospace-Tabellenschrift (JetBrains Mono, Roboto Mono oder Inter mit tabular-nums), rechtsbündig in allen Tabellen.

---

3. Hochdichtes Finanzterminal- & Tabellen-UX

Datentabellen sind das Kernstück von Finanz- und Analyse-Workflows. Befolgen Sie diese nicht verhandelbaren Regeln:

1. Ausrichtungsregeln:
   • Text, Symbole und Firmennamen: Linksbündig.
   • Numerische Metriken (Preis, KGV, ROCE, CAGR, Punktzahlen, Daten): Rechtsbündig.
   • Status-Badges, aktionsfähige Flags, Symbole: Zentriert.
2. Klebende Spalten & mehrzeilige Kopfzeilen:
   • Die Kopfzeile muss beim vertikalen Scrollen kleben (sticky top-0 bg-surface z-10).
   • Klebende Identifikatorspalte (Firmenname / Symbol) bei horizontalem Scrollen für mobile und ultrabreite Tabellen.
3. Visuelle Struktur:
   • Zeilenhöhe: Kompakt (36px–40px) oder Standard (44px) mit subtiler Zebrastreifung oder klaren 1px Kanten (border-b border-slate-800/60).
   • Sofortige Zeilen-Hervorhebung bei Mausberührung (hover:bg-slate-800/40 cursor-pointer).
   • Direkte Inline-Badge-Pillen (bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded text-xs font-semibold).
4. Interaktive Steuerelemente:
   • Sortierindikatorpfeile (▲ aktiv aufsteigend, ▼ aktiv absteigend, gedämpft ⇅ sortierbar).
   • Sofortige Suche mit Löschen-Button (X), aktive Filteranzahl-Chips (Filter (3)) und Paginierungssteuerungen mit Gesamtzahl (Zeige 1–50 von 1.060).

---

4. Usability- & Interaktionsarchitektur (Nielsen Norman Heuristiken)

flowchart LR
    A["Wiedererkennen statt Erinnern<br>(Breadcrumbs, Klebende Kopfzeilen, Gespeicherte Filter)"] --> B["Benutzerkontrolle & Freiheit<br>(Schnell löschen, Esc zum Schließen, Rückgängig)"]
    B --> C["Sichtbarkeit des Systemstatus<br>(Optimistisches UI, Lade-Skelette, Zeitstempel)"]
    C --> D["Effizienz der Nutzung<br>(Tastaturkürzel, Befehlspalette Cmd+K)"]

1. Sichtbarkeit des Systemstatus:
   • Zeigen Sie bei Finanzdaten immer „Stand [Marktdatum/-zeit]" an, damit der Benutzer weiß, ob der Markt live oder geschlossen ist.
   • Wenn Anfragen länger als 100 ms dauern, zeigen Sie lokale Skelette anstelle von leeren Bildschirmen oder blockierenden Spinnern an.
2. Benutzerkontrolle & Freiheit:
   • Filterleisten müssen eine „Alle Filter zurücksetzen"-Schaltfläche mit einem Klick haben, wenn ein nicht standardmäßiger Filter aktiv ist.
   • Modale und Drawer müssen bei der Escape-Taste und bei Klick auf den Hintergrund schließen.
3. Konsistenz & Komponentenhierarchie:
   • Primäre Aktion: Volle, kontrastreiche Füllung (bg-blue-600 hover:bg-blue-500 text-white). Genau ein primärer CTA pro Ansicht.
   • Sekundäre Aktion: Gerahmte / subtile Füllung (bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700).
   • Geister-Aktion: Transparent (hover:bg-slate-800 text-slate-400 hover:text-slate-100).
   • Destruktive Aktion: Rot getönte Warnung (bg-rose-600/10 hover:bg-rose-600/20 text-rose-400 border border-rose-500/30).
4. Barrierefreiheit (WCAG 2.2 AA / AAA):
   • Text-zu-Hintergrund-Kontrastverhältnis $≥ 4.5:1$ für normalen Textkörper, $≥ 3:1$ für großen Text und UI-Komponenten.
   • Alle interaktiven Elemente müssen sichtbare :focus-visible-Fokusringe haben (ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-900).
   • Minimale klickbare Touch-Ziele: $44 \times 44$px auf Touch-Geräten.

---

5. WCAG 2.2 AA / AAA Farbkontrast-Engineering & Verifikation

Kontrast ist keine ästhetische Präferenz; es ist eine mathematische technische Spezifikation. Geringer Kontrast verursacht schwere kognitive Ermüdung, Lesbarkeitsfehler bei grellem Licht oder geringer Helligkeit und Verstöße gegen die Barrierefreiheitskonformität.

5.1 Mathematische Kontrastverhältnis-Spezifikation

Die relative Leuchtdichte $L$ einer sRGB-Farbe wird mit der CIE-Formel berechnet: $$L = 0.2126 R_s + 0.7152 G_s + 0.0722 B_s$$ wobei jeder Farbkanal $C \in {R, G, B}$ von 8-Bit-sRGB linearisiert wird ($C_{\text{srgb}} = C_{8\text{bit}} / 255$): $$C_s = \begin{cases} \frac{C_{\text{srgb}}}{12.92} & \text{if } C_{\text{srgb}} \le 0.04045 \ \left(\frac{C_{\text{srgb}} + 0.055}{1.055}\right)^{2.4} & \text{if } C_{\text{srgb}} > 0.04045 \end{cases}$$

Das Kontrastverhältnis zwischen einer helleren Farbe ($L_1$) und einer dunkleren Farbe ($L_2$) ist: $$\text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} : 1$$

5.2 Strenge Konformitätsschwellen

Elementkategorie	WCAG 2.2 AA Minimum	WCAG 2.2 AAA Ziel	Verifikationsstandard
Normaler Textkörper (< 18pt / 24px normal, < 14pt / 18.5px fett)	$\ge 4.5:1$	$\ge 7.0:1$	Primärdaten, Labels, Beschreibungen, Tabellenzeilen, Schaltflächenbeschriftungen
Großer Text & Überschriften ($\ge 18\text{pt}$ / $24\text{px}$, oder $\ge 14\text{pt}$ fett)	$\ge 3.0:1$	$\ge 4.5:1$	Anzeigetitel, Abschnittsüberschriften, prominente Metrikzahlen
UI-Komponenten & grafische Objekte (WCAG 1.4.11)	$\ge 3.0:1$	$\ge 4.5:1$	Eingaberänder, Schalter, Segmentierte Registerkartengrenzen, aktive Chip-Umrisse, Fokusringe
Farbverwendung (WCAG 1.4.1)	Nicht-Farbindikator erforderlich	Doppelte Kodierung erforderlich	Vermitteln Sie Auswahl oder Status niemals allein durch Farbe; kombinieren Sie mit Häkchen, Symbolen oder Textgewicht

5.3 Die 5 häufigsten Kontrastfallen & systematische Behebungen

1. Der Dark-Mode-Segmented-Tab-Blend

• Der Fehler: Ein aktiver Tab auf --card: #111827 innerhalb eines Containers auf --tab-bg: #0F172A. Das Kontrastverhältnis beträgt 1.02:1 (ein 2-Einheiten RGB-Delta). Der ausgewählte Tab verschmilzt vollständig mit dem Container-Hintergrund, sodass der Benutzer die aktive Auswahl nicht erkennen kann.
• Die Behebung: Erhöhen Sie den aktiven Tab-Hintergrund auf --card-elevated: #1E293B, fügen Sie einen aktiven 1px semantischen Rand hinzu (1px solid var(--accent) / #10B981), einen subtilen Leuchtring (box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25)) und färben Sie das SVG-Symbol des aktiven Tabs passend ein.

2. Der Hellmodus-Gedämpfter-Text-Kontrastfehler

• Der Fehler: Standardmäßiger sekundärer/gedämpfter Text mit Schiefer-400 (#94A3B8) auf Weiß (#FFFFFF) oder hellem Papier (#F8FAFC). Das Kontrastverhältnis beträgt 2.57:1 und verfehlt damit WCAG SC 1.4.3 ($\ge 4.5:1$) deutlich.
• Die Behebung: Verdunkeln Sie den sekundären Text im Hellmodus auf mindestens Schiefer-500 (#64748B), was 4.77:1 auf #FFFFFF und 4.54:1 auf #F8FAFC ergibt.

3. Der Bernstein-/Warn-Text-Badge-Fehler

• Der Fehler: Verwendung von hellem Bernstein (#D97706 / Bernstein-600) auf reinem Weiß für Status-Pillen. Das Kontrastverhältnis beträgt 3.22:1 und unterschreitet damit den Textschwellenwert von 4.5:1.
• Die Behebung: Verdunkeln Sie auf Bernstein-700 (#B45309) für Text-Badges im Hellmodus, um 4.82:1 zu erreichen, während die semantische Wärme erhalten bleibt.

4. Unsichtbare Dark-Mode-Eingabe- & Steuerelementgrenzen (WCAG 1.4.11)

• Der Fehler: Subtile 8%–12% weiße Deckkraftränder (rgba(255, 255, 255, 0.08)) auf dunklen Schieferoberflächen (#111827 / #0B0F17) haben ein Kontrastverhältnis von nur 1.2:1–1.4:1 und verletzen damit die 3:1-Anforderung für Nicht-Text-Grenzen.
• Die Behebung: Setzen Sie die standardmäßigen Eingaberänder im Dunkelmodus auf mindestens 18% weiße Deckkraft (rgba(255, 255, 255, 0.18) / #334155) und Hover-Zustände auf 32% (rgba(255, 255, 255, 0.32) / #475569).

5. Die Android Material 3 Dark-Mode-FilterChip-Falle

• Der Fehler: In Material 3 verwendet der standardmäßig ausgewählte FilterChip secondaryContainer (#37474F) gegen die dunkle Oberfläche (#14181E), was nur 1.83:1 Kontrast ergibt. Ohne Umriss oder Glyphe erfüllt der Chip weder SC 1.4.11 noch SC 1.4.1.
• Die Behebung: Geben Sie explizit an:
  1. selectedBorderColor = MaterialTheme.colorScheme.primary (was 9.88:1 Kontrast ergibt).
  2. selectedBorderWidth = 1.5.dp.
  3. leadingIcon = if (selected) { { Icon(Icons.Filled.Done, ...) } } else null, sodass die Auswahl unabhängig von der Farbwahrnehmung sichtbar ist.

---

6. UI/UX-Überarbeitungs-Playbook (Phasenweise Ausführung)

Wenn Sie mit der Überarbeitung oder Modernisierung der UI/UX einer bestehenden Anwendung beauftragt werden, befolgen Sie diese 4-stufige Ausführungsstrategie:

Schritt 1: Designsystem-Grundlage & Token-Extraktion

• Legen Sie die Farbpalette, den typografischen Maßstab, die Abstandsvariablen und die Randradius-Hierarchie in CSS/Tailwind fest (globals.css / tailwind.config.js).
• Führen Sie institutionelle Dark-Mode-Token und semantische Farbklassen ein.

Schritt 2: Modernisierung der Komponenten-Primitive

• Überarbeiten Sie die Kern-Primitive der wiederverwendbaren UI:
  • Button: Primär, sekundär, Geist, destruktiv, mit Ladespinnern.
  • Badge / Tag: Semantische farbige Pillen für Status, Stufen und Dynamik.
  • Card / Panel: Saubere Ränder, abgerundete Ecken (rounded-lg oder rounded-xl), subtile Hintergründe.
  • DataTable: Kopfzeilensortierung, rechtsbündige Zahlen, klebende Kopfzeile, Hover-Zeilen.
  • Modal / Drawer: Hintergrundunschärfe, Fokusfalle, sanfte Eingangsanimationen.
  • Tooltip: Informative Erklärungen für komplexe Metriken (z.B. EV/EBITDA, CANSLIM-Score).

Schritt 3: Layout- & Navigationsüberholung

• Modernisieren Sie die obere Navigationsleiste / Seitenleiste mit klaren aktiven Routenindikatoren, einer Firmensuchleiste und einem Systemstatusindikator (z.B. Marktsitzungsdatum, API-Status).
• Beseitigen Sie Layout-Ruckler und Seitensprünge bei Routenübergängen.

Schritt 4: Modernisierung hochwertiger Seiten

• Überarbeiten Sie die kritischen benutzernahen Ansichten:
  • Dashboard: Zusammenfassungskacheln für Führungskräfte, Marktpuls, Top-Gewinner/Verlierer, Regime-Heatmaps.
  • Überzeugung / Screener: Hochdichte Tabelle mit schneller Suche, sortierbaren Spalten, Metrik-Pillen und einem Schnelldetail-Drawer.
  • Unternehmensarbeitsbereich / Detail: Interaktive Diagramme mit Zeitraum-Pillen (1M, 6M, 1Y, 5Y, Max), Messlatten für Gewinnerwartungen, Registerkarten für Jahresabschlüsse und Analysten-Konsens-Daten.

---

7. Complete Interface Revamp: Gradient Removal, Data Density, & Modern Aesthetic (Example Instruction Sequence)

The following is an example prompt sequence an AI agent can execute to perform a full UI/UX audit and revamp of an existing application. Each step is self-contained but must be executed sequentially.

Step 1: Conduct a Comprehensive Interface Audit

1. Identify and list all explicit and implicit design system properties currently in use.
2. Categorize and quantify every gradient, shadow, and decorative flourish.
3. Measure contrast ratios of all text-on-background combinations using WCAG 2.2 AA/AAA standards.
4. Document all instances of color-only status indicators (e.g., green dot = online without text label).
5. Assess layout density: content-to-whitespace ratio on primary screens, number of viewport pixels consumed by chrome versus data.
6. Evaluate responsiveness: how the UI behaves at 1280px, 1024px, 768px, and 375px widths.
7. Compile all findings into a structured audit report.

Step 2: Establish the Design Token Architecture

1. Generate a complete color token palette (as per Section 2.1 above).
2. Define a typographic scale, numeric formatting rules, spacing system, and elevation/shadow tokens.
3. Convert existing application hardcoded values to CSS custom properties or Tailwind configuration.
4. Create token migration scripts if applicable (e.g., replace #3B82F6 with var(--accent-primary) or text-primary).

Step 3: Remove All Gradients, Shadows & Decorative Elements

1. Systematically replace all gradient backgrounds with solid primary, secondary, or surface colors.
2. Remove drop shadows, box shadows, and blur effects from all cards, panels, modals, and menus.
3. Replace all decorative icons, illustrations, and emoji with semantic vector icons (Lucide, Radix, Heroicons).
4. Ensure every remaining visual element serves an explicit functional or navigational purpose.
5. Remove all visual glows, gradients in charts, and textured backgrounds.

Step 4: Maximize Data Density & Information Signal

1. Reduce excessive whitespace and padding on primary data views (tables, lists, metric grids).
2. Add compact density toggle that switches between default and high-density modes for data tables.
3. Convert verbose labels into compact badges, inline metrics, and monospaced tabular figures.
4. Implement sticky headers for columns and rows on scrollable data widgets.
5. Add conditional formatting: highlight extreme values, percentile color coding in tables.
6. Remove redundant / repeated information on cards and panels.
7. Condense navigation: replace multi-level flyout menus with flat icon-and-label sidebars or command palettes.

Step 5: Modernize with Professional Aesthetic & Precision

1. Apply crisp 1px light borders to separate UI zones (cards, tables, panels).
2. Use a monochromatic or clinically clean color base (slate, zinc, neutral gray) for UI surfaces and borders.
3. Add semantic color only where it conveys meaningful status or action signal.
4. Set active UI elements to Royal Blue (#2563EB) for primary CTA, subtle slate tints for secondary controls.
5. Standardize border-radius to minimal values: rounded (4px) or rounded-md (6px). Never exceed rounded-xl (12px) on cards.
6. Increase font weight on numerical data values compared with labels (500 vs 400).
7. Align numerical columns to right in tables, text columns to left.
8. Use lowercase labels with semibold weight and subtle text-secondary color (#94A3B8 dark, #475569 light).
9. Add row-level interactivity: hover highlight, contextual actions on row hover.

Step 6: Validate, Refine & Document

1. Re-check WCAG 2.2 AA/AAA contrast compliance across all new color assignments.
2. Test all keyboard navigation paths: Tab order, focus indicators, Escape to close, Enter to activate.
3. Validate color-blind safety: ensure no information is conveyed by color alone.
4. Test on mobile viewports (375px), ensure minimum 44px touch targets.
5. Document all changes in a diff report: old values vs new values for colors, spacing, typography.
6. Export updated Tailwind config, CSS custom properties, and token JSON.
7. Create a style reference for all stakeholders explaining the rationale and new design system rules.

---

8. Interaction Patterns: Micro-Interactions & Animations

Micro-interactions are the pulse of a refined interface. They must be purposeful, brief, and not interfere with task completion.

1. Hover & Focus Transitions:
   • Duration: 150ms–200ms ease-out for color changes, background fills, and border highlights.
   • Do not animate opacity or transforms on large container elements (> 300px); this causes repaints and perceived sluggishness.
   • Use transform: scale(1.02) on clickable cards (with transition: transform 200ms ease-out) for tactile feedback.
2. Data Loading States:
   • Use shimmer skeletons that match the final layout geometry. Animate with a subtle 1.2s looping gradient shift (bg-gradient-animate).
   • Delay skeleton display by 200ms to avoid flashing on fast connections.
   • Transition from skeleton to final content with a 200ms fade-in (opacity 0→1).
3. Buttons & Toggles:
   • Loading state: Replace text with a spinning Loader2 icon (12px–14px) and preserve button width to prevent layout shift.
   • Disabled state: Reduce opacity to 0.5, cursor not-allowed, no focus ring.
   • Toggle: Animate knob with 200ms ease-out, track color change with 150ms ease-out.
4. Modal & Drawer Animations:
   • Entry: scale(0.95) → scale(1), opacity: 0 → 1 over 200ms ease-out.
   • Exit: Opacity: 1 → 0, scale(1) → scale(0.95) over 150ms ease-in.
   • Backdrop: Fade in 150ms, fade out 100ms. Never animate opacity over 300ms.
5. Page Transitions (SPA):
   • Use fade-in only (100ms–200ms). Avoid slide or wipe transitions on route changes; they feel slow in data-heavy apps.
   • If using shared layout elements (sidebar, top bar), do not animate them on route change.
6. Notification & Toast Animations:
   • Entry: slide from top-right, translateY(-10px) → translateY(0), opacity 0 → 1 over 300ms ease-out.
   • Auto-dismiss: 4s–5s, with a progress bar at the bottom.
   • Dismiss on click: translateY(-10px), opacity 0 over 200ms ease-in.

---

9. Design Principles for Data Visualization

Data visualizations in professional interfaces require precision, clarity, and semantic integrity.

1. Chart Types by Purpose:
   • Time Series (Price, Volume, Cumulative Returns): Line chart with area fill, or candlestick/OHLC for financial instruments.
   • Composition (Portfolio Allocation, Sector Exposure): Stacked bar chart or treemap. Never use pie charts for more than 5 categories.
   • Comparison (P/E ratios across peers, Beta comparison): Grouped vertical bar chart, or dot plot for limited data points.
   • Distribution (Volatility, Return distribution): Histogram or density plot. Use kernel density estimates for smoothing.
   • Correlation (Factor analysis, Pairwise returns): Scatter plot with trend line, or heatmap matrix.
2. Color in Charts:
   • Limit to 2–3 semantic colors. Default: Blue #3B82F6 for primary series, Emerald #10B981 for gains, Rose #EF4444 for losses.
   • Use opacity (20%–30%) for area fills under line charts. Keep the line itself at 80%–100% opacity.
   • For categorical data, generate a distinct color palette using HSL rotation (H: 0–360, S: 60%–80%, L: 50%–70%). Test each color on bg-surface and bg-app backgrounds.
3. Grids & Axes:
   • Use subtle horizontal grid lines only (rgba(255, 255, 255, 0.06) on dark, rgba(0, 0, 0, 0.08) on light).
   • Remove vertical grid lines entirely in time-series and bar charts.
   • Axis labels: text-xs (11px–12px), text-secondary color. Tick marks: subtle, 4px length.
   • Y-axis labels: Right-align numeric values if axis is on left; left-align if axis is on right.
4. Tooltips & Crosshairs:
   • Tooltip: bg-surface with 1px solid border-accent, rounded-lg, padding 8px 12px. Display series name, value, and date/time.
   • Crosshair: 1px dashed border-subtle vertical line on mouse position. Show crosshair only when hovering chart area.
   • On touch devices: Long-press triggers tooltip; snap to nearest data point.
5. Responsive Charts:
   • Charts should resize smoothly between 320px and 1200px width. Use container queries or ResizeObserver for real-time resizing.
   • Below 480px: Hide secondary axes, reduce label text size to 10px, reduce number of y-axis grid lines to 3.
   • Below 360px: Convert multi-series line chart to single series with a series selector toggle.

---

10. Final Design Checklist: The High-Density Financial Aesthetic

Every pixel must pay rent. This is the guiding principle.

• No gradients, no shadows, no blurry frosted glass.
• All borders are crisp 1px solid lines (border-slate-800 dark, border-slate-200 light).
• Minimal border-radius: maximum rounded-xl on cards, rounded-md on buttons, rounded on inputs and badges.
• Monospace tabular figures for all numbers, prices, scores, and dates in tables and cards.
• Contrast ratios verified: text-primary ≥ 7:1, text-secondary ≥ 4.5:1, UI elements ≥ 3:1.
• Semantic color is signal: green only for gains, red only for losses, amber for caution, blue for information/action.
• Color-blind safe: every color indicator paired with a symbol, shape, or text label.
• High data density: compact row heights (36px–40px), minimized chrome and whitespace around data.
• No emoji icons — all icons are crisp Lucide, Radix, or Heroicons SVGs (16px–20px).
• Keyboard accessible: visible focus rings (ring-2 ring-blue-500), logical Tab order, Escape to close modals.
• Touch-friendly: minimum 44px tap targets on all interactive elements.
• Predictable performance: skeletons for async content, no layout shift during load, optimistic UI.
• Consistent interaction patterns: hover→200ms transition, click→instant active state (<50ms), load→skeleton→fade-in.
• Minimal decorative elements: only functional dividers, semantic badges, and intentional whitespace remain.

---

Copyright © axewhyzed. All rights reserved. This document is intended for internal training and AI agent execution context. Do not distribute without written permission.