From Generic to Branded
Client case studies deserve their own identity. We built a branding system that transforms standard blog posts into client-branded series—without duplicating layouts or code.
Pink Slips NSW is our flagship client project. We're building a complete lead management system, calendar scheduling, and business automation. Each development session produces valuable content for a blog post. But those posts looked exactly like every other JJM blog—purple gradients, standard layouts, generic styling.
The content was about Pink Slips NSW, but the visual identity was JJM. That disconnect weakened the case study's impact. We needed branded series that feel like they belong to the client.
How We Built a Branded Blog Series
From generic to client-branded
A 2-hour investment that scales infinitely
The Goal
Create a branded blog series system that:
Uses client colors
Pink/rose gradients instead of purple/blue
Shows client logo
Dual logo display: client + JJM
Maintains series continuity
"Part 1", "Part 2" numbering with client name
Doesn't duplicate code
Same layout, conditional styling
Hero, meta cards, social cards, and testing
The key insight: Don't create separate layouts for branded series. Use conditional styling within the existing layout. One codebase, multiple brand identities.
The Problem
Client case studies looked exactly like every other JJM blog post. Purple gradients, standard layouts, generic styling.
What Changed: Component by Component
Before (Standard JJM)
- Purple/blue gradient backgrounds
- JJM logo only
- Category badge: "Web Development"
- Standard purple social cards
- Purple meta card styling
After (Pink Slips NSW)
- Pink/rose gradient backgrounds
- Dual logos: Pink Slips NSW + JJM
- Series badge: "Part 1 - Pink Slips NSW"
- Pink-branded social cards
- Pink meta card styling
The Transformation
Purple gradients, JJM logo only, generic styling
Pink gradients, dual logos, client-branded identity
Implementation Details
Add isPinkSlipsSeries Boolean
Helper variable in blog-post.tsx that checks if the post slug contains 'pink-slips'. This single boolean drives all conditional styling.
Update Geometric Hero
Conditional gradient classes: isPinkSlipsSeries ? 'from-pink-600 to-rose-700' : 'from-purple-600 to-indigo-700'. Same for pattern overlays and accent colors.
Add Dual Logo Section
When isPinkSlipsSeries is true, show client logo alongside JJM logo. Client logos stored in /images/clients/pink-slips-nsw/.
Update Series Badge
Replace category badge with series badge: 'Part {number} - Pink Slips NSW'. Part number extracted from frontmatter.
Brand Social Cards
Add branding='pink-slips-nsw' prop to SocialMediaCard component. Triggers pink gradient backgrounds and client logo in footer.
What Changed
- 1
Hero: Pink gradient background
- 2
Badge: 'Part X - Pink Slips NSW'
- 3
Logos: Dual display (client + JJM)
- 4
Social cards: Pink-branded patterns
The beauty of this approach: every new feature we add to the blog layout automatically applies to branded series. We don't maintain separate codebases. When we improve the standard layout, Pink Slips posts get the improvement too—just with pink styling.
Hero Section Changes
Geometric Hero Overrides
Background Gradient
from-pink-600 to-rose-700Pattern Overlay
bg-pink-500/10Accent Text
text-pink-200, text-rose-100Badge Style
bg-pink-500/20 border-pink-400/30The Key Insight
Don't create separate layouts for branded series. Use conditional styling. One codebase, multiple brand identities.
Social Card Branding
The SocialMediaCard component accepts a branding prop that triggers client-specific styling:
Standard (no branding prop)
Purple/indigo gradients, JJM logo only
branding="pink-slips-nsw"
Pink/rose gradients, client logo in footer
Each social card is downloadable as a 1080x1080 image. The branding prop ensures the downloaded image includes client branding—perfect for sharing on social media as client-branded content.
Time Investment
Two hours to create a reusable branding system. Future branded series will take even less time.
Future branded series just need: a color scheme, a helper boolean, and conditional class overrides. No new layouts.
— Jordan James
The 2-hour investment creates a pattern that scales. The next branded series (maybe for another client) will take 30 minutes—just define the color scheme and add the conditional checks. The layout, components, and logic are already built.
Lessons Learned
5 Key Takeaways
- Conditional styling > separate layouts - One codebase, multiple brand identities. New features apply to all.
- Boolean helpers simplify logic - isPinkSlipsSeries drives all conditional styling from one place.
- Client logos add legitimacy - Dual logo display shows partnership, not just agency work.
- Series numbering creates continuity - 'Part 1', 'Part 2' makes it clear this is ongoing work.
- Social cards need branding too - Downloadable images should include client branding for social sharing.
Pink Slips NSW Series
Social Media Carousel
8 cards • Download as ZIP (images) or PDF (LinkedIn)
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 JJM blog post. Purple gradients, standard layouts, generic styling.
The Transformation
Purple gradients, JJM logo only, generic styling
Pink gradients, dual logos, client-branded identity
What Changed
- 1
Hero: Pink gradient background
- 2
Badge: 'Part X - Pink Slips NSW'
- 3
Logos: Dual display (client + JJM)
- 4
Social cards: Pink-branded patterns
The Key Insight
Don't create separate layouts for branded series. Use conditional styling. One codebase, multiple brand identities.
Future branded series just need: a color scheme, a helper boolean, and conditional class overrides. No new layouts.
— Jordan James
Need a Branded Content System?
We build content systems that scale with your brand.
Related Services
Get Development Insights
Join our newsletter for behind-the-scenes development stories, AI workflow tips, and case studies from real client projects.
Subscribe NowThe Pattern Is Proven
Future branded series just need: a color scheme, a helper boolean, and conditional class overrides. No new layouts. No duplicated code. The foundation is set.
Two hours of work. Infinite scalability.
Need a Branded Content System?
We build content systems that scale with your brand. Whether it's client case studies, product launches, or campaign content—each with its own visual identity, all from one codebase.
Frequently Asked Questions
Why use conditional styling instead of separate layouts?▼
How do you add a new branded series?▼
Where are client logos stored?▼
/public/images/clients/[client-slug]/. For Pink Slips NSW, the logo is at /images/clients/pink-slips-nsw/logo.svg. The hero component conditionally renders the client logo when the series boolean is true.Do social cards include client branding when downloaded?▼
branding prop that triggers client-specific styling. When branding="pink-slips-nsw", the card uses pink gradients and includes the client logo in the footer. The downloaded 1080x1080 image includes all this branding—perfect for sharing on social media.Can clients use these branded posts for their own marketing?▼
Share This Article
Spread the knowledge