Anti-patterns

The list of things to never ship in Customer.io product UI. Each is a real drift seen in agent-generated or rushed output.

Deprecations to avoid in any generated code

• variant="warning" on Banner — deprecated, use variant="caution".
• isError on Button — deprecated, use isDanger.
• unsafe_isActive — deprecated, use isActive.
• onSortingChange top-level on DataTable — deprecated, use sorting.onChange.
• color-banner-warning-* tokens — deprecated, use color-banner-caution-*.

Component misuse

• Native HTML <button>, <select>, or <input> when Pluma equivalents exist.
• Custom modals or dropdowns built from <div>s.
• DataTable used for page layout — use Box or Grid.
• Label used for numbers (use Badge) or interactive user-generated tags (use Tag).
• Banner used for field errors (use inline form errors) or action confirmations (use Snackbar).
• Multiple primary buttons on one screen.
• Multiple primary actions in a single Banner.
• Native <select> when there are more than 10 options — use Combobox.

Visual and structural

• Inline hex values. Always use Pluma tokens. No exceptions.
• Blue primary buttons. The brand primary is color-surface-accent (teal_spruce — a dark, spruce-leaning teal). Blue tokens are reserved for information, focus rings, and the Label blue semantic.
• Arbitrary pixel padding values. Use the sanctioned spacing scale (space-100, space-200, space-300, space-400) per Refinement levers.
• flex or inline-style overrides on split panels. Use the three sanctioned ModalSplit ratios; custom ratios go through design review.
• Custom media slots beyond top, leading, trailing, bleed. Additional slots are a pattern, not a refinement.
• Density set per-field or per-row instead of per-surface.
• "Are you sure?" modals for non-destructive actions. Use specific verbs.
• Decorative shadows. Every shadow must communicate elevation.
• Color as the only signal of state. Always pair with an icon or text label.
• Title-case headers mixed with sentence-case in the same surface.

Voice violations

• Exclamation marks anywhere in product UI.
• "Click here" or pronoun-led button labels.
• Marketing-tone copy: "Awesome", "Amazing", "Just", "Simply".
• "Sorry" or "Oops" in error messages.
• "Users" — say "people".

See Voice for the full voice spec.

Escape hatches

When a rule must be broken:

• Prefer a documented exception in this pattern set over a one-off.
• Prefer a new token over an inline value.
• Prefer a composition of existing primitives over a new primitive.
• If you're reaching for any anti-pattern above, stop and ping #design-systems.

The default answer when an existing primitive or token doesn't fit is this is a new pattern, not a refinement. New patterns belong in Pluma. Inventing a primitive in code is the failure mode this entire spec exists to prevent.