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

framed in slate gray stone

Border = secondary material (peeking ~10px). Background = primary material 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

framed in dielectric copper pipe

Border = secondary material (peeking ~10px). Background = primary material 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

framed in raw copper bus bar

Border = secondary material (peeking ~10px). Background = primary material 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

framed in cedar shake

Border = secondary material (peeking ~10px). Background = primary material at 80% opacity.

Painter

accent hyper-real

Primary

Warm walnut wood

Oil-rubbed walnut

body tile

macro

Secondary

Bone white linen canvas

Primed canvas weave

body tile

macro

Element framed in this material

Warm walnut wood

framed in bone white linen canvas

Border = secondary material (peeking ~10px). Background = primary material 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

framed in moss-covered stone

Border = secondary material (peeking ~10px). Background = primary material 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

framed in blackened steel

Border = secondary material (peeking ~10px). Background = primary material 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

framed in weathered galvanized steel

Border = secondary material (peeking ~10px). Background = primary material 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

framed in matte white marble

Border = secondary material (peeking ~10px). Background = primary material 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

framed in dark walnut floor

Border = secondary material (peeking ~10px). Background = primary material 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

framed in aquamarine water

Border = secondary material (peeking ~10px). Background = primary material 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

framed in raw concrete

Border = secondary material (peeking ~10px). Background = primary material 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

framed in brushed aluminum

Border = secondary material (peeking ~10px). Background = primary material 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

framed in weathered asphalt

Border = secondary material (peeking ~10px). Background = primary material 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

framed in oxblood leather

Border = secondary material (peeking ~10px). Background = primary material 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

framed in rose gold metal

Border = secondary material (peeking ~10px). Background = primary material 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

framed in raw silk linen

Border = secondary material (peeking ~10px). Background = primary material 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

framed in matte black steel

Border = secondary material (peeking ~10px). Background = primary material 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

framed in natural cotton textile

Border = secondary material (peeking ~10px). Background = primary material 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

framed in tan leather leash

Border = secondary material (peeking ~10px). Background = primary material 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

framed in matte black canvas

Border = secondary material (peeking ~10px). Background = primary material 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

framed in brushed brass

Border = secondary material (peeking ~10px). Background = primary material 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

framed in checkered tile

Border = secondary material (peeking ~10px). Background = primary material at 80% opacity.