# Before and after change spine

> Two equal square photographs frame a narrow record of three interior styling decisions. Before, changes and after retain that order on a phone, with all captions outside the photographs. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/before-after-change-spine.html
Section: Gallery
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, column, columns, group, heading, image, paragraph
Keywords: before and after, interiors, styling, comparison

## Variations (2)

### Photographs with change spine (the default)

Identical markup in every theme.

Your theme’s ground, text, type and button treatment, with the composition and spacing retained.

### Pumice and olive

This variation states its own colours and states its own type: identical in every theme.

Pumice ground #EBE9DD, charcoal-green ink #2D3029 and olive accent #535D32; Georgia heading over Arial captions and an underlined olive project link.


---

## The signature moment: the changes form a narrow spine between matching photographs

The matching image frames have equal weight and level feet. A narrow central column carries three numbered decisions: anchor with a green sofa, soften with plants and textiles, and group artwork above the seat. On a phone, the edited empty image comes first, then the decisions, then the furnished room.

## What it inherits from your theme

The Core payload uses the theme’s base and contrast chains, currentColor rules, its typefaces and heading ladder. Text is intended for 4.5:1 contrast, or 3:1 at large display sizes; the rendered checks measure the actual pairs. Headings and links follow the root painter. The inherited Core payload is the theme route for this composition.

## Display type

The short heading uses the theme’s x-large rung. Decision numerals use 1.75rem, decision text and photo labels 15px, and body copy medium. The photographs retain their original square crop.

## The Styled look

Pumice ground #EBE9DD, charcoal-green ink #2D3029 and olive accent #535D32; Georgia heading over Arial captions and an underlined olive project link. Every button is deliberately filled or underlined, with its own padding. The root states a 400 body weight.

## What to change first

Replace both photographs together, the three decisions and their captions. Retain an accurate concept disclosure for these sample images, or replace it with true project provenance when using your own work.

## Image provenance

Both public URLs are reviewed entries in assets/comparison-images.json. The furnished room is by Spacejoy on Unsplash: https://unsplash.com/photos/a-living-room-with-a-green-couch-and-a-coffee-table-0JGRXomKXSw under the Unsplash License. The empty version uses AI-assisted furniture removal from that photograph. This is an illustrative interior styling concept, not a documented renovation or a client before-and-after. The visible caption explicitly says the empty version is edited. Both locally cached square exports and the final rendered crops were reviewed.

Core blocks only. No script, custom CSS, font file or required plugin.