Foundations

Icons are used to visually communicate core actions and concepts in the product. They are used to enhance the user experience and provide visual cues to help users understand the product.

Which helper to use for hover, pressed, disabled and scope backgrounds when you write your own styles for a Pluma component or a one-off element.

Guidelines for using motion purposefully, accessibly, and consistently across Customer.io interfaces.

Guiding ideas to building Customer.io interfaces.

Breakpoints, media queries, responsive style utilities and hooks for layouts that adapt to the viewport.

All Pluma components accept a set of utility props to aid with layout and styling.

Capitalization, punctuation, and how to format numbers, time, and dates.

How Customer.io sounds, how tone adjusts to context, and how to address people directly and inclusively.

Word choices to use consistently across Customer.io interfaces.

Copy rules for the Agent and other AI-driven features, including naming, hedging, and outcome-first framing.

Copy patterns for buttons, dialogs, empty states, onboarding, errors, and accessibility that span components.

How primitive and semantic tokens relate, how a semantic token's name reads, and how the color tokens use both.

Design tokens for colors, spacing, typography, and more

Palette primitives, semantic fills and text colors, the shared data visualization layer, and component colors.

Space, border width, and border radius tokens.

Font family, size, and weight primitives plus composite text styles.

Box shadow and filter shadow tokens for depth and focus.

Duration and easing tokens, with live previews of each timing and curve.

Fill and ring tokens for AI surfaces and affordances.