Quo (formerly OpenPhone)

Quo (formerly OpenPhone)

Preview image. Unlock full-res

High-contrast digital workspace.

Industrysaas
Palette
#ffffff
#000000
#f7f6f5
#4d4d4d
#cccccc
#0a0a0c
#edfc47

Quo adopts a stark, high-contrast digital workspace aesthetic: a spacious white canvas punctuated by bold black typography and strategic use of a single vivid lime accent. The design feels direct and functional, leveraging strong visual hierarchy created by heavy black text and subtle, almost invisible UI elements. Components are lightweight with minimal borders, emphasizing content over chrome, and utilizing soft gray backgrounds for subtle differentiation. Prioritize Ink Black (#000000) for primary text and calls to action against Canvas White (#ffffff). Use Roobert 500 with tight letter-spacing for all headlines and impactful text, emphasizing confidence. Apply Surface Gray (#f7f6f5) for subtle background differentiation on cards and soft buttons, maintaining a muted base. Incorporate Lime Accent (#edfc47) sparingly for interactive elements, highlights, and decorative touches to provide energetic punctuation. Ensure generous internal padding of 32px for main content cards to create a spacious feel. Maintain a clear visual hierarchy with strong contrast between text and background, adhering to AAA accessibility standards where possible. Utilize 10px border radii for most containers and 6px for buttons, with 100px for pill-shaped elements like tags. Avoid using multiple accent colors; rely on Lime Accent (#edfc47) as the sole chromatic highlight. Do not use heavy shadows or gradients; components should generally remain flat or subtly elevated with minimal box-shadows. Do not introduce complex background patterns; maintain large areas of Canvas White (#ffffff) or Surface Gray (#f7f6f5). Do not use generic system fonts for headlines; always default to Roobert 500 for brand consistency. Avoid excessive use of borders; elements should primarily rely on background color to define their boundaries. Do not use rounded corners larger than 10px for cards or smaller than 6px for active buttons. Do not clutter layouts; aim for comfortable density and clear visual separation with generous spacing.

More like this