# Ashen Realms – UI & Visual Design Specification V1

## Zweck dieser Dokumentation

Dieses Dokument definiert die visuelle Sprache und die UI-Grundsätze von **Ashen Realms** für den ersten Vertical Slice.

Es dient als verbindliche Arbeitsgrundlage für:

- Frontend-Entwicklung
- UI-Komponenten
- neue Screens
- Design-Iterationen
- KI-gestützte Implementierung
- spätere Erweiterungen des Spiels

Die vorhandenen Referenzscreenshots sind visuelle Zielrichtung und sollen gemeinsam mit dieser Spezifikation verwendet werden.

Diese Spezifikation beschreibt **nicht pixelgenaue Maße**, sondern die grundlegenden Regeln, nach denen neue Screens gestaltet werden sollen.

---

# 1. Visuelle Leitidee

Ashen Realms soll wirken wie ein modernes Fantasy-Browser-RPG, das klassische Browser-MMORPG-Strukturen in eine hochwertige, zeitgemäße Präsentation überführt.

Die Oberfläche soll folgende Eigenschaften kombinieren:

- hochwertige Dark-Fantasy-Atmosphäre
- große, dominante Fantasy-Artworks
- klare Browser-RPG-Informationsstruktur
- moderne Lesbarkeit
- hochwertige Icons
- zurückhaltende Animationen
- dunkle, metallische und steinerne UI-Materialien
- wenige, gezielt eingesetzte Akzentfarben
- starke visuelle Hierarchie
- klar erkennbare Interaktionsflächen

Die Oberfläche darf bewusst an klassische Fantasy-Browser-MMORPGs erinnern, soll aber **nicht alt, überladen oder retro** wirken.

Grundsatz:

> **Klassische Browser-RPG-Struktur, moderne Premium-Präsentation.**

---

# 2. Referenzscreens

Für V1 existieren drei zentrale Referenzscreens:

1. **Welt-/Reiseansicht**
2. **Jagd-/Begegnungsauswahl**
3. **Kampfbildschirm**

Diese Screens bilden gemeinsam die visuelle Grundlage.

Sie sind:

- keine pixelgenauen Vorlagen
- keine unveränderbaren Layouts
- keine technische Vorgabe für exakte Maße

Sie definieren jedoch verbindlich:

- Materialität
- UI-Dichte
- Farbstimmung
- Informationshierarchie
- Rahmenstil
- Icon-Stil
- Panel-Struktur
- Verhältnis zwischen Artwork und UI
- allgemeines Gefühl des Produkts

Neue Screens müssen wie Teil **derselben Anwendung** wirken.

---

# 3. Grundlayout

Die Desktop-Oberfläche folgt grundsätzlich einer festen Struktur:

## Oben
**Globale Topbar**

Enthält:
- Charakterinfo
- Level
- HP
- globale Währungen
- globale Systemaktionen

## Links
**Primäre Navigation**

Enthält zentrale Spielbereiche:
- Karte
- Jagd
- Quests
- Inventar
- Charakter
- Shop

## Mitte
**Hauptinhalt**

Hier befindet sich je nach Screen:
- Gebiet
- Karte
- Jagd
- Kampf
- Inventar
- Questinhalt
- Händler
- Charakteransicht

## Rechts
**Kontextuelle Informationsspalte**

Enthält zum aktuellen Screen passende Zusatzinformationen.

## Unten
**Footer / Statusbereich**

Enthält:
- Systemnachrichten
- Welt-/Serverstatus
- Online-Anzeige
- optional Chat
- Uhrzeit / Status

Diese Struktur soll über die meisten Hauptscreens hinweg stabil bleiben.

---

# 4. Globale Topbar

Die Topbar ist dauerhaft sichtbar, außer ein späterer Spezialscreen benötigt bewusst einen Fokusmodus.

## Linker Bereich

Zeigt:

- Charakterportrait
- Charaktername
- Level
- Lebensbalken
- optional kleines Klassen-/Fraktionssymbol

Beispiel:

**Aric Duskwalker**  
**Stufe 2**  
`418 / 520 HP`

Der HP-Balken soll klar und sofort lesbar sein.

---

## Mittlerer Bereich

Zeigt globale Ressourcen.

Beispiele:

