Designing a brand system that holds 13 products
How we use CSS variables to give every J7Soft sub-product its own accent without breaking the parent brand.
By Kamga Simo Junior
J7Soft has 13 sub-products, each with its own color palette. The challenge: every product page should feel like the product, while the global navigation, type, and layout stay identical so visitors don't think they've left the site.
CSS variables, scoped per route
The pattern is borrowed from Stripe's sub-brand system. Each /products/[slug] page wraps its content in a <ProductAccentProvider> that sets --color-product-accent on the route shell. Components reference bg-product-accent and text-product-accent-fg — never hard-coded colors.
Functional UI stays neutral
Green for success, red for danger, blue for info — never the brand colors. This is non-negotiable: if --color-success were the brand purple, users wouldn't be able to learn that purple means success on one page and brand on another.