About

Pluma is Customer.io's design system—our shared visual and interactive language tailor-made to craft premium and consistent products for our customers. Guided by our core values and design principles, we achieve this goal through a collection of components, styles, and guidelines designed to create a unified experience across all our products.

For any questions or feedback about the system, feel free to reach out in the #pluma channel on Slack.

Technical overview

Pluma offers APIs in both React and Ember frameworks through shared utilities, TypeScript types, and common CSS styles powered by Vanilla Extract.

We use Storybook to render and test components. Storybook allows us to verify visual and behavioral parity for all components regardless of framework.

Lifecycle

Pluma follows a streamlined process that fosters a tight working relationship between Product Designers and Front End Engineers. Design specifications are created in Figma. Once approved, a Front End Engineer implements the new component or feature. Product Designers and Engineers review the work, and the component or feature is published to production upon final approval. This workflow guarantees a high bar for quality for our components with an emphasis on brand consistency and user experience.

Accessibility

Accessibility is a cornerstone of Pluma's design principles. With customers across the globe, it's important for us that as many users as possible can engage with our products. Pluma components are built following WCAG 2.2 guidelines to uphold this principle and provide a universally accessible user experience.

History

As Customer.io grew, we needed a system to provide a consistent UI experience across our core product. With that growth, new products such as Pipelines, Parcel, and Hydra were built to serve new customer needs. Multiple products meant multiple possible points of divergence and a gradual loss of brand identity and consistency.

A design system would solve those problems and thus Pluma was born.

Pluma serves as the next step in our customer-facing products. Providing a framework to build components in both React and Ember, it allows us the flexibility to create consistent user experiences across the Customer.io brand.