Social setup · design system

Tokens & components

The vocabulary the setup wizard is built from. Recoloured SEO-setup language on the Social category accent.

Colour

Social is the violet category in the real app (--gua-cat-social). Primary CTA = the module accent, like SEO uses its blue. ✨ AI actions use the violet→pink brand gradient.

Social accent
#7c3aed
Accent soft
violet 10%
AI gradient
violet→pink
Done
#0d9488
Skipped
#f59e0b
Ink
#0f172a

Type

Plus Jakarta Sans · display
DM Sans · body copy, helper text, and field input. Quietly readable beneath the bolder display.

Buttons & badges

Done Current optional Skipped ✨ AI idea requested scheduled

Step-row states

The vertical stepper marker has four meaningful states. Optional steps never read as “locked” — they stay openable.

✓
Done
Collapsed rows show a one-line summary · “4 platforms · Asia/Kolkata”
Review / edit ▾
2
Current
Exactly one row — the first not-done — is current & expanded (violet ring).
▾
3
Optional optional
Skippable, not-done, not gated — dashed marker, openable any time.
Open ▾
⤼
Skipped Skipped
An explicit “skip” decision (e.g. starter series) — recorded, not blocking.
Open ▾

AI candidate cards

Suggest jobs are output-only — they return candidates that the user reviews then accepts (the accept POST is what persists). Mirrors the SEO TopicMapStep pattern.

✨ Suggested pillars — accept the ones you want
🎯 Positioning & POV
Why: Your messaging leans on a contrarian take — a recurring POV pillar compounds it.
🤝 Client proof
Why: Audience section flags trust as the top objection.

BYOK no-key fallback

When no tenant/user AI key is configured, ✨ suggestion is replaced by this banner — and manual entry stays fully usable so the step still completes.

No AI provider key configured
Add a key to suggest tones & audiences from the brand profile. You can still add them manually below.

Readiness meter

✓
Voice
Accepted · required for every AI step
Ready
contentStrategy depth
6 pillars detected — we’ll pre-seed them in step 4