01 / Problem
Create variety without losing consistency.
Game interfaces often need panels, bars, buttons, and containers that serve different content while still feeling like parts of the same world.
Components / Visual language / Extensibility
UI Frame & Component System
A visual-language study exploring how a cracked-stone frame and green energy treatment could support related panels, bars, buttons, and status elements.
- Focus
- Component styling, consistency, extensibility
- Format
- Static asset study
- Status
- Concept
The design at a glance
One visual rule, several interface shapes.
Cracked stone, dark surfaces, green light, and consistent edge treatment create a recognizable family across a large frame and smaller horizontal pieces.
The checkerboard is visible in the supplied image. This study is presented as a styling exploration, not a production-ready transparent component library.
02 / Design intent
Use a small set of visual rules.
The stone silhouette provides structure and weight; the green glow communicates energy, emphasis, or a possible active state.
03 / Key decisions
Repeat materials and edge language.
- Angular damage marks create a shared silhouette vocabulary.
- Dark centers reserve space for future content.
- Green illumination creates hierarchy within neutral stone.
- Multiple proportions explore reuse across interface roles.
04 / Interaction & usability
Separate decoration from state.
A production system should define when glow means active, selected, charged, or simply decorative, then maintain readable content and focus indication over every component.
05 / Tools & skills
What this demonstrates
Component styling, game UI art direction, shape language, hierarchy, consistency, visual states, and thinking about reusable interface families.
06 / What I’d improve next
Turn the sheet into a working kit.
- Prepare clean transparent exports.
- Define nine-slice regions for resizing.
- Add default, hover, focus, pressed, disabled, and error states.
- Test real text, icons, values, and contrast at target sizes.
From visual asset to system
The next step is to document tokens, spacing, state meaning, content limits, and implementation behavior so the visual language can support a larger product consistently.