- Silber
- Premium-/Spezialwährung
- Gebietsunabhängige Ressourcen

Für den Vertical Slice sollen nur wirklich relevante Ressourcen gezeigt werden.

Keine unnötige Icon-Flut.

---

## Rechter Bereich

Globale Systemaktionen:

- Nachrichten
- Freunde / Gruppe
- Einstellungen
- Logout / Menü

Icons müssen konsistent und klar erkennbar sein.

---

# 5. Linke Hauptnavigation

Die linke Navigation ist eine der konstantesten UI-Komponenten.

## V1-Navigation

- Karte
- Jagd
- Quests
- Inventar
- Charakter
- Shop

Jeder Eintrag besitzt:

- Icon
- Textlabel
- aktiven Zustand
- Hover-Zustand
- optional Benachrichtigungspunkt

---

## Aktiver Zustand

Der aktuell aktive Menüpunkt muss deutlich hervorgehoben werden.

Mögliche Mittel:

- dezenter Hintergrund
- Lichtkante
- Akzentfarbe
- leichtes Icon-Glow
- hellere Typografie

Der aktive Zustand darf deutlich sein, aber nicht wie ein moderner Neon-SaaS-Tab wirken.

---

# 6. Hauptcontent-Fläche

Der Hauptcontent ist die wichtigste visuelle Fläche.

Grundsatz:

> **Artwork zuerst, UI darüber oder darum herum.**

Das Spiel soll seine Welt über große Illustrationen verkaufen.

Die Hauptfläche darf nicht wie eine Sammlung kleiner Dashboard-Karten wirken.

Stattdessen:

- große Szenen
- große Gegner
- große Orte
- klar platzierte UI-Overlays
- wenige starke Interaktionselemente

---

# 7. Rechte Informationsspalte

Die rechte Spalte ist kontextabhängig.

Sie kann beispielsweise enthalten:

- Gebietsname
- Gebietsbeschreibung
- empfohlene Stufe
- mögliche Gegner
- mögliche Beute
- Gebietswährung
- Questinformationen
- Kampflog
- Itemdetails

Die Spalte soll Informationen strukturieren, ohne die Hauptszene zu dominieren.

---

# 8. Footer

Der Footer ist zurückhaltend.

Er kann enthalten:

- kurze Systemmeldungen
- Chatstatus
- aktuelles Gebiet
- Welt-/Serverstatus
- Online-Anzahl
- Uhrzeit

Er soll wie Teil eines persistenten Online-RPGs wirken, aber nicht permanent Aufmerksamkeit verlangen.

---

# 9. Welt-/Reiseansicht

Die Welt-/Reiseansicht verbindet Exploration, Orientierung und Atmosphäre.

## Hauptziele

Der Spieler soll sofort erkennen:

- wo er ist
- welche Orte erreichbar sind
- wohin er reisen kann
- wie gefährlich die Reise ist
- wie lange sie dauert
- was grob im Gebiet wartet

---

## Visuelle Struktur

Die Hauptfläche zeigt ein großes Gebiet-Artwork.

Darauf liegen Orts- oder Reise-Nodes.

Beispiele:

- Südtor
- Verbrannte Straße
- Verlassener Wachtposten
- Aschengrube

Nodes werden durch Pfade oder visuelle Verbindungen miteinander verbunden.

---

## Orts-Nodes

Ein Node zeigt mindestens:

- Name
- optional empfohlenes Level
- Zustand
- Erreichbarkeit

Mögliche Zustände:

- aktueller Ort
- erreichbar
- entdeckt
- noch nicht entdeckt
- gefährlich
- sicher

Der aktuelle Ort benötigt eine klare Hervorhebung.

---

# 10. Reise-Panel

Beim Auswählen eines Zielorts erscheint ein Reise-Panel.

Es zeigt:

- Ziel
- Reisezeit
- Gefahrenstufe
- Start-Button

Beispiel:

**Zur Verbrannten Straße reisen**

Reisezeit: `00:00:15`  
Gefahr: **Niedrig**

Button:

**Reise beginnen**

Die Reisezeit muss als Bestandteil der Welt wirken und nicht wie ein künstlicher Cooldown.

---

# 11. Gefahrendarstellung

