# Social Dynamics AI Suite — Design System

The public website, customer dashboard and Super Admin portal use one shared design system.

## Core tokens

- Primary: `#5B5CF0`
- Primary gradient: `#5B5CF0` → `#8B5CF6`
- Accent: `#06B6D4`
- Ink: `#0F172A`
- Muted: `#64748B`
- Surface/background: `#FFFFFF` / `#F7F8FC`
- Success: `#12B76A`
- Warning: `#F59E0B`
- Danger: `#EF4444`
- Font: `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
- Corner radius: 11–18px for controls/cards; 28px for major CTA surfaces
- Spacing scale: `4, 8, 12, 16, 24, 32, 48, 64px`

## Responsive rules

The site is mobile-first in behavior. Marketing grids collapse at tablet/mobile widths, the customer/admin sidebar becomes an off-canvas menu, billing cards stack, tables scroll horizontally when needed, and forms collapse from two columns to one.

## UX principles

- One primary action per important surface.
- Provider secret keys never appear in browser-facing UI.
- Billing actions always expose loading/error states.
- Trial, past-due and suspended states are visible in contextual banners.
- Sample testimonials are explicitly labeled until replaced by verified customer quotes.