Designing a Clearer, Faster, More Connected Material

What does a good security interface feel like in the course of real, day-to-day work? It should help people follow threads quickly, act decisively, and see the right context at the right time. Here's what shaped our redesign of Material—and what it unlocks.

Material has come a long way since I joined in 2022. At the time, each feature had a clear purpose and worked well in isolation. But as our capabilities expanded, the number of features and components - and their complexity - grew rapidly. Over time, patterns started to diverge, and the product became harder to navigate.

Everything still worked, but even simple workflows required mental overhead.

Teams use Material to protect the systems that power modern work—email, documents, accounts. It’s high-stakes, high-pressure stuff, and clarity matters. This redesign was about making investigative workflows faster, more intuitive, and less mentally taxing. We reorganized, refactored, and rethought how the pieces fit together—so the product stays powerful, but feels a whole lot easier to move through.

First things first (and why sprinkles belong on cupcakes, not interfaces)

Efficiency starts with clarity. That means a clean visual hierarchy, where every element has a job and nothing is just... there.

My favorite part of a redesign is exploring every possible direction—even the ridiculous ones—with a great team to reel you in when it goes too far. That’s how you get to the good stuff: try everything, no fear, no ego, and eventually, you land on something that lets the product and its vision shine.

‍

Then, we updated our typeface to something more legible and easier on the eyes—an important change, since so much of the interface is built around text. We also chose a complementary monospace font for a softer switch between words and code.

Next, we took a closer look at icons, avatars, glyphs, separators, strokes, and shadows. We removed anything that didn’t serve a clear purpose or improve readability. The decorative extras—what I like to call “sprinkles”—might look fun, but they add noise, and take away from moments where color, iconography, and key words need to stand out.

We also improved color contrast where it counts, making it easier to scan quickly.

Speaking of color…

The case for Blurby

We changed our accent color from a muted, cool blue to a warmer and more saturated mix of blue and purple, and we’ve been calling it “Blurby.” No, it’s not a revolutionary name, but it gets the job done.

Blurby plays nicely with intentionally loud status-based colors across Material. For example, "severity" uses warm tones, "progress" uses mostly cool tones, and we needed something that wouldn’t compete. Blurby is calm and complementary, giving key actions just enough emphasis without adding excess visual noise. It helps important things stand out, without shouting over everything else.

Moving laterally

Investigations don’t follow a straight line. A security analyst might jump from an issue to an impacted account, to a message, to another account, back to the issue, and on it goes. When that happens, the content has to display quickly and maintain context. If it doesn’t, the investigation slows down, gets frustrating, and risks missing something important.

With our updated design system, we focused on making that kind of lateral movement fast and fluid by:

• Displaying content in quick sheets instead of loading entirely new pages
• Enabling sheet stacking, so users can jump between related entities without losing momentum
• Eliminating dead ends: related data is surfaced and linked automatically
• Making transitional animations quicker and sharper
• And coming soon — helpful contextual hover states and sheet-by-sheet table row pagination. We're constantly looking for more ways to increase speed and efficiency during the investigative process.

Flexibility

Our users don’t work in a one-size-fits-all way. We've spoken to a lot of teams and analysts, and everyone has their own workflow shaped by the unique needs of their organization.

So we designed for flexibility with:

• Modular filter-building, so table contents can be narrowed down based on precise criteria
• A command menu for power users who prefer to use keyboard shortcuts to get things done faster
• And coming soon — dark mode, font size preferences, and more. We know investigative work can be intense, so we’re looking for ways to give users more control over how their workspace feels.

Consistency (and something about blueberries)

Consistency is one of those things designers mention a lot. You know it matters—but why?

Imagine eating blueberries. The first one is sweet, delicious, perfect texture. The next is dense, sour, weirdly squishy. Ew. The next one is good but kind of firm. The next? Disgusting. Well, I’m already exhausted.

And that’s just blueberries. Imagine trying to do mission-critical work where every pattern and visual treatment is like a new mysterious blueberry—ready to delight or betray. Our app had started to feel that way. Buttons, dropdowns, badges, filters—they looked alike but behaved differently, or looked different but did the same thing.

That inconsistency created friction. It pulled attention away from meaningful work and added unnecessary overhead to everyday tasks.

We fixed that by auditing the interface, standardizing behavior, and eliminating redundant patterns. We also focused on the details—loading states, click targets, transition timing—to make every interaction feel smoother and more predictable.

The result is a cleaner, more consistent interface that’s easier to navigate—and easier to trust. A perfectly textured, sweet blueberry, every time. 🫐

A note on process

We could have built this whole thing from scratch—meticulously crafting each atom, defining every margin, padding, border radius, and interaction state. A fully bespoke design system—the dream, right?

But it would have pulled time and attention away from the bigger picture: how all those components work together in the interface, how they form patterns that support our unique use cases, and how they ultimately shape the experience of using Material.

So we made a key decision early on to build on Radix. That choice let us move faster, stay consistent, and focus on the problems that matter most to our customers.

Where we're headed

This redesign lays the groundwork for a more powerful, customizable, and trustworthy Material. It’s not the finish line—it’s the foundation.

With this new design in place, we’re continuing to expand user controls, unify patterns across the product, and evolve our workflows alongside new capabilities.

And as always, we’re listening. If you have feedback, questions, or ideas—we’d love to hear them.

‍