Role
Designer
Industry
Gaming
Duration
3 Weeks
Client
Capstone Project
Year
2023
Designing a UI system for a mobile horror game inspired by H. P. Lovecraft requires an approach that goes far beyond conventional app design. For R'lyeh: The Shadows of Cthulhu, the challenge was to develop a visual language that could convey cosmic dread, ancient mystery and psychological tension while remaining functional, intuitive and immersive across all screen states.
Concept & Vision
The central design principle was to treat atmosphere as a function. Every typographic choice, colour decision and spacing rule had to serve two masters simultaneously: the narrative universe of Lovecraft and the practical needs of a mobile game interface. The design system had to appear both ancient and digital — as if the interface itself had been discovered rather than designed.
Users
Players who are passionate about horror fiction, mystery and Lovecraftian mythology; people accustomed to high-quality mobile experiences who are looking for intense stories that are accessible anywhere.
Motivations: they want to explore dark worlds, discover secrets and experience strong emotions in a short format that is always available.
Digital habits: they play on mobile devices while travelling, during breaks or in the evening; they are sensitive to well-designed UIs, visual atmosphere and immersive audio.
Visual Language & Typography
The typographic system combines two carefully selected typefaces. Soprani, a variable serif inspired by a 1920s New Zealand plaque, is used for display and headlines — its dramatically flared serifs and shimmering optical effect evoke the era in which Lovecraft wrote, while remaining unmistakably contemporary. Cronos Pro is used for body text and UI elements, bringing calligraphic warmth and legibility to smaller sizes while maintaining the period atmosphere. Together, they create a voice that whispers rather than shouts.
Colours and gradients
The palette is built around two dominant hues, chosen for their symbolic and emotional resonance. The first is an aristocratic purple, which evokes the ancient and elite nature of the cosmic entities that the player encounters. The second is a dangerous and murky green, inspired by the remote and threatening landscapes of Lovecraftian fiction. These primary colours expand into a full gradient system, ranging from deep secondary tones to delicate tints, alongside a complete semantic layer for error, warning, success, information and disabled states. The result is a colour system that is both narratively coherent and technically comprehensive.
Grid, spacing and components
The layout system is built on three responsive grids — 12 columns for desktop, eight for tablets and four for smartphones — with consistent spacing based on multiples of eight dp. Every component in the system, including buttons, text fields and progress bars, follows this logic to ensure visual harmony across screen sizes and interaction states. The icon set is designed on a 16×16 grid and prioritises simplicity and readability — forms are stripped down to their essential gestures and remain legible even at the smallest touch target.
Wireframes and user flow
The interface was developed from hand-sketched wireframes to full digital flows. The onboarding sequence, account creation, campaign selection, tutorial and core gameplay screens were mapped in complete UI wireframes before any visual styling was applied, ensuring the navigation logic was sound before the atmosphere was layered on top. The player moves between two temporal environments — 2024 and the mid-20th century — and the interface subtly changes style between them.
Outcome: The R'lyeh design system is a comprehensive, documented visual framework covering typography, colour, grids, spacing, icons, buttons, selections, cards and wireframes. It is designed to sustain a narrative world throughout the entire mobile experience. It demonstrates that a UI system can be as much an act of world-building as it is an act of design.
