ashen-realms/docs/Ashen_Realms_Icon_Design_Guidelines.md

# 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**.