๐ฅ๐ฒ๐ฝ๐น๐ฎ๐ฐ๐ถ๐ป๐ด ๐๐ถ๐ด๐บ๐ฎ ๐ช๐ถ๐๐ต ๐๐ง๐ ๐ ๐ฅ๐ฒ๐ป๐ฑ๐ฒ๐ฟ๐ถ๐ป๐ด
Brand refreshes usually take weeks. For us, it took five minutes.
We used to have five different Figma files for our images.
- Blog heroes
- Quote cards
- Podcast covers
- Episode cards
- Newsletter banners
One small change meant updating every file by hand. Updating 300 old posts took weeks.
We replaced the process with an HTML renderer. We used HTML templates and one CSS file for brand colors and fonts.
Now, a brand refresh is three lines of code. One commit. One deploy. Done.
The system is simple.
- One Blade view per image format.
- One CSS file for the brand.
- A service to turn HTML into PNGs.
- A cache key to trigger updates.
We learned a few lessons.
- Use a ready selector to ensure fonts load.
- Inline brand assets as SVG.
- Store images on your own S3 bucket.
- Sort data before hashing cache keys.
Do not do this if you post rarely. Do not do this if you need custom art for every single image.
Do this if you want speed and consistency. Your team ships faster. The brand stays consistent. The designer stops doing boring work.
This is the half-day refactor worth doing.