Client case studies deserve their own identity. But separate layouts create maintenance nightmares. Here's how we built a conditional styling system that brands content without duplicating code.
One Layout. Smart Overrides. Zero Duplication.
How conditional styling beats separate layouts every time.
Six blog posts documenting a client project. Great content, but visually identical to everything else. Client case studies deserve their own identity—but not at the cost of maintainability.
The Wrong Way
Separate layouts = maintenance hell. Every new feature needs adding twice. Bug fixes happen twice. Layouts drift apart.
Separate Layouts
- Duplicate code for each series
- Features added twice
- Bug fixes in multiple places
- Layouts drift apart over time
- More code = more maintenance
Conditional Styling
- One layout, smart overrides
- Features apply everywhere
- Single source of truth
- Branding is additive
- Less code = less bugs
The Right Way
One layout, smart overrides. A single boolean drives everything. Zero code duplication. New features apply everywhere.
The Core Pattern
// Define the helper
const isPinkSlips = blogPost?.series?.name === "Pink Slips NSW";
// Use it everywhere
className={isPinkSlips ? "bg-pink-50" : "bg-white"}
className={isPinkSlips ? "border-pink-500" : "border-purple-500"}
className={isPinkSlips ? "text-pink-600" : "text-purple-600"}With this pattern, we updated the hero section, article background, meta card, social share section, related posts, back to top button, and all social media cards. Every element checks one boolean.
Hero, backgrounds, social cards, schedule visuals. Retroactive to all 6 existing posts.
Adding a New Branded Series
- 1
Define helper: const isNewSeries = ...
- 2
Add color scheme to components
- 3
Add logo to public/clients/
- 4
Base layout stays unchanged
The pattern is proven and scales. Future branded series just need a helper boolean, color scheme, and client logo. The base layout stays untouched—new features automatically apply to all series.
Client work gets proper identity. New features benefit all series. One codebase to maintain. The foundation scales.
— Branding Without Technical Debt
LinkedIn Carousel Cards
These cards are designed to flow together as a LinkedIn carousel. Each card continues the visual story from the previous one, with a flowing ribbon that connects them all. Download all cards and upload them as a document post on LinkedIn.
Social Media Carousel
8 cards • Click to download individually or as ZIP
How We Built a Branded Blog Series
From generic to client-branded
A 2-hour investment that scales infinitely
Hero, meta cards, social cards, and testing
The Problem
Client case studies looked exactly like every other blog post. Purple gradients, standard layouts, generic styling. The content was about the client, but the visual identity was ours.
The Transformation
Separate layouts, duplicate code, maintenance hell
One layout, smart overrides, zero duplication
Same layout. Same components. Different identity.
What Changed
- 1
Hero: Client-branded gradient
- 2
Badge: Series name + part number
- 3
Logos: Dual display (client + JJM)
- 4
Social cards: Branded patterns
The Key Insight
Don't create separate layouts for branded series. Use conditional styling within the existing layout. One codebase, multiple brand identities.
Future branded series just need: a color scheme, a helper boolean, and conditional class overrides. No new layouts. No duplicated code.
— The Pattern Is Proven
Need a Branded Content System?
We build content systems that scale with your brand.
Systems That Scale
Building JJM: The Blog
Share This Article
Spread the knowledge