Digital Walls — Visual Design System v1.1

Status: Art direction approved; early sprite calibration completed; production technical measurements and interactions provisional pending in-app validation. Purpose: One source of truth for generating, reviewing, and integrating backgrounds, window views, sprites, and dynamic objects.

1. Product and visual vision

Digital Walls is a customizable, personal digital environment where people arrange artwork, quotes, music objects and memories on a wall. It should feel bright, welcoming, expressive and thoughtfully abstracted—not like a highly detailed game screenshot, a sterile productivity dashboard, or a rustic room decorator.

North star: *Atmosphere without competition.* The environment gives the wall personality, but the user’s objects remain the focus.

Approved direction

• Quasi-12-bit is an art-direction shorthand, not a literal bit-depth export requirement. Target an appealing midpoint between coarse 8-bit pixel art and dense 16-bit-inspired illustration.
• Flat / straight-on front-facing view for walls and mounted sprites, with only restrained material thickness and shallow depth where needed.
• Defined silhouettes, deliberate blocky pixel clusters, and simplified forms; never photorealistic or painterly rendering.
• Selective, low-contrast texture; no micro-noise, excessive dithering, detailed brickwork, or elaborate reflections.
• Bright, neutral-warm high-noon / skylit default, with walls evenly illuminated. Blue belongs primarily to sky or occasional accents, not a pervasive blue cast.
• Sophisticated but fun: balance wood with chrome, aluminum, ceramics, paper, translucent plastics, charcoal electronics, graphic forms, and restrained neon.
• Primary objects look physically mounted; digital features may animate or update within physical-looking housings. Physical form, digital behavior.

Avoid

• Photorealism, smooth 3D renders, heavy painterly texture, dense 16-bit detail, excessive shadow contrast, orange sunset as the default, blue-tinted walls, dark moody environments, overwhelming foliage, uniformly wooden objects, ubiquitous neon, heavy pure-black outlines, isometric/three-quarter room perspective.

2. Visual hierarchy

1. Primary: user-placed artworks, quotes, devices and objects. 2. Secondary: window, architecture and time-of-day lighting. 3. Supporting: wall grain, floor grain, trim, and other ambient detail.

Initial target: Keep roughly two-thirds of the *usable wall area* visually calm before users decorate. This is a composition heuristic, not a universal pixel quota. Assess empty, lightly decorated and collected wall states.

3. Shape, perspective, pixel treatment

• Walls and wall-attached objects are viewed front-on; use aligned verticals and horizontals. Avoid vanishing-point-heavy walls and diagonal furniture views.
• Prefer 2–5 well-chosen tonal regions for a small material surface; a few additional accents are acceptable for focal hardware or displays. This is a design guideline, not a hard palette limit.
• Pixel clusters must be intentional and legible at typical in-app viewing size; do not add high-frequency noise to simulate detail.
• Use near-neighbor or pixel-conscious resizing for genuine pixel sprites; verify at 1× and mobile sizes. Do not indiscriminately apply `image-rendering: pixelated` to high-resolution illustrative assets if it damages their appearance.
• Outline treatment: colored darkened edge hues, moderate contrast, consistent perceived weight. Avoid harsh black contouring on every object.
• Material identity should emerge from shape, a few large highlights and shadow blocks, not tiny repeated patterns.
• Environment/sprite abstraction parity: backgrounds must use the same perceived pixel scale and simplification as foreground objects. Reject architectural illustrations with fine brick joints, realistic surface grain, complex reflections or perspective-heavy furniture even when the standalone room looks attractive. Enforce larger coherent pixel clusters, simple window/ceiling geometry and reduced architectural microdetail.
• Over-detail regression test: compare any new scene against the approved simplified three-room validation, not the earlier highly rendered three-room example. When uncertain, simplify the environment before reducing the readability of functional sprites.

4. Lighting and color

Shared lighting rules

• Day default: clear high noon, soft neutral-warm ambient fill, wall evenly lit; clean daylight sky. The light may cast a gentle directional patch but must not obscure mounted artwork.
• Objects have subtle, consistent contact shadows appropriate to their mounting thickness. Prevent double-shadowing when sprites and the wall lighting are composited.
• Night: dimmer ambient environment; illuminated lamps, signs and electronics gain presence. Keep wall art readable.
• Separate emissive core from optional outer glow where technically feasible so intensity can respond to time of day.

Curated palette model

Do not constrain the whole product to one palette. Define curated directions, then selectable finishes/material colors within each direction:

• Sunlit: warm ivory, oak, muted terracotta, sage; blue sky outside.
• Coastal: pale mineral/sea-glass neutrals, pale woods, blue-gray and sandy accents.
• Earthy: warm stone, olive, soft rust, walnut accents.
• City Modern: pale warm-gray, charcoal, dusty blue/slate, restrained warm accent.

Shared rules: preserve luminosity/contrast so sprites remain readable; avoid blanket recoloring. Artwork content, electronics displays, hardware and emissive light should preserve intentional colors. A lamp may ship with curated finish variants (white, silver, brass, terracotta, sage, charcoal). Specific HEX values are not locked.

5. Environment archetypes

Each environment is a coherent *room*, not the same room with a different wall texture. Retain the shared art language while allowing architecture to vary.

All three: high-noon neutral lighting, sufficient clear wall space, simplified geometry and manageable detail. Do not bake movable decor (frames, plants, electronics, shelves, quotes, etc.) into the production backgrounds.

Background layer model (conceptual)

1. Swappable window view behind a clipped opening. 2. Base architecture (wall, floor, ceiling and opaque window structure). 3. Optional architectural overlays and ambient light/shadow. 4. Placed sprites and their contact shadows; maintain mounting and occlusion rules. 5. Optional emissive/glow/effect overlays, UI overlays and user interactions.

Actual z-order may require splitting architecture foreground/window masks around sprites; use a tested compositing scheme rather than assuming a single fixed layer order.

6. Sprite families

• Frames and quotes: wood/metal frames, replaceable content area, editable quote text, pre-defined content mask.
• Audio and electronics: silver/charcoal wall CD player, stereo, cassette player, turntable, speakers, camera, headphones, music widget. Mixed eras welcome.
• Lighting and neon: wall sconce, chrome lamp, ceramic lamp, small cat/moon/bolt/neon text. Neon is an accent, not the room's primary aesthetic.
• Structures/decor: wood and wire shelves, pinboard, hook strip, mirrors, calendars, books, ceramics, skateboard, geometric objects, a small number of plants.
• Digital-enhanced: animated CD rotation, softly pulsing neon, changing frame artwork, updating quote or music/weather panel.
• Functional storage and work-in-progress objects (new): wall-mounted three-pocket folder/organizer for active notes, sketches and projects; compact three-drawer filing cabinet for archived ideas and collections. These represent user-owned content, not merely decorative imagery.

Functional storage interaction contract (proposed)

• The wall organizer attaches to a wall plane and exposes individually selectable pockets; clicking a pocket opens its notes/ideas without accidentally initiating drag.
• The filing cabinet belongs on a floor or supported furniture surface; each drawer may open a distinct collection. Do not visually float the cabinet on a wall.
• Store notes, drafts, project IDs and folder membership as persistent structured application data, not text baked into the image. Displayed papers, labels, counts and open/closed states can be composed as separate layers.
• Define distinct edit/drag affordances, keyboard and mobile touch targets, and closed/open/selected states. The exact storage data model and interactions remain to be validated with the editor.

Representative eight-asset calibration set

1. Wooden framed artwork (image replacement) 2. Quote plaque (live editable text) 3. Silver wall CD player (metal, circular disc, optional motion) 4. Chrome wall sconce (metal + light) 5. Metal wire shelf (thin structural details) 6. Blue neon moon (glow separable from unlit body) 7. Ceramic object (soft curved material) 8. Music widget/display (dynamic content)

Expanded functional roadmap (not part of the original eight-sprite benchmark): 9. Three-pocket wall organizer; 10. Three-drawer filing cabinet. Both have approved concept directions but still need individual technical and interaction validation.

7. Technical asset contract — provisional

Use this as the implementation starting point; validate with Cursor against actual editor coordinates and canvas behavior before committing to fixed values.

Proposed anchor examples (not yet measured): wall CD player = top-center mounting anchor; wall neon = top-center or custom hardware anchor; shelf = back-edge/wall mount line; floor planter = bottom-center floor anchor; table lamp = bottom-center surface anchor. Mounting point may differ from drag handle or placement origin.

Important: Do not treat AI-generated checkerboard patterns or a sprite-sheet mockup as proof of alpha transparency. Validate image alpha bytes and inspect against contrasting wall colors. Do not crop assets from a composite concept board if it degrades edges, lighting, or consistency. Some early calibration sprites are concept-sheet-derived and must not be mistaken for individually generated, production-validated source assets.

Production asset maturity and evidence

A generated presentation board or in-scene mockup is not itself proof that its pictured sprites are individual export-ready transparent files. Progress must be tracked per asset, not inferred from a pack title.