Gefahr wird farblich und textlich dargestellt.

Empfohlene Stufen:

- Schwach
- Passend
- Stark
- Sehr gefährlich
- Tödlich

Farben sind unterstützend, nicht alleinige Information.

Beispiel:

- Grün: Passend
- Orange: Stark
- Rot: Sehr gefährlich / Tödlich

Textlabel bleiben immer sichtbar.

---

# 12. Jagdansicht

Die Jagdansicht ist keine Monsterliste, sondern eine **visuelle Encounter-Auswahl**.

Der Spieler startet die Jagd und erhält mehrere mögliche Begegnungen.

---

## Encounter-Karten

Jede Begegnung erhält eine große Karte mit:

- Gegnername
- Gegner-Artwork
- Gefahrenstufe
- kurze Beschreibung
- optional Level
- Angreifen-Button

Beispiel:

**Dämmerwolf**  
Passend

**Giftspinne**  
Passend

**Verdorbener Hirsch**  
Stark

**Schwarzmähnenwolf**  
Sehr gefährlich

---

## Kartenlayout

Die Karten sollen:

- groß genug für Monsterartwork sein
- nicht wie kleine Trading Cards wirken
- klare Unterschiede zwischen Gegnern zeigen
- dieselbe Panel-Sprache wie der Rest der UI verwenden

Der Gegner ist das visuelle Zentrum der Karte.

---

# 13. Jagdaktionen

Mindestens:

- Angreifen
- Neu suchen
- Zurück

Später optional:

- Beobachten
- Verfolgen
- Elite suchen

V1 bleibt bewusst einfach.

---

# 14. Gebietsinformationen während der Jagd

Die rechte Spalte kann enthalten:

- aktueller Ort
- Gebiet
- empfohlene Stufe
- mögliche Belohnungen
- Gebietswährung
- kurze Beschreibung

Diese Informationen dürfen nicht jede Jagdkarte einzeln wiederholen.

---

# 15. Kampfbildschirm

Der Kampfbildschirm ist einer der wichtigsten Screens des Spiels.

Grundprinzip:

> **Spieler und Gegner stehen sich visuell gegenüber.**

Kein abstrakter Zahlenkampf.

---

# 16. Kampfkomposition

## Spieler

Links im Hauptbereich.

Groß dargestellt.

Nicht nur Portrait.

Der Charakter muss wie tatsächlich im Kampf anwesend wirken.

---

## Gegner

Rechts im Hauptbereich.

Mindestens gleich stark visuell gewichtet.

Monster sollen groß, bedrohlich und detailliert dargestellt werden.

---

## Hintergrund

Der Kampfhintergrund entspricht dem aktuellen Ort.

Beispiele:

- Dämmerwald
- Aschenfelder
- Krypta
- Ruinenhof

Der Hintergrund soll Atmosphäre erzeugen, aber Spieler und Gegner nicht überlagern.

---

# 17. Kampfinformationen

Gut sichtbar:

## Spieler
- Name
- HP
- Status-Effekte

## Gegner
- Name
- HP
- Status-Effekte

## Allgemein
- aktuelle Runde
- Telegraphing
- Cooldowns

---

# 18. Aktionsleiste

Die Aktionsleiste befindet sich primär im unteren Bereich.

V1:

- Angriff
- Schwerer Hieb
- Schildstoß
- Verteidigen
- Trank

Optional zusätzlich:

- Flucht

Jede Aktion besitzt:

- Icon
- Name
- Hotkey
- aktiven Zustand
- Cooldown-Zustand
- Disabled-Zustand

---

# 19. Ausgewählte Aktion

Die aktuell ausgewählte oder ausführende Aktion wird deutlich hervorgehoben.

Beispielsweise durch:

- goldene Lichtkante
- leichte Hintergrundaufhellung
- dezentes Glow

Keine übertriebene Neonanimation.

---

# 20. Tranktasche

Die Tranktasche besitzt einen eigenen kleinen Bereich.

V1:

**2 Slots**

Sie zeigt:

- Potion-Icon
- verbleibende Anzahl
- gegebenenfalls Cooldown / deaktivierten Zustand

Die Tranktasche soll nicht mit dem normalen Inventar verwechselt werden.

---

# 21. Kampflog

