Why I Love Style Guides
At Palantir, we believe that one of the most important deliverables we can provide our clients with is a “living” style guide.
Traditionally, a style guide serves as the canonical reference for how a brand (or organization) represents itself. It is meant to be a reference work — a place where people who might have to interact with the brand can make sure they’re following “the rules.” At Palantir, we believe that one of the most important deliverables we can provide our clients with is a “living” style guide for a client’s online presence, which also serves as a companion piece to other brand guidelines outside of the web. There’s a lot of nuance in that word — “living” — which I’ll summarize here.
For companies that offer products, it is important to have design assets that can be used and reused across their entire digital ecosystem. The living style guide is the culmination of how the visual theme and functionality come together, a marriage of design and code, and it’s meant to be a resource for anyone working on your web properties. It is more than a rule book about how things should look, it also documents:
- Your content model: what pieces of content appear in relation to each other
- Your user’s experience: how things on web pages respond and react to interaction
- Your approach to accessibility: how data can be marked up to optimize machine readability and engagement by all users
Another aspect of the “living” part of the style guide is that it is meant to be updated and changed over time. It isn’t a one-time deliverable, but something that grows, adapts, and morphs with your company and brand. By keeping it up-to-date (and “live”), you give your marketing and digital teams confidence that they’re always using the right assets.
Our Style Guide Process
Development of our Style Guides is really about enabling and encouraging best-practices and best-behavior in a digital ecosystem. We believe that by creating a canonical source of good documentation about an organization’s visual language, we can empower developers to use strategic thinking in implementing the design, adhere to web accessibility best practices, and be consistent (both internally and externally) making it easier for users to find information and use your website(s).
Our process typically begins with some type of design assets. Whether they be PSD (Photoshop) files, or working HTML & CSS, we work to break these assets down into design components. These components are always delivered as working HTML, CSS and JavaScript and are responsive, so no component is ever delivered without having been considered on phones, tablets, and desktop computers.
Once we have a library of design components, we start using those components to make pages and templates. These pages and templates are how folks start creating user-focussed content on the website(s).
With each component, documentation is created for what data variables (which are both the content of the component and the configuration of how it should look). Those data variables help us know how to create structures within our clients’ CMS so that these components can be used and reused throughout the site.
Some of our favorite client style guides
The Cleveland Clinic Style Guide is a great example of a client recognizing the need for cohesion in their websites and digital properties. We worked with the folks at The Cleveland Clinic to make sure their designs had key strategic initiatives built into them, so anywhere the visuals were being used, they were being used with purpose. This gave the Cleveland team a strong foundation on which they were able to grow and adapt. Here’s what Brian Gresh (previous Executive Director, Digital & Content Marketing) said in summary of the project:
“Palantir handed us an organized style guide package of designs and code that we could take and move forward for development. Additionally, we were able to adapt the style guide for internal needs that are more stylistic without altering Palantir’s designs. Our team didn’t have to worry about the technical side [of the style guide code], it just worked.”
The Foreign Affairs Style Guide highlights an important collaboration between Palantir and an external design team. We partnered with the folks at FA to implement designs that they had previously contracted another firm to develop. We took disparate assets (mostly Photoshop files) and turned them into this style guide from which we created a beautiful website that displayed consistently across all their product, promotional, issue, and article pages — all powered by Drupal.
The folks at AcademyHealth were looking for a strategic design partner to help define their web presence and effectively demonstrate the value of AcademyHealth membership. To do so, they needed to make it easy to find and explore relevant HSR research and topics drawn from a variety of sources. To that end, their style guide, needed to implement a design system that is cohesive and user-focused and power the front end of their Drupal 8 CMS.
The links above are just to the style guides for these projects. At Palantir, we not only develop the style guides, but also then use them to theme Drupal-powered sites like:
More Than “Just” a Deliverable
In my job, I talk a lot about living style guides. I’ve given presentations on them and regularly center project proposals around their delivery. Part of the reason I value style guides so much is because they are the first place in a project where all of Palantir’s main values come together. The 5 values that we practice, talk about, and observe each day at Palantir are: collaboration, communication, community, thinking ahead, and trust & respect.
The living style guide brings together each of these core values in a meaningful way. It facilitates collaboration and communication by serving as documentation for the user experience and the development team. It fosters community within the organizations that use them by inviting cross-disciplinary teams to have a voice and responsibility in how an organization presents itself. The living style guide forces technical teams to think ahead since it serves not only as documentation, but as a code repository that can be directly leveraged in the future. And, perhaps most importantly, the living style guide helps an organization build trust and respect with its users by providing consistent, well thought-out, carefully tested designs and interactions.
