SpotYourSite

The Material Library

Every trade gets a material pair — a primary surface and a secondary — generated as hyper-detailed 1:1 Higgsfield Nano-Banana-Pro images. Each pair becomes 5 assets (hero band, seamless body tile, glass backing, accent macro, footer slab). The accent macro doubles as the scaled border-image that frames every element. Swatches below are CSS placeholders until the real assets are generated.

23 trades × 2 materials × 5 asset types = 230 assets
CSS swatches Hyper-real photos

Hero header band

3840×1644 (21:9)

Seamless horizontal

Top band of every page

Body background tile

1200×1200 (1:1)

Seamless 4-edge

Repeating substrate behind glass

Glass surface backing

1600×1200 (4:3)

None

Refraction surface under .glass cards

Accent material (macro)

800×800 (1:1)

None

Dividers, buttons, AND scaled border-image frames

Footer slab

3840×1644 (21:9)

Seamless horizontal

Heavier/darker footer

Plumber

accent hyper-real

Primary

Brushed nickel pipe

Polished pipe assembly, scratches + water-spot patina

body tile

macro

Secondary

Slate gray stone

Stone counter, natural mineral veining

body tile

macro

Element framed in this material

Brushed nickel pipe

on slate gray stone

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

HVAC contractor

accent hyper-real

Primary

Brushed stainless steel

Evaporator coil, micro-scratches

body tile

macro

Secondary

Dielectric copper pipe

Raw copper, natural patina + tool marks

body tile

macro

Element framed in this material

Brushed stainless steel

on dielectric copper pipe

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Electrician

accent hyper-real

Primary

Blackened steel

Dark forged steel

body tile

macro

Secondary

Raw copper bus bar

Bright copper conductor

body tile

macro

Element framed in this material

Blackened steel

on raw copper bus bar

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Roofer

accent hyper-real

Primary

Weathered copper patina

Verdigris green-copper

body tile

macro

Secondary

Cedar shake

Split cedar shingle

body tile

macro

Element framed in this material

Weathered copper patina

on cedar shake

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Painter

accent hyper-real

Primary

Bone white linen canvas

Primed canvas weave

body tile

macro

Secondary

Warm walnut wood

Oil-rubbed walnut

body tile

macro

Element framed in this material

Bone white linen canvas

on warm walnut wood

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Landscaper

accent hyper-real

Primary

Weathered teak

Silvered teak grain

body tile

macro

Secondary

Moss-covered stone

Mossy fieldstone

body tile

macro

Element framed in this material

Weathered teak

on moss-covered stone

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Locksmith

accent hyper-real

Primary

Polished brass

Bright machined brass

body tile

macro

Secondary

Blackened steel

Dark steel

body tile

macro

Element framed in this material

Polished brass

on blackened steel

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Handyman

accent hyper-real

Primary

White oak end-grain

End-grain butcher block

body tile

macro

Secondary

Weathered galvanized steel

Spangled galvanize

body tile

macro

Element framed in this material

White oak end-grain

on weathered galvanized steel

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Cleaning service

accent hyper-real

Primary

Bleached linen

Crisp white linen

body tile

macro

Secondary

Matte white marble

Soft-vein marble

body tile

macro

Element framed in this material

Bleached linen

on matte white marble

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Carpet cleaning

accent hyper-real

Primary

Natural wool weave

Berber wool loop

body tile

macro

Secondary

Dark walnut floor

Walnut plank

body tile

macro

Element framed in this material

Natural wool weave

on dark walnut floor

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Pool service

accent hyper-real

Primary

Travertine stone

Honed travertine

body tile

macro

Secondary

Aquamarine water

Pool water surface

body tile

macro

Element framed in this material

Travertine stone

on aquamarine water

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Junk removal

accent hyper-real

Primary

Brushed industrial aluminum

Diamond-plate aluminum

body tile

macro

Secondary

Raw concrete

Bare cured concrete

body tile

macro

Element framed in this material

Brushed industrial aluminum

on raw concrete

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Auto repair shop

accent hyper-real

Primary

Gunmetal toolbox steel

Powder-coat gunmetal

body tile

macro

Secondary

Brushed aluminum

Machined alloy

body tile

macro

Element framed in this material

Gunmetal toolbox steel

on brushed aluminum

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Mobile mechanic

accent hyper-real

Primary

Brushed steel tool tray

Worn steel tray

body tile

macro

Secondary

Weathered asphalt

Aged blacktop

body tile

macro

Element framed in this material

Brushed steel tool tray

on weathered asphalt

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Barbershop

accent hyper-real

Primary

Walnut paneling

Hand-rubbed walnut

body tile

macro

Secondary

Oxblood leather

Stitched chair leather

body tile

macro

Element framed in this material

Walnut paneling

on oxblood leather

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Hair salon

accent hyper-real

Primary

Cream marble

Warm-vein marble

body tile

macro

Secondary

Rose gold metal

Brushed rose gold

body tile

macro

Element framed in this material

Cream marble

on rose gold metal

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Massage therapist

accent hyper-real

Primary

River stone

Smooth river pebble

body tile

macro

Secondary

Raw silk linen

Natural silk weave

body tile

macro

Element framed in this material

River stone

on raw silk linen

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Gym

accent hyper-real

Primary

Rubber floor

Speckled rubber mat

body tile

macro

Secondary

Matte black steel

Powder-coat black

body tile

macro

Element framed in this material

Rubber floor

on matte black steel

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Yoga studio

accent hyper-real

Primary

Bleached oak floor

Pale oak plank

body tile

macro

Secondary

Natural cotton textile

Woven cotton

body tile

macro

Element framed in this material

Bleached oak floor

on natural cotton textile

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Dog walker

accent cartoony

Primary

Morning grass aerial

Sunlit lawn (stylized)

body tile

macro

Secondary

Tan leather leash

Warm leather strap

body tile

macro

Element framed in this material

Morning grass aerial

on tan leather leash

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Photographer

accent hyper-real

Primary

Aged leather camera strap

Worn leather

body tile

macro

Secondary

Matte black canvas

Tech canvas

body tile

macro

Element framed in this material

Aged leather camera strap

on matte black canvas

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Caterer

accent hyper-real

Primary

White linen tablecloth

Pressed linen

body tile

macro

Secondary

Brushed brass

Warm brass

body tile

macro

Element framed in this material

White linen tablecloth

on brushed brass

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.

Food truck

accent cartoony

Primary

Painted galvanized steel

Glossy painted panel (stylized)

body tile

macro

Secondary

Checkered tile

Diner checker

body tile

macro

Element framed in this material

Painted galvanized steel

on checkered tile

Primary material = the frame (background behind, peeking ~10px). Secondary = the fill at 80% opacity.