Chat

Design System Specification v1.0 - Common Grounds Messaging

Design Principles

1. Slack's Professional Communication
Common Grounds provides real-time messaging with professional user management. Sky blue accent creates trust and clarity. No "Unknown User" errors - every participant has a real name and profile.
2. Discord's Smooth Experience
Optimized polling intervals prevent UI flashing. Messages sync smoothly with Google Sheets backend. Clean conversation deduplication and scalable architecture support 100+ concurrent users without degradation.

Logo

Color Palette

Deep Navy
#0F1419
Primary background
Dark Slate
#1E293B
Message containers, panels
Border Grey
#334155
Borders, dividers
Sky Blue
#38BDF8
Links, names, active states
Primary Text
#E2E8F0
Message content
Secondary Text
#64748B
Timestamps, metadata
Online Green
#22C55E
Online status
Error Red
#EF4444
Errors, disconnected

Typography

Common Grounds

SF Mono, 700 weight, 2.5rem

Active Conversations

SF Mono, 600 weight, 2rem

Professional real-time messaging with clean user management. Typography emphasizes readability for extended conversations with smooth, non-flashing updates.

System UI, 400 weight, 1rem

REAL_TIME_SYNC

SF Mono, 400 weight, 0.95rem

UI Components

Action Buttons

Kervin Leacock
Common Grounds provides professional messaging with real user management - no more "Unknown User" errors!
2:45 PM
Team Member
The smooth real-time updates make conversations feel natural and professional.
2:47 PM

Icon System

Message
User
Online
Conversation