RudderStack
Creating Blueprint, RudderStack’s web design system
Before Blueprint and Dory updates (Left). After Blueprint and Dory updates (Right)
Background
RudderStack needed to establish credibility with Enterprise buyers against established competitors like Segment and Hightouch. Our existing repository of components weren't refined enough to support our new brand direction (internally called Dory) which repositioned RudderStack as a trustworthy, confident Enterprise solution.
The upcoming launch of RudderStack Data Apps presented the perfect opportunity to debut Dory on our website and demonstrate our Enterprise readiness.
My Role
I was the project lead, responsible for conducting a components audit, refining components, writing UX content strategy, and establishing a design-to-dev workflow. My work focused on improving cross-team adoption and leading Blueprint's creation to support our marketing team's enterprise market expansion strategy.
Discovery
I started with a site wide audit to identify inconsistencies in current system
Over 100 components were in use, many duplicative or slightly varied versions of the same thing.
Headers, forms, and layouts lacked consistency and reusability. 18 different nav patterns, 13 input styles, all built in silos.
CRO components didn't exist. Nothing was modular enough to test or iterate quickly.
Typography and mobile styles were inconsistent, and components weren't built with SEO in mind.
The deeper issue was process:
No shared workflow connected design to development. Rogue development was occurring.
Marketing team to development handoffs often led to the inconsistent modules being built, leading to wasted time and inconsistent UX.
No clear workflow connecting design decisions to A/B testing infrastructure, testing done independently by the growth team leading to a lot of one offs were being created.
This audit helped me define what to refine, what to rebuild, and what needed to be created from scratch to scale with our new brand direction.
Approach
This was a cross-functional effort that became a priority initiative for Web Presence. I partnered closely with Julianne Vinh (Senior Brand Designer) on design updates and with Gerlando Piro (Head of Web) on front-end changes. Bi-weekly design/dev syncs with stakeholders like Eric Dodds (Head of Product) and Eric Omwega (COO) were held.
We took a systemized approach to building. I partnered closely with development to ensure components were simple, reusable, and built with tokens and shared language. We connected design to development through a structured workflow using Figma branching, Storybook, and Chromatic, with all DS docs + communication in Notion and zoom training sessions to support Figma education.
Key takeaways from research:
Lean into the blue. People associate it with RudderStack
“RudderStack’s choice of a darker, more serious blue conveys trust and reliability.”
“I don't feel like we have a brand identity because our color palette is broad and I've seen that some of the competitors have 2-4 colors. I think we use every color as long as it's pastel.”
“We’re choosing to retire teal since it’s a primary brand color for key competitors. We’re also choosing to consolidate the color palette to help make cohesion easier”
Make it punchy, but keep it simple
47% of research participants mentioned brand cleanliness, simplicity, straightforwardness, and transparency as key elements to maintain or aspire to
“Minimalism serves us well with our development audience... We aren’t doing too much.”
“The current visual language is leaning [too] “fun.” Move it closer to “refined.”
“I think our brand "design" feels somewhat immature by comparison [to our competitors].”
Execution
Established a token system
Design documentation alone wasn’t cutting it.
We introduced a token system as the foundation for all components to help scale design consistency. Rather than hard coding guessed values, we defined tokens for color, spacing, typography, dimension, border, and opacity- providing our developers a single source of truth. This eliminated guesswork, ensured brand consistency, and allowed the team to move faster with tighter alignment across design and engineering.
Reference tokens (color palette): Figma variables, token studio, and Design system figma file
Made the system responsive
Having a responsive website builds credibility and enhances user experience. It also directly impacts SEO: responsive sites rank higher, load faster, and deliver cleaner markup. We designed mobile first, scaling grids, typography, and spacing systematically using responsive units and set breakpoints to ensure consistent behavior across screen sizes.
Typography vs breakpoints
Standardized shared components
Core components (hero sections, testimonials, blocks) already existed, but were built slightly differently across pages. We cleaned them up and standardized them into flexible, reusable modules with consistent spacing, alignment, and responsive behavior. This ensured sections like the hero across Case Studies, Webinars, and Events followed the same structure, making the system more maintainable and easier to scale.
Screens show Dory updates to the website
Documented the system for adoption
We didn’t just build the system, we made it easy to use. Notion became the source of truth with clear guidelines for design, content, and development. I created reusable Figma templates for common page types, helping marketing, design, and engineering stay aligned and move faster. Storybook showed how components worked in code, and Chromatic with Figma branching kept design and dev in sync.
Example DS file for Checkbox
Bringing Dory to Life
Once the system was in place, we rolled out Dory: RudderStack’s updated brand direction. We updated typography, layouts, and introduced a refined color palette to reflect our move toward Enterprise. We made component-level updates across the system, including buttons, cards, forms, and navigation elements. With everything standardized, we updated the homepage, case studies, integration directory, events, product pages, and use cases quickly and consistently, without slowing down builds.
Outcomes
Creating Blueprint gave us a solid foundation to scale design across the site and confidently launch the new brand, Dory. It reduced inconsistencies, improved team alignment, and helped us move faster without compromising design or dev quality. By connecting design to development through tokens, documentation, and shared workflows, we enabled a 25% increase in feature development speed. After the Dory rollout, we saw stronger engagement across key entry points, especially the homepage, where click-throughs to product, use case, and pricing pages increased. We also improved Core Web Vitals across key pages by streamlining layouts, reducing visual shifts, and optimizing component performance.
"Suhani is one of the most determined, quietly unstoppable creatives I’ve ever had the privilege to work with. At RudderStack, she took our boring, no-frills website and turned it into something alive—with motion, personality, and fun. What I admired most was how she did it. She just works—steadily, thoughtfully—and somehow always pulls off the impossible. She delivers the best possible version every time. You give her a direction, and she’ll work through so many concepts you’ll start to wonder if what she’s proposing is even possible—it is. She’s already checked. Suhani doesn’t demand attention, but when she speaks, you listen. Not just because of her dry, self-aware humor that makes you laugh even in high-stress moments, but because she’s whip-smart and, frankly, annoyingly right about most things. She has this quiet, effortless way of making everything around her connect. She’s not just part of a team; she’s the piece that makes the team whole."
Steve Perkins
Head of Design @RudderStack