Tidepool Website Style Guide

Tidepool design system

Tidepool is growing. One of the challenges is maintaining consistency across our digital experiences. Our goal is to create a system that enables us to build harmonious user experiences. To address this challenge, we’ve worked to build a design language that exists at the intersection between design, code, brand and content design to foster communication between designers, developers, and content creators.

The Tidepool design system comprises abstractions that make it easier to do the right thing. It is meant to have space for flexibility, and anticipate and evolve with new and changing design requirements.

A byproduct of the development has been the creation of this styleguide documentation. This styleguide exists to be a centralized source of truth for the beginnings of our design principles, content guidelines, utilities and frontend components. It consists of working code, design guidelines and resources. It is a place for people familiar with Tidepool products, and for anyone wishing to learn more about our work.

Foundations

Our guiding design principles, guidelines for how we communicate and how we present our brand narrative are a set of our shared values that represent the foundational shared language at Tidepool.

Utilities

Our theme object stores our design system utilities that define each theme-specific type scale array, spacing scale array, color system, breakpoints, box shadow, animation, and border radius.

Elements

Elements are the building blocks of our components. They are atomic by nature and can be combined and reconfigured into many different use-cases.

Patterns

Patterns are currently marketing specific components that map one-to-one with the Contentful content model. We display usage statistics and pull patterns directly from the Contentful API.

Contributions

We hope to encourage others to contribute and write styles, components and guidelines in a way that can be folded back into the styleguide. We also hope to encourage following a practice of designing with a focus on negating eventual divergence, not by encouraging strict adherence to a set of guidelines that may not serve you, but to encourage evolving this documentation together to better serve users and the team.