t1k:designer:ux:visual
| Field | Value |
|---|---|
| Module | ux |
| Version | 1.7.2 |
| Effort | high |
| Tools | — |
Keywords: aesthetics, art direction, design, visual design
How to invoke
Section titled “How to invoke”/t1k:designer:ux:visualGame Visual Design
Section titled “Game Visual Design”When This Skill Triggers
Section titled “When This Skill Triggers”- Designing color palette for teams, elements, or rarity tiers
- Setting typography hierarchy for game menus or screens
- Designing shop, inventory, character select, settings, or lobby screens
- Defining icon style for abilities, stats, or currencies
- Choosing card/panel design for game items or upgrades
- Establishing dark/light theme or contrast rules for game UI
- Creating consistent spacing system for game menus
Core Principles
Section titled “Core Principles”Color Must Carry Meaning
Section titled “Color Must Carry Meaning”- Every color in game UI is semantic — signals rarity, element, team, or state
- Never use a color for decoration alone; max 6 core palette colors + tints/shades
- Test palette under TV/mobile contrast before shipping
Hierarchy Before Beauty
Section titled “Hierarchy Before Beauty”- Visual weight = size × contrast × motion; use all three deliberately
- One dominant element per screen; everything else supports or recedes
- Players scan game screens F-pattern: title → key art → primary CTA → secondary info
Color Palette Strategies
Section titled “Color Palette Strategies”Rarity Tier System (Common→Legendary)
Section titled “Rarity Tier System (Common→Legendary)”| Tier | Color | Glow | Border |
|---|---|---|---|
| Common | #9E9E9E gray | None | Flat |
| Uncommon | #4CAF50 green | Soft | Thin |
| Rare | #2196F3 blue | Medium | Standard |
| Epic | #9C27B0 purple | Animated pulse | Thick |
| Legendary | #FF9800 gold | Animated flame | Ornate |
- Never use red for rarity — red = danger/damage only
- Colorblind-safe: all tiers must be distinguishable by brightness alone
Element / Type Palette
Section titled “Element / Type Palette”- One hue per element (fire=red-orange, ice=cyan, nature=green, dark=deep-purple)
- Hue for background tint; icon foreground white/near-white for contrast
- Saturation cap: 70% — high saturation fatigues in long sessions
Team / Faction Colors
Section titled “Team / Faction Colors”- Primary + 20% lighter tint (highlights) + 20% darker shade (borders)
- Team colors: 3:1 contrast against each other when adjacent
Typography Hierarchy
Section titled “Typography Hierarchy”Scale for 1080p; adjust for mobile (→ game-ux-design).
| Role | Size | Weight | Case |
|---|---|---|---|
| Screen Title | 48–64px | Bold | UPPER |
| Section Header | 28–36px | SemiBold | Title |
| Item Name | 20–24px | SemiBold | Title |
| Body / Desc | 16–18px | Regular | Sentence |
| Caption / Label | 12–14px | Regular | UPPER |
| Numeric (stat) | 24–32px | Bold | — |
- Max 2 typefaces: one display (titles) + one body (everything else)
- Display font: personality-driven (serif=fantasy, mono=sci-fi, rounded=casual)
- Numeric stats: tabular-nums — prevents layout shift on value updates
- Never use font size alone to encode importance — pair with weight and color
Mobile Game Typography (CanvasScaler 1080×1920)
Section titled “Mobile Game Typography (CanvasScaler 1080×1920)”For portrait-locked mobile games with matchWidthOrHeight = 0.5f:
| Category | Size Range | Example |
|---|---|---|
| Screen title | 32–40 | ”INVENTORY”, “SHOP” |
| Section header | 28–32 | ”Stats”, “Equipment” |
| Body text | 22–28 | Stat values, descriptions |
| Button label | 24–32 | ”FIGHT!”, “RESTART” |
| Secondary | 16–20 | HP labels, shield text |
| Caption | 14–18 | Grid counters, progress bar |
→ Full tier table + container height formula: game-ux-design references/mobile-font-sizing-guide.md
Text on panels gotcha: Use color = Color.white with no shadow for ≥0.85 alpha dark panel backgrounds. For semi-transparent panels (alpha < 0.7), add TMP outline (width 0.2) or underlay shadow to keep text legible.
Icon Design Guidelines
Section titled “Icon Design Guidelines”- Ability icons: 64×64px min; readable as 32×32 thumbnail
- Stat icons: 24×24px; 2px stroke weight; no filled-vs-outline mixing
- Currency icons: visually distinct from stat icons; coin/gem/crystal shapes
- State indicators: 16×16px min; shape + color (never color alone)
- All icons use same style (flat, outlined, or painted) — never mix in one game
Dark vs Light Theme
Section titled “Dark vs Light Theme”Games default to dark theme:
- Dark reduces eye strain; makes rarity glows pop
- Use off-black (#1A1A2E), never pure #000000
If light theme needed:
- Keep rarity colors identical — never remap them
- Increase icon stroke weight by 1px; re-test all contrast ratios
Contrast & Readability
Section titled “Contrast & Readability”- Text on panels: min 4.5:1 (WCAG AA); prefer 7:1 for body text
- Stat numbers on art: bold +
text-shadow: 0 1px 3px rgba(0,0,0,0.8) - Never place text on busy art without scrim or pill background
- Glow: decorative only — never the sole state indicator
Anti-Patterns
Section titled “Anti-Patterns”| # | Anti-Pattern | Fix |
|---|---|---|
| 1 | Rarity colors used for other purposes | Reserve tier colors exclusively for rarity |
| 2 | 3+ typefaces | Max 2 fonts: display + body |
| 3 | Text over hero art without scrim | Add dark gradient or pill behind text |
| 4 | Inconsistent icon style (flat+outlined mixed) | Define 1 icon style guide at project start |
| 5 | Pure black background | Use off-black #1A1A2E |
| 6 | Color-only stat differentiation | Add icon + label alongside color |
Cross-References
Section titled “Cross-References”game-ux-design— HUD layout, mobile touch zones, onboarding, accessibilitygame-ui-wireframe— layout planning, screen templates (use visual-design to style wireframes)game-ui-animation— transition/animation patterns (use visual-design for color/style choices)- UI framework implementation skills (auto-activated via registry) — Canvas/panel implementation
- engine mobile UI skills (auto-activated via registry) — mobile touch, safe area, gesture handling
rpg-game-design— Stat/rarity naming conventions for RPG systems
Reference Files
Section titled “Reference Files”| File | Coverage |
|---|---|
references/screen-patterns.md | Shop, inventory, character select, settings, lobby layouts; card anatomy; panel depth; spacing system |
references/mobile-font-sizing-guide.md | Mobile font size table; cross-reference to game-ux-design for full tier table and container height formula |
Gotchas
Section titled “Gotchas”- Rarity tiers need contrast across colorblind palettes — green/red rarity systems fail for ~8% of players; use luminance + shape, not hue.
- Card/panel patterns must survive 1px scale changes — hairline strokes fail on different DPIs.
- Typography scale needs a max line-length cap — flowing UI text past 60ch on a tablet shop screen reads like a wall.