Das Kampflog befindet sich vorzugsweise rechts.

Es zeigt:

- Rundennummer
- Aktionen
- Schaden
- Status-Effekte
- Unterbrechungen
- Heilung

Beispiel:

**Runde 3**

Aric nutzt Schildstoß.  
Dämmerwolf erleidet 33 Schaden.  
Dämmerwolf beginnt zu bluten.

Wichtige Ereignisse dürfen farblich hervorgehoben werden.

Normale Einträge bleiben zurückhaltend.

---

# 22. Telegraphing

Vorbereitete gefährliche Angriffe müssen sichtbar angekündigt werden.

Mögliche Darstellung:

- Text direkt beim Gegner
- Status-Icon
- kleine Warnfläche
- Effekt am Gegner
- Animation

Beispiel:

**Der Steingolem holt zu einem schweren Schlag aus.**

Die Information muss vor der Spielerentscheidung klar erkennbar sein.

---

# 23. Typografie

Die Typografie soll Fantasy-Atmosphäre transportieren, ohne Lesbarkeit zu opfern.

## Überschriften

Dürfen eine charaktervolle Serifenschrift verwenden.

Geeignet für:

- Ortsnamen
- Gebiete
- Bossnamen
- große Panels

---

## UI-Text

Für:

- Beschreibungen
- Werte
- Buttons
- Tooltips
- Kampflog

muss eine sehr gut lesbare Schrift verwendet werden.

---

## Grundregel

Keine übermäßig dekorativen Fantasy-Fonts für lange Texte.

Fantasy-Stimmung entsteht durch:

- Hierarchie
- Material
- Rahmen
- Artwork

nicht durch schwer lesbare Schrift.

---

# 24. Farben

Die Grundpalette ist dunkel und entsättigt.

Haupttöne:

- Anthrazit
- dunkles Metall
- Schwarzbraun
- dunkles Blau-Grau
- Stein
- gedämpftes Gold

Akzente werden sparsam verwendet.

---

## Funktionsfarben

### Rot
- Leben
- Schaden
- Gefahr
- Blutung

### Grün
- sicher
- passend
- positive Zustände

### Orange / Gold
- Warnung
- Elite
- wertvolle Aktion
- Auswahl

### Blau
- aktive Navigation
- Magie
- besondere Ressourcen

### Violett
- seltene / spezielle Systeme
- Premium-/Sonderwährung

Funktionsfarben sollen überall dieselbe Bedeutung behalten.

---

# 25. Rahmen und Materialien

Panels verwenden eine gemeinsame Materialwelt.

Geeignet:

- dunkles Metall
- gealtertes Eisen
- dunkles Holz
- Stein
- Leder
- dezente goldene Zierlinien

Nicht geeignet:

- weiße moderne Cards
- Glassmorphism
- starke Neonflächen
- SaaS-Dashboard-Look
- flache bunte Mobile-Game-Panels

---

# 26. Panel-Regeln

Panels besitzen:

- klaren Rahmen
- dunkle Innenfläche
- leichte Textur
- genügend Innenabstand
- eindeutige Überschrift

Keine unnötige Verschachtelung von Panels in Panels.

Die Hauptszene soll sichtbar bleiben.

---

# 27. Buttons

Buttons sollen mechanisch und hochwertig wirken.

Grundform:

- dunkler Hintergrund
- metallischer oder steinerner Rahmen
- klare Beschriftung
- dezente Akzentkante

---

## Zustände

### Normal
ruhig

### Hover
leicht heller / Akzentkante

### Active
sichtbar gedrückt oder stärker hervorgehoben

### Disabled
entsättigt, aber weiterhin lesbar

### Primary
deutlichste Aktion im aktuellen Kontext

---

# 28. Icons

Icons sollen stilistisch einheitlich sein.

Eigenschaften:

- detailliert
- Fantasy-tauglich
- klare Silhouette
- gut lesbar bei kleiner Größe
- keine Mischung aus modernen Flat-Icons und Fantasy-Icons

Items dürfen stärker illustriert sein als reine UI-Symbole.

---

# 29. Item-Icons

Item-Icons sind ein wichtiger Teil der Loot-Motivation.

Sie sollen:

- hochwertig
- individuell
- klar erkennbar
- farblich kontrolliert

