In Progress
Compass and AI
Compass and AI components are building blocks that surface Basis generated content, actions, or feedback and require distinct design patterns to communicate uncertainty, latency, and human-override affordances that traditional components do not need.
Anatomy
Compass Branding
Compass is the Basis AI built to assist user with omni-channel advertising.
Default
Short
Symbol
Cool palette
Warm palette
Variants
Behaviors
Best Practices
Skeleton Loaders
Use skeleton screens over generic spinners for chat loading states. Skeleton screens focus the user's attention on progress rather than waiting time, creating the perception of faster load times. They also provide structural context for what is about to appear, reducing disorientation when content arrives.
Do
Don't
Chat bubble alignment
Align sent and received messages consistently. Place outgoing messages on the right and incoming messages on the left. This creates a clear visual hierarchy and a natural conversational flow that users expect. ²
Do
Don't
More
Additional Reading
Skeleton Screens 101 — Nielsen Norman Group https://www.nngroup.com/articles/skeleton-screens/
Chat UI Design: How to Build Effective Chat Interfaces in 2026 — https://www.uxpin.com/studio/blog/chat-user-interface-design/