Design System
The visual language for SocialHub — where CMs live after midnight. Dark-mode first, keyboard-driven, built for the speed of social media.
v2.0 · Pixel 🎨 × Aria 🧭
01 Color Palette
Coral / Mint / Gold brand palette with semantic, social, and surface tokens.
Brand Colors
Coral
#FF5C38
Mint
#00D4AA
Gold
#FFB800
Brand Gradient
Coral → Gold
Semantic
Success
#16A34A
Warning
#CA8A04
Danger
#DC2626
Info
#5B8DEF
AI Elements
✨ AI Draft
AI Background
purple/8% + dashed border
AI Purple
#A78BFA
Social Media
Surfaces (Theme-Aware)
Base--bg-base
Surface--bg-surface
Elevated--bg-elevated
Hover--bg-hover
Active--bg-active
Post Statuses
● Draft
● In Review
● Approved
● Scheduled
● Published
● Rejected
✨ AI Draft
02 Typography
Syne 800 for display · DM Sans for body · JetBrains Mono for data.
Schedule smarter, not harder
Your brands, one calendar
Content that sounds like your brand
Unified inbox, zero context-switching
Manage social media accounts from one place. Generate AI-powered captions that match each brand's voice, schedule across platforms, and let clients approve content with a single link.
Last published 3 hours ago · 2.4K reach · 89 interactions
app.socialhub.com/approve/haiku-farms?pin=8842
03 Components
Buttons, badges, inputs, toasts, and navigation primitives.
Buttons
Platform & Status Badges
📸 Instagram
𝕏 Twitter
📘 Facebook
♪ TikTok
💼 LinkedIn
💬 WhatsApp
Form Inputs
Toggle Switches
Chips / Tags
📸 Instagram ✕
📘 Facebook
+ Add
Toast Notifications
Post published
Instagram post for Haiku Farms is now live.
Publishing failed
Facebook token expired. Reconnect in Settings.
Client approved 3/5 posts
Haiku Farms · Week of April 7–11
Crisis detected
12 negative comments in 30 min on Haiku Farms
04 Dashboard
Full page mockup — the CM's 9am view. Stats, activity, pending approvals, brand health.
Buen día, JM 👋
Tienes 3 pendientes hoy en Haiku Farms
📅 Posts hoy
2
Programados
⏳ En revisión
1
Pendiente del cliente
💬 Inbox
3
🔴 1 urgente
📊 Engagement
4.8%
▲ +0.6% vs mar
Publicando hoy
13:00 · 🌮 Tacos de birria temporada
Haiku Farms · Instagram
Scheduled
Haiku Farms · Instagram
18:00 · 🏋️ Programa 8 semanas
FitZone GYM · Facebook
Approved
FitZone GYM · Facebook
Actividad reciente
Cliente aprobó 2 posts de la semana
hace 1h
AI generó 3 borradores para Lux+
hace 2h
Comentario negativo en Haiku Farms
hace 3h
Necesita tu atención
HF
Aprobación pendiente
Cliente no ha respondido — 3 posts
6h left
!
3 comentarios sin responder
→
Más reciente: hace 45 min
📊
Reporte de Marzo listo
→
Haiku Farms · Listo para enviar
Tus marcas
HF
Haiku Farms
3 cuentas · 🟢 activa
FZ
FitZone GYM
4 cuentas · 🟡 1 draft
+ Agregar marca
05 Calendar View
Week view with platform rows, drag-to-reschedule slots, and post status colors.
LUN 6
MAR 7
MIÉ 8
JUE 9
VIE 10
IG
10:00
🌮 Tacos birria⠿
18:00
🍕 Pizza higo⠿
12:00
📸 Reel promo⠿
FB
15:00
🏋️ Programa 8sem⠿
💼 Case study Q1
⠿
𝕏
09:00
📈 Engagement tip⠿
🎉 Viernes especial
⠿
TT
20:00
🎬 Behind scenes⠿
Approved
Scheduled
In Review
Draft
⠿ Drag to reschedule · Click empty cell to create
06 Compose
Split-view editor: AI-assisted writing on the left, live social preview on the right.
← Cancelar
Nuevo Post — Haiku Farms
07 Inbox
Three-panel layout: brands → messages → detail + AI suggestion. Superhuman-style.
S
🏠
📅
💬3
📊
Marcas
Todas 3
Haiku Farms 2
FitZone GYM 1
Lux+ Consulting
Filtros
💬 DMs
📝 Comentarios
📣 Menciones
Urgentes
@foodlover_mx IG
Cuándo regresan las pizzas de higo? 🍕❤️
5m
Pendientes
Carlos H. FB
Pésimo servicio, esperé 40 min...
15m
+52 55 1234 WA
Quiero reservar mesa para 6
1h
Resueltos (12 hoy)
Todos respondidos ✓
@foodlover_mx
En: Post del Lun 7 Abr — Tacos birria
✨ Sugerencia de IA
¡Hola @foodlover_mx! 😊 Tenemos excelentes noticias — las pizzas de higo regresan este viernes 11. ¡No te las pierdas! 🍕🎉
Asignar: Yo ▾
Prioridad: Urgente ▾
E marcar resuelto · R responder · A asignar
08 Approval Portal
Mobile-first client view — no account, no friction. What the client sees on their cracked iPhone.
Active — Posts to Review
9:41
🌮 Haiku Farms
Contenido para revisión · Abril 7–11
1 de 3 aprobados
Pendientes
Aprobados
🌮
🌮 Nuevos tacos de temporada: birria con consomé y cebolla caramelizada. Solo este mes. #TacosTuesday #FoodMX
🍕
🍕 ¡La espera terminó! Pizza de higo y prosciutto — masa artesanal, mozzarella fresca...
Complete — All Reviewed
9:44
🌮 Haiku Farms
Contenido revisado · Abril 7–11
3 de 3 aprobados
✅
¡Todo revisado!
3 posts aprobados, 0 pendientes.
Tu CM ya puede programar el contenido. Gracias 🙌
Tu CM ya puede programar el contenido. Gracias 🙌
Access — PIN Entry
9:40
S
Haiku Farms
Contenido pendiente de revisión
Ingresa tu código:
8
8
¿Olvidaste el código? → Pedir nuevo
09 Command Palette
⌘K — search anything, jump anywhere, run actions. Superhuman-speed navigation.
ESC
Quick Actions
New Post
⌘N
Generate with AI
⌘⇧G
Navigation
Go to Dashboard
GD
Go to Calendar
GC
Go to Inbox
GI
Go to Reports
GR
Switch Brand
Haiku Farms
FitZone GYM
Lux+ Consulting
↑↓ navigate ⏎ select esc close
Tip: type "switch haiku" to change brand
10 Empty States
Every blank screen has a clear action — not just text, but a path forward.
No hay posts esta semana
Tu calendario está vacío. ¿Genero la semana completa con IA?
¡Todo al día!
No hay mensajes pendientes. Buen trabajo.
Última actualización: hace 2 min
Tu primera marca
La configuración tarda 2 minutos. Nombre, industria, tono de voz.
Sin datos de reportes
Conecta al menos una cuenta social para generar reportes automáticos.
Conecta una red social
Instagram, Facebook, X, TikTok, LinkedIn — el OAuth tarda segundos.
📸 Instagram
📘 Facebook
𝕏 Twitter
Tu primer post
Describe qué quieres comunicar y la IA genera el caption en el tono de tu marca.
11 Keyboard Shortcuts
Linear-inspired, Superhuman-fast. Every action ≤2 keystrokes.
Go to DashboardGD
Go to CalendarGC
Go to InboxGI
Go to ReportsGR
Command Palette⌘K
New Post⌘N
Mark ResolvedE
ReplyR
AssignA
Navigate Up/DownJK
Collapse Sidebar[
Show All Shortcuts?
SocialHub
Design System v2.0
Crafted by Pixel 🎨 × Aria 🧭 · April 2026
Coral / Mint / Gold
·
Syne + Jakarta Sans
·
Dark-mode first
·
Keyboard-driven