sein.

Ein seltenes Item muss bereits über sein Icon wertvoll wirken.

---

# 30. UI-Dichte

Ashen Realms darf informationsreicher sein als ein modernes Mobile Game.

Es soll jedoch nie chaotisch wirken.

Grundsatz:

> **Viele Informationen sind erlaubt, wenn ihre Hierarchie klar ist.**

Daher:

- Hauptaktion groß
- Sekundärinformation kleiner
- Dekoration hinter Funktion
- keine 20 gleich wichtigen Buttons

---

# 31. Abstände

UI soll kompakt, aber nicht gequetscht wirken.

Wichtig:

- klare Innenabstände in Panels
- Abstand zwischen Gruppen
- keine Textblöcke direkt am Rahmen
- keine übervollen Tabellen
- klare Trennung von Gameplay und Metainformation

---

# 32. Animationen

Animationen sollen die hochwertige Präsentation unterstützen.

Geeignet:

- leichte Parallax-Bewegung in Artworks
- Rauch
- Nebel
- Funken
- Feuer
- leichte UI-Glow-Animationen
- Trefferfeedback
- Schadenszahlen
- kurze Screen-Shakes bei starken Treffern
- sanfte Panel-Transitions

---

## Nicht geeignet

- permanente starke Animation
- blinkende Buttons
- übertriebene Partikel
- hektische Mobile-Game-Effekte
- störende Kameraeffekte

---

# 33. Übergänge

Screenwechsel sollen weich wirken.

Beispiele:

- Crossfade
- leichter Slide
- Artwork-Fade
- kurzer Zoom
- dunkle Überblendung bei Reise

Kampfstart darf dramatischer inszeniert werden.

---

# 34. Responsive Design

Desktop ist für V1 die primäre Zielplattform.

Die UI soll trotzdem grundsätzlich responsiv aufgebaut werden.

---

## Desktop

Volles Layout:

- Topbar
- linke Navigation
- Hauptcontent
- rechte Sidebar
- Footer

---

## Tablet

Mögliche Anpassungen:

- schmalere Navigation
- Sidebar einklappbar
- Panels untereinander
- weniger gleichzeitig sichtbare Encounter-Karten

---

## Smartphone

Für V1 nicht Hauptpriorität.

Langfristig:

- Navigation als Drawer / Bottom Navigation
- rechte Sidebar wird Kontextpanel
- Encounter-Karten vertikal
- Kampflog einklappbar
- Aktionen als horizontale Leiste / Grid

Desktop-Design darf nicht zugunsten von Mobile kompromittiert werden.

---

# 35. Artworks

Artworks sind kein Hintergrunddekor, sondern ein zentrales Produktmerkmal.

Priorität:

1. Gebiet
2. Gegner
3. Charakter
4. Boss
5. Item

Die UI soll möglichst viel Artwork sichtbar lassen.

---

# 36. Screen-spezifische Art Direction

## Aschenfelder

- Asche
- verkohlte Erde
- Ruinen
- Rauch
- Glut
- Vulkan-/Feuerstimmung
- warme Glutakzente gegen kalte Grautöne

## Dämmerwald

- dichter Wald
- Nebel
- dunkle Grüntöne
- kaltes Blau-Grau
- verdorbene Natur
- vereinzelte rote Akzente

## Vergessene Ruinen

- Stein
- Grabmäler
- alte Banner
- Krypten
- kaltes Licht
- untote / magische Akzente
- zurückhaltendes Violett oder Blau

---

# 37. Interaktionsgrundsatz

Die UI muss immer klar machen:

- was klickbar ist
- was ausgewählt ist
- was gefährlich ist
- was aktuell passiert
- was der Spieler als Nächstes tun kann

Atmosphäre darf niemals die Bedienbarkeit verschlechtern.

---

# 38. Informationsgrundsatz

Der Spieler soll wichtige Informationen sofort erkennen.

Priorität im Kampf:

1. eigenes Leben
2. gegnerisches Leben
3. gefährliche nächste Aktion
4. verfügbare Fähigkeiten
5. Status-Effekte
6. Kampflog

Priorität in der Welt:

