CatalogFT-MKT-0060:32

Print Catalog System

React-Rendered US Letter Pages

About

Print-ready catalog booklets rendered as React pages. 8.5x11 US Letter, Cmd+P export, design token system, multiple booklets.

Scene Breakdown (6 scenes)

1
Title0:000:04

Print Catalog System

Print Catalog System. React components rendering production-ready US Letter pages.

2
Problem0:040:07

The Problem

Problem: catalogs designed in InDesign. Expensive license. Slow to update. Product data manually copied in. Price changes make the catalog instantly stale. No version control.

InDesign dependencyManual data entryInstantly staleNo version control
3
Demo0:110:07

The Fix

Fix: every catalog page is a React component. CatalogPage wrapper enforces eight-point-five by eleven with page-break-after. Product data imported directly. Command-P generates the PDF. Kelly270 button handles twelve-by-eighteen imposition for Ricoh printing.

4
Diagram0:180:07

Design Token Architecture

Token architecture: tokens.ts defines section colors, type scale, print margins. Imported by Tailwind config and CSS variables. Colorways.ts maps hex swatches. Images.ts resolves paths with gradient fallbacks. Change one token, every page updates.

tokens.tsSection ColorsType ScaleCSS Variablescolorways.tsimages.ts
5
Result0:250:05

Outcome

Outcome: four catalog booklets, over sixty pages. Always in sync with product database. Zero InDesign. Version controlled in Git. Print-ready at three hundred DPI.

4 booklets60+ pagesData-drivenZero InDesign300 DPI
6
Title0:300:02

Icon Tile

Icon Tile.

Icon Tile — Natural Stone & Porcelain