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

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

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.