# DESIGN.md · Interface In Game (GP-006)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Game UI Reference · Category: K. Gaming and Pixel Art
- Platforms: Web
- Color theme: Monochrome dark · Layout pattern: Centered hero · Mood: Cinematic, editorial
- License / terms: Reference site run by volunteers; footer: ‘Video games, pictures, all trademarks, and registered trademarks are the property of their respective owners.’ Study and link only

Volunteer-run collection of game interface screenshots and clips grouped by game and genre, with designer interviews and a free wireframe-mockup resource.

### Analysis (ours)
Our capture of Interface In Game: a full-bleed key-art hero for one featured game, a dark page, genre chips with counts and rows of recently added games and interviews. It browses by game rather than by UI element. Strength: complete per-game screen sets and designer interviews. Risk: fewer filters than the Game UI Database, and the content belongs to the game publishers.

### Best practices (ours)
- Browse a whole game’s screen set to understand its UI system (menus, HUD, inventory) rather than a single screen (OURS).
- Read the designer interviews for the reasoning behind decisions (OFFICIAL content on https://interfaceingame.com/).
- Treat all images as references; the footer states games, pictures and trademarks belong to their owners (OFFICIAL, https://interfaceingame.com/about/).

### Deep analysis
Values marked OFFICIAL come from the cited official page, README, licence file or package metadata, fetched 2026-10-24 (UTC+8). ESTIMATED values were measured by us that day (CSS file sizes from unpkg, class and colour counts, contrast ratios). OURS is our interpretation, not legal advice.

#### What it is (OFFICIAL) · source: https://interfaceingame.com/about/
- ‘A free project developed by a dedicated team of passionate volunteers gamers’ collecting video-game interfaces, screenshots and clips.
- Footer: ‘Video games, pictures, all trademarks, and registered trademarks are the property of their respective owners.’

#### Content (OFFICIAL) · source: https://interfaceingame.com/
- Genre index with counts on 2026-10-24 (e.g. Action 251 games, RPG 54, Platformer 45, Indie 86), designer interviews and a ‘60+ Wireframe Mockup PSD’ resource.

#### Pitfalls and lessons (OURS) · source: https://interfaceingame.com/
- Mostly modern 3D games; for pixel references combine it with the Game UI Database ‘Pixel’ filter.
- Reference only; nothing is offered under a reuse licence.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Study only
- Attribution: Link the site
- Redistribution: No: images and trademarks belong to their owners
- How you get it: Website (free, volunteer-run)

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#000000` ~25%
- `#2F1713` ~11%
- `#FDFEFE` ~7%
- `#5F433D` ~7%
- `#26333A` ~6%
- `#979F9E` ~5%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Full-bleed hero
- Genre filter chips with counts
- Game card rows
- Article / interview cards

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).

## Usage
```
Open interfaceingame.com → Games or Screenshots → pick a genre; use Articles for designer interviews.
```

## Do’s and don’ts
- Do: Use a near-black canvas with high-contrast white text and at most one accent.
- Don’t: Don’t add multiple saturated accents or light-mode shadows.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://interfaceingame.com/
- Library entry: https://design-library-byt.pages.dev/entry/GP-006