A quick note before we get into this week’s post: You’ll notice a few new faces start popping up as authors on our newsletters — including me!  👋 Hi! I'm Murphy, and I'm the Director of Design Systems here at Baseline, where I've been working closely with the team over the last three months or so. I've spent around 16 years in design, across product and design systems, and largely in consulting. I've worked with teams of every size, from founder-only to scale-up to enterprise, and systems that had to hold up across marketing sites, web apps, and native. I love how differently each one behaves, and the challenge each brings to the team it serves. You'll mostly hear from me on the systems side: how they get built, how they're governed, and what it takes for a team to carry one forward once we've gone.

Murphy Trueman

Director of Design Systems, Baseline Design

A while back I was rebuilding the component library for a marketing site. Every icon carried a brand texture, a fine grain pattern laid over the standard shapes. At hero scale, it looked fantastic. The texture had somewhere to live. But when the same icon appeared in a feature list at checkmark size, it turned into a flat gray, and the character was removed. The same was true for the secondary button, a textured gray sitting beside a bright primary, easily mistaken for a disabled control you weren't allowed to click.

In my mind, brand work and product work want different things. Brand wants room to be loud: a texture, a bold color, a headline that fills the screen. While product (generally) wants the small, but precise things that keep an interface usable: a control that reads at 14/16px, color that clears contrast, and a button that looks clickable. A lot of the difference comes down to scale. Brand tends to live large, on a hero or a poster; product lives small, in labels and dense rows. Try to serve both from one library, and one of them loses.

On that site the fix was small and specific: the texture would only appear above the size where it was visible, around 48px, and stay reserved for the large marketing graphics. Below that, we stripped it back and used plain icons. The textured button came out of the interactive set, with a clean outlined secondary in its place.

That rule was one instance of something we've seen a few times here at Baseline. A brand studio delivers a palette that photographs beautifully in the brand book, a handful of muted tones, and leaves marketing with almost nothing to make noise with on social. The product, meanwhile, gets colors that haven't been checked for contrast, type weights that are too light to survive at dashboard scale, and brand rules that haven't considered information density, or the complex data holding up the product.

The move is to stop running it as one palette. Marketing takes the full expressive range into its own file. Product gets a tested, semantic set built to handle small text and dense interfaces. A brand color can look right across a campaign and still miss the bar the moment it's carrying a small label.

There's a version of this at the token level too. Both sides get their own primitives and their own semantic tokens. But what changes is how each layer gets handled. On the product side, the semantic layer stays locked tight: designers reach for named roles vetted for contrast, the raw values kept out of reach, so the same token behaves the same way every time. Brand runs its own tiers with a lot more give, a semantic layer built to stretch as the work swings from one campaign to the next, or to cater to visual interest and differentiation throughout the website. Both are properly tiered, built to serve different tolerances, and intentionally kept apart.

The instinct that gets us into trouble is, unfortunately, the simpler one: when you want a single system, one place, one palette, everything reconciled. It feels like good practice. But brand and product are two audiences with two jobs, and the most useful thing you can do is give each of them room. Let the brand treatments have their own home and let the product surface stay narrow. It looks less unified on a slide. It holds up far better in use.

If you're staring at a system that's trying to be expressive and precise in the same breath, and the two keep fighting, that fight is doing you a favor. If you're working through where to draw that line, we'd love to hear where you're at and see if we can help.

Thanks for reading, and see you next week! 👋 💛
– Murphy

In case you missed it, our very own Katie Meza has a new course: Figma, Beyond the Basics — For Brand & Marketing Creatives, releasing this month! It's built for anyone who came up in the Adobe suite and still feels like Figma is a translation exercise, rather than second nature. 

Over the week you'll learn how a file is actually built, get comfortable with auto layout, components, and variants, and set up styles you can reuse instead of rebuilding from scratch every time. There's a ton of tips and tricks along the way too, and you'll walk away with a real brand style guide, published as a library.