THE
RESIDENTS
Tiny procedural beings who keep the town running.
Monochrome by default. Color when selected, active, or interacting.
Color is attention. A resident lights up when you select it, when it speaks, when it acts, or when something happens to it.
→
01 The state system monochrome by default, color on attention.
Attention triggers
- Selected by the user
- Speaking, or being spoken to
- Performing an action
- Involved in an event
- Carrying new information
Return to passive
2–5 seconds after the trigger ends. Configurable. The world is calm by default — color is for moments, not background.
02 The founding cast twenty residents · each one does one job.
03 Anatomy & construction built from modular layers.
Style overview
Hand-drawn ink & paper. Closed shapes, soft outlines, slight wobble. Tiny, readable, full of subtle character. Big head, small body for readability.
cute first, geometric never.
Line weight
Stacking order
Back to front, every resident is the same:
- Shadow (soft oval, slight offset)
- Legs
- Torso
- Arms
- Props (left & right)
- Head
- Hat / hair
all parts are swappable.
Proportions
Simple rounded geometry: 45% head, 30% torso, 25% legs. Big eyes, small mouths. Closed shapes only — never an open path. Corners are always rounded.
head 45% · torso 30% · legs 25%
silhouette must read at 32px.
04 Palette & texture warm, muted, never loud.
Palette — for the color state
Warm, muted, desaturated tones. Used for clothing, hats, and props — never for skin (skin stays in the warm beige range).
SKIN · #e6c7a3 warm beige only
Texture
Paper grain and tiny ink specks live on the page, not on the sprite. The character art has light hatching for shadow only — never decorative. Soft edges, no harsh lines.
specks belong to the paper.
Readability rules
- Silhouette must be clear at 32px
- One accent color per resident
- Details stay large and bold
- Test at every zoom level
05 Implementation the engine consumes art. it does not draw it.
Asset structure
assets/residents/
<id>/
passive/ front · back · left · right
active/ walk-a · walk-b · speaking · sleeping
Every resident has the same eight poses in both passive and active states. The engine swaps states by swapping asset files.
Engine rules
- Renders PNG sprites only
- Never draws characters from primitives
- Selection swaps passive → active art
- Missing asset = placeholder, not substitute
- Pivot is feet-center
- Nearest-neighbor scaling for small sizes
What lives in code
Placement on the world map. State (passive / active / selected / alert). Pose (front / walk / speak / sleep). Idle bob and prop sway. Path overlays. Speech bubble offset (top-right).
art is fixed. behavior is alive.
06 The approved guide source of truth.
