================================================================================
SOLID SOURCING — REQUIRED IMAGE ASSETS
Architectural Brick & Design Platform
================================================================================
Last updated: 2026-03-19
Prepared for client delivery

--------------------------------------------------------------------------------
TECHNICAL SPECIFICATIONS (ALL ASSETS)
--------------------------------------------------------------------------------
- Dimensions:     1920 x 1080 px (exact — all layers MUST share this dimension)
- Format:         PNG-24
- Color space:    sRGB (IEC 61966-2-1)
- Resolution:     72 dpi (screen use only)
- Naming:         lowercase, underscores, no spaces
- Transparency:   See notes per section below

IMPORTANT: ALL images must be identical in dimension and framing.
The house, camera angle, and composition must be identical across every file.
This ensures perfect alignment when overlay layers are composited on top.

================================================================================
SECTION 1 — PER-BRICK HOUSE RENDERS  (/assets/images/renders/)
================================================================================
[REQUIRED FOR LAUNCH]

These are fully rendered (or photorealistic) images of the house — one per
brick product. Each render already shows the brick applied to the walls.
The roof, windows, and paving areas must be rendered as neutral flat grey
placeholders so that the overlay layers can be applied on top.

WALL AREA:       Full brick texture/colour for that specific brick product
ROOF AREA:       Flat neutral grey (#888888) — overlay layer will replace this
WINDOW FRAMES:   Flat neutral grey (#888888) — overlay layer will replace this
DRIVEWAY/PAVING: Flat neutral grey (#888888) — overlay layer will replace this
SKY/BACKGROUND:  Transparent OR a neutral warm gradient

--- CLAY CATEGORY ---
  house_clay_rustic.png
    Brick colour reference: #8B4513 (deep reddish-brown)
    Texture: rough, handmade clay, warm reddish-brown tones
    File path: assets/images/renders/house_clay_rustic.png

  house_clay_manor.png
    Brick colour reference: #A0522D (sienna)
    Texture: semi-smooth, heritage style, medium brown with light mortar
    File path: assets/images/renders/house_clay_manor.png

--- CEMENT CATEGORY ---
  house_cement_charcoal.png
    Brick colour reference: #3D3D3D (dark charcoal)
    Texture: smooth cement face brick, dark charcoal, minimal texture
    File path: assets/images/renders/house_cement_charcoal.png

  house_cement_pearl.png
    Brick colour reference: #D6D0C8 (warm cream-grey)
    Texture: smooth cement, pale cream-grey, clean modern lines
    File path: assets/images/renders/house_cement_pearl.png

--- STOCK CATEGORY ---
  house_stock_natural.png
    Brick colour reference: #C4A882 (natural buff)
    Texture: stock brick, sandy/buff tones, slightly irregular surface
    File path: assets/images/renders/house_stock_natural.png

  house_stock_ivory.png
    Brick colour reference: #E8E0D0 (ivory/cream)
    Texture: pale stock brick, smooth-faced, contemporary ivory
    File path: assets/images/renders/house_stock_ivory.png

================================================================================
SECTION 2 — ROOF COLOUR OVERLAY LAYERS  (/assets/images/layers/)
================================================================================
All roof overlays must:
  - Be exactly 1920x1080px (same framing as all house renders)
  - Be TRANSPARENT everywhere EXCEPT the roof surface area
  - Pixel-perfectly align with the house renders
  - Represent IBR / Corrugated / Concrete tile styles as appropriate

[REQUIRED FOR LAUNCH]
  roof_charcoal.png
    Colour reference: #2C2C2C
    Style: IBR sheeting or concrete tile, dark charcoal
    Thumbnail: assets/images/thumbs/roof_charcoal.jpg

  roof_terracotta.png
    Colour reference: #C1440E
    Style: concrete roof tile, terracotta / burnt orange
    Thumbnail: assets/images/thumbs/roof_terracotta.jpg

  roof_slate_grey.png
    Colour reference: #708090
    Style: slate grey, flat or low-pitch tile profile
    Thumbnail: assets/images/thumbs/roof_slate_grey.jpg

[OPTIONAL ADDITIONS]
  roof_sage_green.png
    Colour reference: #7D9471
    Style: IBR, sage green — popular coastal aesthetic

  roof_monument.png
    Colour reference: #4A4A4A
    Style: Colorbond Monument equivalent, dark warm grey

================================================================================
SECTION 3 — WINDOW & TRIM ACCENT OVERLAYS  (/assets/images/layers/)
================================================================================
All window overlays must:
  - Be exactly 1920x1080px (same framing as all house renders)
  - Be TRANSPARENT everywhere EXCEPT window frames, door frames,
    fascia boards, and soffits
  - Pixel-perfectly align with the house renders

[REQUIRED FOR LAUNCH]
  window_anthracite.png
    Colour reference: #293133
    Style: dark aluminium frame, slim profile, contemporary
    Thumbnail: assets/images/thumbs/window_anthracite.jpg

  window_white.png
    Colour reference: #F5F5F5
    Style: white painted or white PVC / aluminium frames, classic
    Thumbnail: assets/images/thumbs/window_white.jpg

  window_bronze.png
    Colour reference: #614E3A
    Style: bronze / dark brown timber or anodised aluminium frames
    Thumbnail: assets/images/thumbs/window_bronze.jpg

[OPTIONAL ADDITIONS]
  window_champagne.png
    Colour reference: #C8A96E
    Style: champagne anodised aluminium, warm gold-tone frames

  window_black.png
    Colour reference: #1A1A1A
    Style: matte black, maximum contrast, industrial modern

================================================================================
SECTION 4 — PAVING / FOREGROUND OVERLAYS  (/assets/images/layers/)
================================================================================
All paving overlays must:
  - Be exactly 1920x1080px (same framing as all house renders)
  - Be TRANSPARENT everywhere EXCEPT the driveway and entrance paving area
  - Pixel-perfectly align with the house renders
  - Show paving pattern / texture (cobble, flag, running bond etc.)

[REQUIRED FOR LAUNCH]
  paving_charcoal_cobble.png
    Colour reference: #3D3D3D
    Style: dark grey cobbled / block paving pattern
    Thumbnail: assets/images/thumbs/paving_charcoal_cobble.jpg

  paving_sandstone.png
    Colour reference: #C2A06E
    Style: natural sandstone flag / slab paving, warm buff tones
    Thumbnail: assets/images/thumbs/paving_sandstone.jpg

  paving_terracotta_pave.png
    Colour reference: #B5651D
    Style: terracotta clay paving bricks, herringbone or running bond
    Thumbnail: assets/images/thumbs/paving_terracotta_pave.jpg

[OPTIONAL ADDITIONS]
  paving_granite_grey.png
    Colour reference: #888888
    Style: grey granite sett or porcelain tile

  paving_limestone_cream.png
    Colour reference: #E0D5BE
    Style: cream / pale limestone slabs

================================================================================
SECTION 5 — PRODUCT THUMBNAILS  (/assets/images/thumbs/)
================================================================================
For each product, a 400x300px JPG thumbnail is required.
These appear in the sidebar selector and comparison panels.
Show a close-up texture / swatch of the material.
Background: neutral grey #2A2A2A (matches dark UI).
Naming: same as the overlay filename but with .jpg extension.

  brick_clay_rustic.jpg
  brick_clay_manor.jpg
  brick_cement_charcoal.jpg
  brick_cement_pearl.jpg
  brick_stock_natural.jpg
  brick_stock_ivory.jpg
  roof_charcoal.jpg
  roof_terracotta.jpg
  roof_slate_grey.jpg
  window_anthracite.jpg
  window_white.jpg
  window_bronze.jpg
  paving_charcoal_cobble.jpg
  paving_sandstone.jpg
  paving_terracotta_pave.jpg

================================================================================
SECTION 6 — BRANDING & UI ASSETS  (/assets/images/)
================================================================================
  logo.png
    Full company logo on transparent background
    Preferred height: ~80px @ 2x (so deliver at 160px tall)
    Place at: assets/images/logo.png
    The site will auto-detect this file and display it in the navigation.
    If this file is absent, a text placeholder "SS" is shown instead.

  og_image.jpg
    1200x630px social share / Open Graph preview image
    Suggested content: hero house render with logo overlay

  favicon.png
    192x192px PNG favicon (used for browser tab icon)

================================================================================
DELIVERY CHECKLIST
================================================================================

Priority 1 — REQUIRED FOR LAUNCH (minimum viable set):
HOUSE RENDERS (per brick — in /assets/images/renders/):
  [ ] house_clay_rustic.png
  [ ] house_clay_manor.png
  [ ] house_cement_charcoal.png
  [ ] house_cement_pearl.png
  [ ] house_stock_natural.png
  [ ] house_stock_ivory.png

ROOF OVERLAYS (in /assets/images/layers/):
  [ ] roof_charcoal.png
  [ ] roof_terracotta.png
  [ ] roof_slate_grey.png

WINDOW OVERLAYS (in /assets/images/layers/):
  [ ] window_anthracite.png
  [ ] window_white.png
  [ ] window_bronze.png

PAVING OVERLAYS (in /assets/images/layers/):
  [ ] paving_charcoal_cobble.png
  [ ] paving_sandstone.png
  [ ] paving_terracotta_pave.png

THUMBNAILS (in /assets/images/thumbs/ — 400x300 JPG each):
  [ ] All 15 product thumbnails listed in Section 5

BRANDING:
  [ ] logo.png  (see Section 6)

Priority 2 — OPTIONAL (enhances product range):
  [ ] All [OPTIONAL ADDITIONS] listed in Sections 2–4
  [ ] og_image.jpg and favicon.png

================================================================================
NOTES FOR DESIGNER
================================================================================
1. FRAMING IS CRITICAL.
   The house position and camera angle must be absolutely identical across
   all house renders AND all overlay PNGs. Even 1px misalignment will be
   visible when layers are composited.
   Use a Photoshop / Figma / Blender template and lock the camera.

2. HOW THE VISUALIZER WORKS:
   - User selects a brick type
   → The matching house render (house_*.png) loads as the base image
   - User selects roof, windows, paving
   → Transparent overlay PNGs are layered on top with CSS (opacity fade)
   The browser stacks them: house render → roof overlay → window overlay
   → paving overlay

3. TEST IN PHOTOSHOP BEFORE DELIVERY:
   Open any house render. Add roof overlay on top. Add window overlay.
   Add paving overlay. All should composite naturally with no visible seams.

4. PNG TRANSPARENCY QUALITY:
   Use clean, anti-aliased masks. Avoid hard pixel edges on transparency.
   Semi-transparent edge pixels are fine and preferred.

5. FILE SIZE GUIDANCE:
   Target <1.5MB per PNG for acceptable web load times.
   Use TinyPNG / ImageOptim to compress without quality loss.

6. SOURCE FILES:
   Please submit all original source files (PSD / Figma / Blender project)
   alongside the exported PNGs for future editing.
================================================================================