art

docs/Ashen_Realms_Icon_Design_Guidelines.md

@@ -0,0 +1,657 @@
+# Ashen Realms – Icon Design Guidelines
+
+## Purpose
+
+This document defines the visual design rules for **all future icons** in **Ashen Realms**.
+
+Its purpose is to ensure that every newly created icon:
+- fits the existing Ashen Realms look and feel,
+- remains readable in the UI,
+- can be extended consistently over time,
+- and does not drift into styles that break the game’s visual identity.
+
+These guidelines apply to:
+- item icons,
+- faction icons,
+- NPC / role icons,
+- enemy markers,
+- status-effect icons,
+- skill / ability icons,
+- currency icons,
+- UI utility icons,
+- reputation / progression icons,
+- and future icon categories.
+
+---
+
+## 1. Core Visual Identity
+
+Ashen Realms uses a **dark fantasy browser RPG** aesthetic.
+
+All icons must visually belong to the same world as the existing:
+- world map screens,
+- combat screens,
+- character screens,
+- hunt cards,
+- UI ornaments,
+- creature art,
+- and reputation / faction elements.
+
+### The intended overall feel is:
+- dark,
+- grounded,
+- serious,
+- atmospheric,
+- medieval / gothic,
+- realistic or painterly-realistic,
+- non-cartoon,
+- non-anime,
+- non-mobile-game.
+
+### Every icon should feel like one of these:
+- a real object from the world,
+- a crafted emblem or sigil,
+- a carved, forged, stitched, engraved, or painted artifact,
+- a readable symbolic gameplay marker that still belongs to the world.
+
+---
+
+## 2. Global Style Rules
+
+## 2.1 Required style qualities
+
+All icons should be:
+- visually clean and readable,
+- centered and balanced,
+- strong in silhouette,
+- detailed but not noisy,
+- high contrast against dark UI backgrounds,
+- rendered with believable materials,
+- delivered on a **true transparent background** unless a specific exception is requested.
+
+## 2.2 Forbidden style directions
+
+Do **not** create icons in any of these styles:
+- cartoon,
+- anime,
+- comic,
+- pixel art,
+- flat vector app icon style,
+- modern esports logo style,
+- bright casual mobile game style,
+- toy-like style,
+- exaggerated glossy fantasy-mobile style,
+- sci-fi interface style,
+- overly abstract minimalist symbol style.
+
+If an icon looks like it belongs to a mobile gacha game, a MOBA logo pack, or a modern productivity app, it is wrong.
+
+---
+
+## 3. Material Language
+
+A central part of Ashen Realms’ identity is believable materiality.
+
+Icons should feel **forged, worn, scavenged, inherited, blessed, cursed, stitched, or weathered**.
+
+### Preferred materials
+- blackened iron,
+- aged steel,
+- tarnished silver,
+- bronze / brass,
+- worn gold accents,
+- leather,
+- dark wood,
+- bone,
+- horn,
+- parchment,
+- rough cloth,
+- stone,
+- wax,
+- ember-charred surfaces,
+- ash-darkened surfaces.
+
+### Preferred surface detail
+- scratches,
+- dents,
+- soot,
+- wear,
+- chipped edges,
+- light corrosion / patina,
+- dried blood if thematically appropriate,
+- singed cloth,
+- cracked runes,
+- faint glow for magic or heat.
+
+### Avoid
+- perfectly clean surfaces,
+- smooth plastic look,
+- airbrushed casual-game polish,
+- chrome-like sterile rendering,
+- excessive sparkle,
+- excessive bloom.
+
+---
+
+## 4. Shape Language
+
+Every icon should be based on a **clear primary shape**.
+
+This shape is what makes the icon readable at small sizes.
+
+### Strong base-shape examples
+- sword,
+- shield,
+- skull,
+- claw,
+- fang,
+- potion bottle,
+- bag,
+- helm,
+- ring,
+- moon,
+- flame,
+- tower,
+- gate,
+- coin,
+- scroll,
+- paw mark,
+- eye,
+- antlers,
+- cross / X,
+- gem,
+- medallion.
+
+### Composition rule
+An icon should usually have:
+1. one dominant central object or symbol,
+2. one supporting silhouette or frame,
+3. only a few secondary detail elements.
+
+### Avoid
+- too many unrelated elements in one icon,
+- cluttered miniature scenes,
+- thin unreadable details as the main structure,
+- weak silhouette,
+- symbols that only make sense at very large size.
+
+---
+
+## 5. Color Rules
+
+Ashen Realms uses a restrained palette.
+
+### 5.1 General palette logic
+The base is usually:
+- charcoal,
+- black,
+- deep brown,
+- grey steel,
+- muted bronze,
+- old gold,
+- faded bone,
+- dark desaturated reds,
+- cold blue accents,
+- muted green accents,
+- ember orange highlights.
+
+### 5.2 Accent colors
+Accent colors should communicate meaning, not decoration.
+
+Examples:
+- **blue**: civilization, magic crystal, noble / city identity,
+- **red**: danger, violence, blood, corruption, raiders,
+- **green**: poison, wilderness, hunter / druidic influence,
+- **orange / ember**: fire, ash, heat, aggression,
+- **gold**: prestige, sacred, important, elite,
+- **white / wax / pale bone**: sacred duty, relics, vigil, purity.
+
+### 5.3 Rules for color usage
+- Keep the icon readable on dark UI backgrounds.
+- Use color intentionally.
+- Do not oversaturate the full icon.
+- One main accent color is usually enough.
+- A second accent is acceptable only if it improves meaning.
+- Metal neutrals should remain dominant in many icon types.
+
+---
+
+## 6. Glow and Magic Effects
+
+Glow effects are allowed, but must be controlled.
+
+### Appropriate glow usage
+- ember cracks in charred weapons,
+- faint runic light,
+- potion liquid glow,
+- moonlit eyes,
+- sacred candlelight,
+- rare arcane gem cores,
+- faint curse energy.
+
+### Rules
+- Glow should support the icon, not replace its structure.
+- The shape must still read without the glow.
+- Do not flood the whole icon with bloom.
+- Avoid neon or sci-fi lighting.
+
+---
+
+## 7. Transparency and Background Rules
+
+By default, future icons should be delivered as:
+- **PNG**
+- **transparent background**
+- with the object cut out cleanly
+
+### Important requirement
+The background must be **truly transparent**, not:
+- dark-filled,
+- fake transparent,
+- soft black boxed,
+- blurred backdrop,
+- or baked into a UI panel.
+
+### Exceptions
+A non-transparent icon background is only acceptable if explicitly requested for:
+- a full card artwork,
+- a framed UI tile,
+- a world illustration,
+- or a screenshot mockup.
+
+---
+
+## 8. Readability by Size
+
+Every icon should remain functional at the sizes relevant to the game UI.
+
+### Reference sizes
+- **1024×1024** – master asset / source icon
+- **256×256** – large UI display / previews
+- **128×128** – normal inventory or profile icon
+- **64×64** – standard in-game icon size
+- **32×32** – small lists, compact displays, status rows
+
+### Readability rules
+- The primary shape must still be recognizable at **32–64 px**.
+- Small icons should not depend on tiny textural detail.
+- Major contrast zones should remain visible when scaled down.
+- If necessary, simplify a future icon rather than packing in more detail.
+
+---
+
+## 9. Category-Specific Guidelines
+
+## 9.1 Item icons
+
+Item icons should represent **physical objects from the world**.
+
+### Examples
+- weapons,
+- armor,
+- trophies,
+- bags,
+- hides,
+- insignias,
+- bottles,
+- crafting materials,
+- relic fragments.
+
+### Rules
+- show the item clearly,
+- use a close-up icon composition,
+- prefer one object or one bundle,
+- avoid unnecessary scene context,
+- preserve material realism,
+- show damage / rarity / corruption through form and material, not only through glow.
+
+### Good item-icon motifs
+- nicked blade,
+- stitched pouch,
+- scorched token,
+- bloodied hide,
+- cracked talisman,
+- iron lantern,
+- bone charm,
+- fang bundle.
+
+---
+
+## 9.2 Faction icons
+
+Faction icons should be **heraldic world emblems**, not abstract logos.
+
+### Rules
+- strong central symbolic identity,
+- distinct silhouette,
+- ornamental but readable,
+- suitable for reputation rows, map affiliations, and faction overview screens.
+
+Typical motifs:
+- tower,
+- gate,
+- shield,
+- skull,
+- moon,
+- candle,
+- sword,
+- wolf,
+- antlers,
+- banners,
+- chains,
+- medallions.
+
+---
+
+## 9.3 Skill / ability icons
+
+Skill icons can be more symbolic than item icons, but must still feel grounded.
+
+### Rules
+- focus on the action or effect,
+- use a strong readable symbol,
+- show the weapon, force, or defense style directly,
+- keep silhouettes clear,
+- allow slightly stronger dramatic lighting than regular items.
+
+### Examples
+- crossed blades for attack,
+- shield impact for shield bash,
+- braced shield for defend,
+- heavy axe arc for a strong strike,
+- potion flask for consumable use.
+
+### Avoid
+- abstract magical swirls without a readable core shape,
+- MOBA-style visual clutter,
+- generic “energy explosion” icons.
+
+---
+
+## 9.4 Status-effect icons
+
+Status icons must be extremely readable and compact.
+
+### Rules
+- one clear symbol,
+- high clarity at 32 px,
+- strong semantic color,
+- minimal detail compared with larger icon types.
+
+### Examples
+- drop + wound for bleeding,
+- green fang or skull mist for poison,
+- shield for block / defense,
+- cracked armor for armor break,
+- flame mark for burn,
+- chain or slow-foot motif for slow,
+- moon-eye or confusion symbol for fear or curse.
+
+---
+
+## 9.5 Enemy markers / danger markers
+
+These are functional UI icons and should communicate threat quickly.
+
+### Rules
+- clear symbolic meaning,
+- simple silhouette,
+- darker harsher visual language,
+- aggressive accenting for danger levels.
+
+### Good motifs
+- skull,
+- claw mark,
+- horned mark,
+- blood X,
+- burning eye,
+- rank badge,
+- elite crown or iron wreath.
+
+---
+
+## 9.6 Currency icons
+
+Currency icons must look valuable and distinct.
+
+### Rules
+- simple shape at first glance,
+- physical token logic,
+- strongly differentiated silhouettes and materials,
+- enough contrast to separate currencies immediately.
+
+### Example differentiation
+- silver coin,
+- blue soul crystal,
+- gold premium coin,
+- regional token,
+- seal fragment,
+- hunter mark.
+
+---
+
+## 9.7 UI utility icons
+
+These include interface-supporting icons such as:
+- map,
+- hunt,
+- inventory,
+- character,
+- shop,
+- mail,
+- settings,
+- group,
+- logout,
+- chat,
+- notifications.
+
+### Rules
+- slightly cleaner than item icons,
+- still consistent with the fantasy setting,
+- readable and restrained,
+- should fit within framed navigation elements without looking too ornate.
+
+### These icons may be:
+- simpler,
+- more symbolic,
+- less material-heavy than faction icons,
+- but must still avoid generic flat-app icon style.
+
+---
+
+## 10. Visual Hierarchy
+
+Not all icon categories should have the same complexity.
+
+### Recommended hierarchy
+
+#### Highest detail
+- faction icons
+- rare item icons
+- prestige icons
+- major currencies
+- important sigils
+
+#### Medium detail
+- regular item icons
+- skill icons
+- NPC role icons
+- map affiliation icons
+
+#### Lower detail
+- status icons
+- small utility icons
+- danger markers
+- tiny inline symbols
+
+This prevents small UI icons from becoming unreadable.
+
+---
+
+## 11. Consistency Rules
+
+When creating future icons, always compare against existing Ashen Realms assets.
+
+Every new icon should be checked for consistency in:
+- palette,
+- realism,
+- shape weight,
+- rendering quality,
+- mood,
+- material treatment,
+- level of ornament,
+- silhouette clarity.
+
+### Key rule
+New icons should look like they were made by the **same art direction**, even if the motif differs.
+
+---
+
+## 12. Prompting Guidance for Future Asset Generation
+
+When generating new icons with AI, prompts should be explicit.
+
+A good icon prompt should define:
+- category,
+- object / symbol,
+- mood,
+- materials,
+- color accents,
+- transparency,
+- readability,
+- style exclusions.
+
+### Prompt template
+
+```text
+Create a dark fantasy icon for Ashen Realms.
+Subject: [icon subject].
+Style: realistic, painterly-realistic dark fantasy, grounded medieval gothic RPG UI asset.
+Materials: [materials].
+Colors: [base palette + accent].
+Composition: centered, strong silhouette, readable at small size.
+Background: transparent.
+Keep it ornate but clean, suitable for a dark fantasy browser RPG UI.
+Do not make it cartoonish, anime, flat vector, pixel art, or mobile-game styled.
+```
+
+### Example
+
+```text
+Create a dark fantasy item icon for Ashen Realms.
+Subject: a scorched raider insignia token with warped iron and faint ember cracks.
+Style: realistic, grounded dark fantasy, painterly-realistic RPG icon.
+Materials: blackened iron, scorched bronze, ash residue.
+Colors: dark iron, ember orange, muted red cloth accent.
+Composition: centered close-up, strong silhouette, readable at small size.
+Background: transparent.
+Do not make it cartoonish, glossy mobile-game style, or flat vector.
+```
+
+---
+
+## 13. Naming and File Rules
+
+### Master naming convention
+Use clear asset names.
+
+Recommended pattern:
+
+`ashen-realms-[category]-[subject]-icon-v1.png`
+
+### Examples
+- `ashen-realms-item-charred-raider-insignia-icon-v1.png`
+- `ashen-realms-faction-graufurt-icon-v1.png`
+- `ashen-realms-status-bleeding-icon-v1.png`
+- `ashen-realms-skill-shield-bash-icon-v1.png`
+
+### Recommended master format
+- PNG
+- square
+- transparent background
+- 1024×1024 when possible
+
+---
+
+## 14. Optional Variant System
+
+Some icon families may later need multiple states.
+
+### Example state variants
+- normal,
+- damaged,
+- elite,
+- cursed,
+- blessed,
+- locked,
+- completed,
+- defeated,
+- active,
+- disabled.
+
+### Variant rule
+The **core silhouette and identity** must stay recognizable across variants.
+
+Example:
+- a normal faction emblem,
+- a hostile-stained version,
+- a trusted / gilded version,
+- a faded locked version.
+
+---
+
+## 15. Review Checklist
+
+Before accepting any future icon, verify all of the following:
+
+### Style fit
+- [ ] It looks like Ashen Realms.
+- [ ] It matches the dark fantasy browser RPG direction.
+- [ ] It does not look cartoonish, anime, or like a mobile game.
+
+### Readability
+- [ ] The silhouette is strong.
+- [ ] The icon is readable at 64 px.
+- [ ] The main subject is still understandable at 32 px if needed.
+
+### Rendering
+- [ ] Materials look believable.
+- [ ] Detail is present but not noisy.
+- [ ] Glow effects are controlled.
+
+### Color
+- [ ] Accent colors are restrained and meaningful.
+- [ ] The icon works against a dark UI background.
+
+### Delivery
+- [ ] The background is truly transparent.
+- [ ] The icon is centered and cleanly cut out.
+- [ ] No unwanted frame or background plate is baked in unless explicitly requested.
+
+### Category fit
+- [ ] The icon’s complexity suits its category.
+- [ ] It is distinct from existing icons.
+- [ ] It communicates the intended gameplay meaning clearly.
+
+---
+
+## 16. Short Version for Fast Reference
+
+If only a short instruction is needed, use this:
+
+> All future Ashen Realms icons must use a grounded dark-fantasy style with realistic materials, strong silhouettes, restrained colors, and clean transparency. They must remain readable at small UI sizes, avoid cartoon/mobile/vector aesthetics, and always look like they belong to the same visual family as the existing Ashen Realms screens, items, factions, and UI assets.
+
+---
+
+## 17. Final Principle
+
+When in doubt, prefer:
+- darker over brighter,
+- clearer over busier,
+- grounded over flashy,
+- material realism over abstract symbolism,
+- strong silhouette over tiny detail,
+- Ashen Realms consistency over novelty.
+
+A future icon should not merely look “good.”
+It should look like it could only belong to **Ashen Realms**.