Design System WCAG AAA Contrast

High-Contrast Callout & Feedback Components

Designed to sit naturally on Stylchat's clean clay surfaces. Body text is always crisp ink (--clay-ink / #142C24 on light, pure white on dark) with distinct left indicator strips and soft tinted icon badges.

Alerts & Callout Banners

Notice, Tip, Important, Warning, Success, and Error.

Info: Automatic Sync

Your widget snippet updates automatically whenever changes are saved in the dashboard. There is no need to re-copy or redeploy script tags.

Tip: Automated CRM Enrichment

You can connect an n8n webhook to automatically look up customer order histories in WooCommerce before the chatbot responds.

Important: Zero Data Training Guarantee

Stylchat operates under a strict privacy guarantee: we never use your store documents, customer messages, or product catalogs to train AI models.

Warning: High Response Latency

Your self-hosted webhook response time averaged 3.2 seconds over the last hour. Consider enabling edge caching or reviewing server concurrency.

Success: Webhook Connected

All 3 automated test payloads completed with status 200 OK. The live assistant is now ready to receive store visitor conversations.

Error: Webhook Authentication Failed

The incoming webhook signature could not be verified with your HMAC shared secret. Please re-enter your secret key in Integration Settings.

Badges & Status Indicators

High-contrast, legible status tags across all themes.

Status Badges

Info / Notice

Tip

Important

Warning / In Progress

Live / Connected

Offline / Error

Brand & Pastel Accents

Default Neutral

Brand Primary

Mint

Peach

Lilac

Butter

Blue

State Feedback Cards

Full card states for successes, errors, and empty views.

Payment Verified

Your license key has been activated. You now have full access to BYOI widget configurations.

Connection Timed Out

The external service took too long to reply. Check your server logs or try again.