1. aktueller Ort
2. mögliche Reiseziele
3. Reisegefahr
4. verfügbare Aktionen
5. Gebietsinformation
6. Belohnungsinformationen

---

# 39. Do

Neue Screens sollen:

- dieselben Rahmenmaterialien verwenden
- dieselbe Navigation verwenden
- dieselben Funktionsfarben verwenden
- große Artworks verwenden
- klare Fokusbereiche besitzen
- Informationshierarchie einhalten
- Fantasy-Atmosphäre erzeugen
- browserbasiert und funktional wirken
- wie Teil eines hochwertigen RPGs wirken

---

# 40. Don't

Neue Screens sollen ausdrücklich nicht:

- wie ein modernes SaaS-Dashboard aussehen
- große weiße Flächen verwenden
- Glassmorphism verwenden
- neonbunte Cyberpunk-Akzente verwenden
- Mobile-Game-Popups stapeln
- wichtige Informationen hinter dekorativen Effekten verstecken
- jeden Bereich mit unterschiedlichen UI-Stilen bauen
- generische Bootstrap-/Material-UI-Optik besitzen
- wie ein Retro-Browsergame aus den 2000ern wirken
- pixelgenau alte Browser-MMORPGs kopieren

---

# 41. Konsistenzregel für KI-Implementierung

Wenn eine Coding-KI neue Screens oder Komponenten erzeugt, muss sie zuerst vorhandene Referenzscreens und bestehende Komponenten prüfen.

Neue UI darf nicht unabhängig neu interpretiert werden.

Grundsatz:

> **Neue Screens müssen aussehen, als wären sie vom selben UI-Team im selben Design-System gebaut worden.**

---

# 42. Komponentenstrategie

Wiederkehrende UI sollte als wiederverwendbare Komponenten umgesetzt werden.

Beispiele:

- AppShell
- TopBar
- SideNavigation
- Footer
- Panel
- PanelHeader
- PrimaryButton
- SecondaryButton
- ResourceDisplay
- HealthBar
- CharacterHeader
- LocationNode
- TravelPanel
- EncounterCard
- DangerBadge
- ItemIcon
- ItemTooltip
- CombatActionButton
- CombatLog
- PotionSlot
- StatusEffectIcon

Keine Screen-spezifischen Kopien derselben UI bauen.

---

# 43. Design Tokens

Die technische Umsetzung soll möglichst mit zentralen Design Tokens arbeiten.

Beispiele:

## Farben
- background
- panel
- panel-muted
- border
- border-highlight
- text-primary
- text-secondary
- accent-gold
- accent-blue
- success
- warning
- danger

## Abstände
- xs
- sm
- md
- lg
- xl

## Radien
Nur wenige konsistente Werte.

## Rahmen
- standard
- highlighted
- selected
- rare-item

## Schatten / Glow
Nur wenige definierte Varianten.

---

# 44. Ziel für den ersten Frontend-Prototyp

Der erste technische UI-Prototyp muss noch keine perfekte Grafikqualität besitzen.

Er soll jedoch bereits beweisen:

- Layout funktioniert
- Navigation wirkt konsistent
- Weltansicht trägt das Spiel
- Jagdansicht ist intuitiv
- Kampfbildschirm ist klar
- Artworks dominieren sinnvoll
- UI fühlt sich nicht wie ein normales Web-Dashboard an

Die Referenzscreens sind dabei die visuelle Zielmarke.

---

# 45. Kurzfassung

Ashen Realms verwendet ein stabiles Desktop-Layout aus:

**Topbar + Navigation + Hauptcontent + Kontextspalte + Footer**

Die Welt wird über große Fantasy-Artworks präsentiert.

Jagd zeigt Gegner als visuelle Encounter-Auswahl.

Kampf zeigt Spieler und Gegner direkt gegenüber.

Panels sind dunkel, metallisch und hochwertig.

Gold, Blau, Grün, Orange und Rot werden gezielt als Funktionsfarben eingesetzt.

Die UI ist informationsreich, aber klar hierarchisiert.

Der wichtigste visuelle Grundsatz lautet:

> **Ashen Realms soll wie die moderne Weiterentwicklung eines klassischen Fantasy-Browser-MMORPGs wirken – nicht wie ein altes Browsergame und nicht wie ein modernes Business-Dashboard.**
