Architecture and interiors

Structure

1. Volumes first, texture last. Box → roof slightly larger than the body → doors and windows (with depth) → base light and shadow → textures. In flat colour the building must already read; shade after.
2. One view, one roof pitch. In 3/4 front view draw the facade straight on, cut the wall height to about half, put a roof band on top at 1:1 or 2:1. Consistency beats realism: use the same pitch on every building. In top-down houses bend a few lines for a hint of perspective, then straighten the silhouette with a stone base course.
3. Respect the grid. Building sizes are multiples of 16 × 16 cells. The foundation stays inside its cells; only the top may exceed them by a few px. Never break the bottom or the sides: that is where layer order breaks.
4. Give it a base and a life. A tall building needs a plinth, steps or flared foot; add two or three functional props (chimney smoke, sign, vent, laundry) so it looks inhabited. Slight asymmetry and sag read as age and weight.

Brick and stone

5. Brick sizes must divide the tile. With 1 px mortar the pitch (brick + mortar) must divide 16: bricks 7, 3 or 1 px, pitch 8, 4, 2. Default at 16 px: 7 × 3 bricks, pitch 8 × 4, alternate courses shifted by half a pitch (4 px). Other sizes leave a half-brick at the wrap.
6. Mortar first, then bricks, then light, then damage. Mortar lines make the tile wrap; bricks that leave one edge must continue on the opposite edge. Dark mortar vs light mortar changes the whole feel.
7. Imply, do not outline every brick. Top row of each brick lit, face mid, mortar dark; alternate two face tones; make 2–4 bricks chipped, protruding (keep highlight) or sunk (lose it). A perfectly regular grid looks plastic.
8. Top faces are brighter than side faces, and on a vertical face the visible brick is shorter than on a top face. Use columns or pillars as universal corner pieces instead of four custom corners.
9. Every heavily used wall tile gets a crack or stain variant that changes only its centre (rules://66-tiles-and-autotiling). Cracks are short and branch, not exaggerated; mossy and window-with-figure variants break the repetition cheaply.

Openings

10. Door: stone frame, lit lintel, shadow row under the lintel, planks 2 px wide with a 1 px dark gap, iron straps, brass handle, a step. The opening is at least ¾ of the tallest character's height (derived: 24 px opening beside a 32 px sprite in arch-door-16x32). Doors carry weight: a path leads to one.
11. Window: 1 px frame, panes, mullion 2 px at 16 px (1 px at 32, none at 8), sill 1 px wider than the frame on each side, shadow row under the sill. Glass is the darkest value on the wall by day; a 2-px diagonal glint on two of four panes sells it. Never draw a window as a black hole.
12. Lit windows (night): warm saturated glass, one L-shaped light patch per pane (not concentric squares), a dark silhouette in one pane. Lit window edges stay crisp, everything else loses contrast.
13. Placement: a front is window | door | window, door centred, 3 tiles wide (48 × 16). Vary length, door position and window type to get many buildings from few tiles.

Roofs

14. A roof is a mostly flat plane with a two-colour texture, not a gradient. Shingles: courses offset by half a shingle, light top row, shade bottom row, dark rounded corners, a few worn shingles in a second tone. Overhang 1 px per side and a 2-row eave shadow on the wall below it.
15. Roof colour is the accent: saturated against desaturated stone; a dot for a chimney, smoke above it.

Interiors and distance

16. Room anatomy: floor tile, wall tile, baseboard strip between them, no empty pixels so it tiles. Wall height is the same in every room (2–3 tiles, furniture height included); furniture stands in front of the wall, not on it; one wall style per building.
17. Interior values: walls low in saturation and temperature, foreground furniture saturated and contrasty, posters and paintings low contrast and 2–3 colours, hue variation on walls without a large jump. Dither only for fabric and keyboards.
18. Plausible rooms: footprint roughly matches the exterior; stairs need clear floor beyond and must not run into an outer wall; a room has a purpose (shop = counter + shelves, not a bed).
19. Far buildings: rectangles with window dots and a roofline; variety from height, colour and window pattern; fewer colours the further away (drop the darkest colour on the farthest). Each building on its own layer.
20. Night: structure in flat dark blocks → signage → lighting; warm desaturated near the street, cooler toward the top. Only lit windows and roof edges keep crisp contours.

• arch-brick-16 — running-bond brick, 7 × 3, two tones, chips; wraps on both axes.
• arch-window-16 — four-pane window on plaster, sill and shadow. For the night variant swap glass for warm yellow and add an L-shaped light patch per pane.
• arch-door-16x32 — wooden double door in a stone frame with lintel and step; drops into a wall tile pair.
• arch-roof-shingle-16 — fish-scale shingles, 8 px scales with a dark scallop gap, courses offset 4 px, one worn scale per two courses; wraps on both axes.
• arch-house-front-32 — roof, wall, windows, door and base assembled at 32 px, with the eave shadow.
• arch-floor-planks-16 — interior floor; long boards with staggered joints.

m = mortar       #3b2f33
h = brick-light  #d98a5f
s = brick-mid    #b5593f
t = brick-alt    #a14a3c
---
hhhhhhhmhhhhhhhm
hssssssmhttttttm
hssssssmhttttttm
mmmmmmmmmmmmmmmm
hhhmhhhhhhhmhhhh
tttmhssssssmhttt
tttmhssssssmhttt
mmmmmmmmmmmmmmmm
hhhhhhhmhhhhhhhm
hssssssmhttttttm
hssssssmhttttttm
mmmmmmmmmmmmmmmm
hhhmhhhhhhhmhhhh
tttmhssssssmhttt
tttmhssssssmhttt
mmmmmmmmmmmmmmmm

w = wall-plaster  #cdb9a0
f = frame-wood    #6b4a3a
g = glass         #2f4a6b
h = glass-glint   #9cc3e0
s = sill-stone    #ebe3d2
d = sill-shadow   #8f7d6b
---
wwwwwwwwwwwwwwww
wwffffffffffffww
wwfhgggffhgggfww
wwfghggffggggfww
wwfggggffggggfww
wwfggggffggggfww
wwffffffffffffww
wwffffffffffffww
wwfhgggffhgggfww
wwfggggffghggfww
wwfggggffggggfww
wwfggggffggggfww
wwffffffffffffww
wssssssssssssssw
wwddddddddddddww
wwwwwwwwwwwwwwww

F = stone-light    #cfcdd9
f = stone-mid      #9c9aa8
S = stone-shadow   #615f73
W = plank-light    #b5794a
p = plank-mid      #8a5a3c
q = plank-dark     #4b2f27
i = iron           #2f2d3a
j = rivet          #8c8aa0
y = handle-brass   #e0b64a
---
................
................
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
SSSSSSSSSSSSSSSS
.Fffqqqqqqqqfff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.Ffijiiijiijiff.
.Ffiiiiiiiiiiff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.FfWpqyqWpyWpff.
.FfWpqyqWpyWpff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.Ffijiiijiijiff.
.Ffiiiiiiiiiiff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
.FfWpqWqWpqWpff.
FFFFFFFFFFFFFFFF
ffffffffffffffff
.SSSSSSSSSSSSSS.

l = shingle-light #d8785a
m = shingle-mid   #b04e46
s = shingle-shade #8c3b44
d = shingle-gap   #5a2a3a
n = shingle-worn  #a2444a
---
lmmmmmmmlmmmmmmm
lmmmmmmslmmmmmms
dmmmmmsddmmmmmsd
ddssssddddssssdd
nnnnlmmmmmmmlnnn
nnnslmmmmmmslnnn
nnsddmmmmmsddnnn
ssddddssssddddss
lmmmmmmmlmmmmmmm
lmmmmmmslmmmmmms
dmmmmmsddmmmmmsd
ddssssddddssssdd
mmmmlnnnnnnnlmmm
mmmslnnnnnnslmmm
mmsddnnnnnsddmmm
ssddddssssddddss

o = roof-outline  #3d2230
l = roof-light    #d8785a
m = roof-mid      #b04e46
d = roof-dark     #7a3544
v = wall-shadow   #a89580
w = wall-plaster  #cdb9a0
t = timber        #6b4a3a
f = frame-wood    #6b4a3a
g = glass          #2f4a6b
h = glass-glint   #9cc3e0
s = sill-stone     #ebe3d2
p = door-plank    #8a5a3c
q = door-dark     #4b2f27
y = handle-brass  #e0b64a
B = base-light    #b8b6c4
b = base-mid      #8a889c
j = base-joint    #5f5d78
---
......ollllllllllllllllllo......
.....ommdmmmdmmmdmmmdmmmdmo.....
....oddddddddddddddddddddddo....
...ollllllllllllllllllllllllo...
..ommmdmmmdmmmdmmmdmmmdmmmdmmo..
.oddddddddddddddddddddddddddddo.
ollllllllllllllllllllllllllllllo
dmmmdmmmdmmmdmmmdmmmdmmmdmmmdmmm
dddddddddddddddddddddddddddddddd
.ttvvvvvvvvvvvvvvvvvvvvvvvvvvtt.
.ttvvvvvvvvvvvvvvvvvvvvvvvvvvtt.
.ttwwwwwwwwwwwwwwwwwwwwwwwwwwtt.
.ttwfffffffwwwwwwwwwwfffffffwtt.
.ttwfhgfhgfwffffffffwfhgfhgfwtt.
.ttwfggfggfwwqpqqpqwwfggfggfwtt.
.ttwfggfggfwwppqqppwwfggfggfwtt.
.ttwfffffffwwppqqppwwfffffffwtt.
.ttssssssssswppqqppwssssssssstt.
.ttwvvvvvvvwwppqqppwwvvvvvvvwtt.
.ttwwwwwwwwwwppqqpywwwwwwwwwwtt.
.ttwwwwwwwwwwppqqppwwwwwwwwwwtt.
.ttwwwwwwwwwwppqqppwwwwwwwwwwtt.
BBBBBBBBBBBBBppqqppBBBBBBBBBBBBB
bbbbjbbbbbbjbppqqppbbbbbbjbbbbbb
jbbbbbbjbbbBBBBBBBBBBjbbbbbbjbbb
bbbbjbbbbbbbbbbbbbbbbbbbbjbbbbbb

m = plank-gap    #3d2a2a
h = plank-light  #c28a58
s = plank-mid    #a56f46
t = plank-alt    #96623f
g = grain         #7d4f35
---
hhhhhmhhhhhhhhhh
sssssmhsssssssss
sssssmhssggsssss
mmmmmmmmmmmmmmmm
hhhhhhhhhhhhmhhh
ttttttttttttmhtt
tttggtttttttmhtt
mmmmmmmmmmmmmmmm
hmhhhhhhhhhhhhhh
smhsssssssssggss
smhsssssssssssss
mmmmmmmmmmmmmmmm
hhhhhhhhmhhhhhhh
ttttttttmhtttttt
ttttttggmhtttttt
mmmmmmmmmmmmmmmm

1. Fix the grid, light direction (upper-left) and a palette of 4–6 swatches per material (palette op ramp per material; stone cool, wood warm).
2. Block the facade in flat colour with draw op rect: roof band, wall, base, openings. look op preview at 1× and squint: roof, wall and base must separate by value.
3. Tile materials first: brick or plaster tile via draw kind grid from the template, wrap-tested as in rules://66-tiles-and-autotiling.
4. Openings: frame, then glass, then sill and shadow row; door planks before straps before handle.
5. Eave shadow: 2 rows under the roof, then drop shadows under sills and lintels. One light direction.
6. Chip and crack the brick, then add a variant tile; look op ascii to check no crack touches the tile border.
7. Subtle outline last: a slightly darker version of the adjacent colour, not black (rules://04-outlines-and-edges).
8. Interiors: floor tile, wall tile, baseboard; then furniture on a separate layer; then look op preview at game scale.
9. validate (strays, palette); look with the layers hidden one by one to check overlap order.

• Facade reads in flat colour at 1×: roof, wall and base separate by value.
• One light direction on bricks, sills, lintels and eave shadows; no outline on every brick.
• Brick pitch divides the tile and the tile wraps on both axes.
• Window has frame, panes, sill and shadow; door has frame, lintel, planks, handle and step.
• Roof is two-tone with courses, overhangs the wall and casts an eave shadow.
• Building edges sit on the grid; only the top overshoots.
• Interior wall height is constant, furniture stands in front of the wall, the room has a purpose.
• Far buildings use fewer colours than near ones.

• Silber, Pixel Art for Game Developers, ch. 9: city layer (brick wall, window, ledge, 10-tile building set).
• Slynyrd, Pixelblog 14, 16, 34, 35, 45 (bricks, walls, doors), 51 (city builder), 57 (castles) — slynyrd.com/pixelblog-catalogue.
• Saint11 tutorials City, Top-Down-Houses, Indoors, Ruins — saint11.art/blog/pixel-tutorials.
• Videlais, building-tile tutorial (window and shingle numbers); gamedesign.wikidot, Brick wall I; RPG Maker MZ interior-mapping guide.
• Robertson, How to Draw, pp. 58–65, 104–121 (volumes first); Solarski, Drawing Basics and Video Game Art (building anatomy, doorways).
• Tsugumo, So You Want To Be A Pixel Artist? ch. 3–5 (brick variants, town analysis).