8. Quality assurance checklist

Art direction

• [ ] Clearly quasi-12-bit at target display size, not pixel-perfect caricature or detailed 3D/painterly illustration
• [ ] Front-facing / compatible perspective and stable silhouette
• [ ] Colored, consistent outline weight; selective texture
• [ ] Daylight neutral-warm and not too blue/orange
• [ ] Materials visually distinct without microdetail
• [ ] Sprite reads on plaster, white brick and light concrete
• [ ] Physical mounting looks plausible; glow is restrained at noon

Technical

• [ ] Actual RGBA transparency with clean edges and no halo
• [ ] One independent item per export and correct logical bounds
• [ ] Anchors and scale metadata validated in editor
• [ ] No inappropriate baked wall / floor / other objects
• [ ] Correct behavior of swappable content and any animation state
• [ ] Contrast, scale and touch target checked on desktop and phone
• [ ] Layering, persistence and saved-board reload tested
• [ ] Readable at 100%, 50%, and 25% reference display scale; mobile tap targets independently usable
• [ ] Storage objects distinguish opening a compartment from dragging the object; notes and edits persist as data
• [ ] Each asset recorded as concept approved, prototype exported or production validated, with evidence

Stress test

Place the *same* calibrated set in all three environments under (a) bright day and (b) night. Test an empty wall, a curated ~7-object composition and a collected 12+-object composition, then confirm mobile legibility.

9. Reusable generation brief

> Generate a single independent asset for Digital Walls, a bright, customizable abstract pixel-art wall environment. Use our quasi-12-bit-inspired style: flat, straight-on view, clear geometric silhouette, intentional medium-size pixel clusters, subtle colored outlines, 2–5 broad tonal regions per material surface, very selective texture, sophisticated playful design, and consistent neutral-warm high-noon lighting. Do not make it photorealistic, isometric, painterly, over-detailed, excessively wooden or blue-tinted. Produce only [ASSET] in [MATERIAL/FINISH], in its [STATE] form. Keep mounting and shadow physically plausible, no environment or extra objects, with genuine transparent background and clean alpha edges. Preserve original color of displays and light effects; for emissive objects keep glow modest and preferably separable. Show the asset ready for placement on plaster, white brick and warm concrete.

Environment generation addendum

> Generate one full coherent Digital Walls [ROOM ARCHETYPE] with appropriate window/floor/ceiling/wall design, no movable decor embedded, a broad quiet wall area, bright skylit noon atmosphere, flat composition, restrained architecture and quasi-12-bit abstraction. Separate the swappable scenery, base room, and lighting layers wherever the workflow supports editable asset exports.

10. Acceptance gates and next actions

Gate A: Style. Compare approved reference art versus a proposed sprite and reject if visibly over-detailed or cast too blue/orange. Gate B: Technical. Verify alpha, anchoring, scaling and layering using two upgraded samples (silver CD player and blue neon moon). Gate C: Portability. Use *exact same sprite files* on Apartment, Loft and Gallery scenes; do not quietly regenerate them for each environment. Gate D: Production. Finalize eight benchmark assets and metadata, then scale the catalog by object family. Gate E: Interaction. Verify clickable/editable zones (frames, quotes, music widget, folder pockets and cabinet drawers) separately from repositioning, including mobile and keyboard input.

Next implementation handoff to Cursor: Set up asset registry/schema, layered renderer, normalized coordinate model, responsive fit behavior, upload/swap masks, light states and asset QA harness using actual files—not a flattened concept sheet. Include storage-object state and persistent content models, mounting-category rules (wall/surface/floor), separate glow/effect layers where available and interaction hit regions.

--- Version note: v1.1 is a targeted update to v1.0. Existing visual principles are retained; additions cover abstraction parity, work-in-progress storage objects, object behaviors, prototype maturity, and responsive QA. Pixel dimensions, HEX palette values, responsive display sizing and shadow settings are intentionally not yet frozen.

v1.1 change log (relative to v1.0)

1. Strengthened environmental pixel-density/abstraction guardrails after the over-detailed room regression. 2. Added three-pocket wall organizer and three-drawer filing cabinet as functional storage categories and future benchmark candidates. 3. Documented precise placement and editable-content principles, including separation of UI interaction regions from drag handles. 4. Added transparent-asset provenance and maturity tracking to distinguish reference art from prototypes and validated production files. 5. Added 100/50/25% scale checks and explicit desktop/mobile interaction QA.

All original sections 1–10 remain in place; this is not a rewritten or reimagined design system.