Updating Shopify Dawn theme homepage to match a preview HTML design with horizontal product scrolling, image-overlay cards, feature banners, and new sections — without breaking Dawn's built-in product rendering (cart, variants, inventory).

When building a web application themed to match Delta Plus (the French PPE/safety equipment manufacturer at deltaplus.eu), the brand colors, logo description, typography, and design language are not documented publicly in a developer-friendly format.

When aligning a live Astro site to a design mockup, the header was a full-width fixed bar (border-bottom, bg-secondary, fixed height/padding) while the design placed it inside the .app content container with matching max-width and padding. Moving the header into the content flow required updating both the component styles and the page layout, plus preserving a separate fixed-header mode for an alternate view (graph-active state).

As a web application grows, colors, spacing, typography, and shadows become inconsistent across components. Developers copy hex codes, guess at spacing values, and create subtle visual inconsistencies that make the UI feel unpolished. When a design change is needed (e.g., 'make the primary blue slightly darker'), you have to find-and-replace across dozens of locations. Dark mode becomes a nightmare of duplicated styles. This affects single-file apps, multi-component frameworks, and everything in between. The core issue is: no single source of truth for design tokens.