CentiPack: design and Astro marketing site

CentiPack sells cold chain shipping systems and pharmacy packaging to compounding pharmacies. I designed and built its marketing site in Astro, starting from a logo: positioning, catalogue structure, a design system, a full product image set and three product videos.

CentiPack came with a logo and an AI-generated site that only assembled itself in the visitor's browser, so search engines and AI crawlers saw an almost empty page. Product lines were mixed together, and the team's expertise didn't show. High-volume pharmacy buyers tend to default to large, familiar suppliers, so the site had to present CentiPack as a serious partner before the first call, without turning the catalogue into a shop.

I ran recorded working sessions with the three partners and wrote from the transcripts. Two sessions in the first week settled positioning, audience, catalogue and sitemap, and a third reviewed drafts. That's where the structure came from: products organised the way a package is built, outside in, and Custom Boxes promoted to its own category after a partner held up a branded vial box that fit nowhere else. Dozens of size and thickness combinations became 12 product pages with real spec tables.

I built the system from the logo up: warm sand neutrals, black type, and a single ink navy reserved for interactive elements. Semantic colour tokens with light and dark themes, spacing and radius tokens, a 12-column grid, and shared components for cards, spec tables, FAQ and the contact block. Every page is assembled from these parts, so new products drop in without new design work.

The client had about 95 phone photos of real samples, shot at different times, on different backgrounds and in different light, with some products not photographed at all. Pharmacy buyers are experts, so an image that exaggerates a vial or a mailer is a broken promise. The rule: the product shown must be the product shipped.

I mapped every gap and planned 43 image slots before generating anything. Every shot used one locked studio recipe: warm sand backdrop, soft frontal light, one contact shadow, a 4:5 frame. Real samples went in as reference images, so shape and proportions came from the actual product. Seedream 5.0 in Figma Weave generated clean scenes, and the logo went on in a separate pass, checked by eye. The client approved every image.

Each product has its own branch in Weave, from reference photo to approved image, so every result traces back to a real sample. Later I ran generation from chat with an agent in the same system, so new products and multi-product hero scenes took minutes.

The client already had two AI product videos with the right story but a rough look that didn't match the new imagery. I kept the storyline and rendered both again from the approved product renders, then made a third from scratch the same way. Every frame now matches the stills on the site.

I built the site on Astro with my house system: design tokens and section-based pages that load as plain HTML, with no JavaScript unless a section needs it. Static hosting on Cloudflare Pages, a protected contact form, product and organisation schema, one URL per product, redirects from the old site, and llms.txt. Code and hosting sit in accounts the client owns.

Lighthouse 100 on mobile at launch across performance, accessibility, best practices and SEO, with a 1.5 s Largest Contentful Paint.

12 product pages with real spec tables, built from one design system.

A studio-consistent product image set and three product videos, made without a photoshoot.