XatCRMDesign system seed

Design system

The foundational primitives that every Xat CRM screen is built from.

Color

Indigo brand accent with semantic status colors on a slate neutral base.

brand
success
warning
danger
info

Buttons

Variants, sizes, and loading state.

Form controls

Inputs, labels, and textarea.

Badges

Semantic status pills.

NeutralOpenConnectedPendingFailedInfo

Avatars

Initials fallback, multiple sizes.

JCMLAKTR

Card

Composable surface.

WhatsApp inbox

Connect a number by scanning a QR code.

StatusConnected

Empty state

Zero-data guidance.

No conversations yet

When a customer messages a connected inbox, it will appear here.

Loading states

Skeletons preserve layout while content loads (preferred over a blank spinner).