Piotr Adam Kwiatkowski

Blueprint

Role: Product Designer
Skills: User research, UX and UI Design, Interaction, Motion and Icon Design.

Blueprint is an open-source design system implemented as a collection of React components and optimised for desktop applications.

Project purpose

Until a few years ago, the user interfaces of Palantir's core products were built in Java. It was the good old type of software you had to download and install. Web technologies were not mature enough to build performant and maintainable analytics software, but that started to change as browsers evolved and new web technologies were developed. Suddenly, we could deliver the full depth of our data analysis software right in the browser.

We soon realised something important was missing. Our work was siloed: platform teams were not leveraging each other's work, forward-deployed engineers built one-off solutions, and our designers and product engineers often ended up reinventing the wheel. As a result, our ecosystem of applications lacked a cohesive user experience, inefficiencies slowed us down, and the quality of our work suffered.

The solution

Blueprint establishes a common design language and provides an implementation of certain design principles that we hold to be important for high quality desktop applications.

The architecture was guided by a set of principles that we believe are critical for effective design systems.

Accessibility - Colours have been designed to be accessible to as many people as possible, even those who are visually impaired or experiencing any kind of colourblindness. Our colours have not only been chosen to go well together but to also adhere to WCAG 2.0 standards.

Blueprint's colour scheme generator for data visualizations.

Composability - Blueprint is composed of styles, interactive components and reusable high-level concepts such as visual intents, actions, minimal states, and more. Any of these atomic concepts can be applied to elements across the board - this is what makes our design system composable.

Blueprint's atoms and molecules.

Extensibility - Blueprint lays a solid foundation. Any developer can build on top it, in addition to customizing what is provided out-of-the-box. This is because interactive components publicly expose their properties and functions.

Data Density - Blueprint has been designed to support high scale data applications. We've made sure that the design system is able to display large quantities of information in a clear way.

Blueprint in action

The approach

Our ultimate goal was to build a design system that allowed us to:

Focus on what really matters. By providing reliable defaults for visuals and interactions that are easy to use and pass a high quality bar, we free our designers and engineers from recreating the same work over and over again, thus allowing them to use their time and talent to solve critical problems.

Bridge the gap between design and engineering. Designers spend a disproportionate amount of time crafting mockups and prototypes that are idealistic representations of how the software should look and behave, trying desperately to communicate their ideas to developers and product stakeholders. Throughout this process, many details get lost in translation because of the inefficiencies of our tools. Better tools bridge the communication gap, allowing designers and engineers to speak the same language and maximize each other's impact.

Make it work and feel like Palantir. Palantir platform stacks are configured based on specific customer workflows, which means that we might deploy a different set of platform capabilities from one use case to another depending on the analytical goal. By leveraging the same design system to build each capability, we ensure a consistent, high-quality user experience across the platform that sets clear expectations for our users - this helps make our ecosystem predictable and trustworthy.

Challenges

The biggest challenge we faced throughout this project was balancing the design and engineering priorities and concerns, whilst collaborating with the entire company. Since this project touched every part of our business, we needed to coordinate and get approval from many teams and stakeholders.

Final result

Blueprint is used by hundreds of forward-deployed engineers, product engineers, and designers at Palantir. It has become the foundation of our product design infrastructure.

Blueprint leverages open source technologies and is completely open source itself.

Blueprint provides both light and dark themes. Unified headers across all Palantir apps. Blueprint Chart provides responsive charting framework. Blueprint Table provides highly interactive table component. Blueprint provides over 300 UI icons in an icon font.

Thank you.