Context
Who: players in portrait chat moments and landscape play sessions — the game is used mostly landscape, with menus that fill the wide frame. Jobs: explore and read quests, manage weapons, chase achievements, pull and share gacha results, inspect characters. Constraints: bright outdoor scenes with white text over them, dark menu panels for long sessions, and two languages that must both fit without truncation.
Principles
| Rule | Rationale |
|---|---|
| The world is bright; the menus are dark | Scenery and gameplay stay colorful; long-reading and inventory surfaces switch to dark panels for focus and for the art to read against. |
| Rarity is frame + stars + label | Color is the first signal, never the only one; grayscale keeps the same information through borders and star counts. |
| Text over scenery needs a scrim or a shadow | White dialogue over a bright field is measured against its worst-case backdrop, not a flat color. |
| EN and JP are both first-class | The same screen ships in both languages; buttons, quests, and item names are checked for fit and line height in each. |
| Reveals are anticipation, not a toll gate | Summons can be replayed and skipped; nothing blocks the player from the result. |
World screen
The main screen: bright scenery with a full HUD. Toggle the language above — every UI string below switches between English and Japanese.
Character screen
Attributes in the left rail, the character in the center, stats and lore on the right. The dark teal wash is the character's element, not a theme.
A traveler from another world whose only kin was taken away, forcing them to embark on a journey to find The Seven.
Inventory
The dark panel is the point: item art and rarity frames need a controlled background. Rarity shows as border, stars, and label; “New” is a badge, not a color.
Precise · Increases DMG against weak spots by 24%.
Achievements
Achievements are a dark gallery: gold frames, one emblem, one name, one number. A red dot is the only alert, and it also appears as a count in the header.
Summon results
Ten cards, one row, landscape: rarity is the frame and the stars; every card can be reviewed before dismissing. The reveal is replayable and skippable.
EN / JP
The same components in both languages. Japanese uses a taller line height and looser tracking; English must fit the same widths without clipping either string.
Quest tracker
JP line height 1.9 · EN 1.7 · both wrap inside the same 34% width.
Dialogue
Speaker in the display face; line in the text face. No italic — JP does not use it for emphasis.
Inventory header
Counts stay tabular and localized; the same row height fits both scripts.
Buttons
Minimum width is set by the longest of the two languages, not by the English string.
Typography
Three registers, each with a JP-capable stack. This page obeys them: headings display, controls UI, prose text.
Color
Two environments share one palette: bright world hues for scenery and world HUD, dark panel neutrals for menus, and a rarity scale that carries meaning in both.
Components and states
Actions
Rarity frames
Border color + brightness + the written star count; grayscale keeps all three.
Item states
Badges and alerts
Motion and accessibility
Motion budget
- Summon reveal staggers 60 ms per card and finishes under a second; the replay button re-runs it and nothing is gated.
- Clouds drift slowly in the world screen; menus do not animate at all.
- Reduce motion stops the drift, the reveal stagger, and any idle loops.
Accessibility
- Rarity and alerts use frame, stars, and written labels, never hue alone; grayscale proof is built in.
- White text over scenery is measured against the scrim's worst case, with a shadow only as a secondary aid.
- Touch targets stay at least 44 px in this landscape layout; the action cluster sits in the lower-right thumb arc.
- EN and JP both fit their containers; line heights and tracking are per-locale tokens.
Verification
Live probes
| Pair | ratio | Note |
|---|
World HUD text is measured against the panel scrim; menu text against the dark panel. Rarity accents are supplemented by frame and stars.