Olo colour represents a precise digital color language used across Olo touchpoints to ensure brand clarity and visual consistency. Designers and developers rely on this structured palette to communicate tone, hierarchy, and identity at every interaction.
Below is a detailed overview of how olo colour is organized, applied, and governed across products and platforms.
| Palette Name | Primary Use | Emotion / Meaning | Implementation Note |
|---|---|---|---|
| Primary Brand | Logo, key CTA | Trust, action | Use in high-visibility buttons |
| Neutral Core | Surface, text | Clarity, readability | Base for light and dark themes |
| Semantic Success | Confirmation, positive flow | Growth, safety | Accessible contrast on light backgrounds |
| Semantic Error | Validation, alerts | Attention, urgency | Paired with icon for clarity |
Color strategy and brand expression
Olo colour strategy aligns visual design with business goals by defining clear roles for each color. This strategy supports recognition across marketplaces, apps, and partner integrations while maintaining flexibility for localization and theming.
Teams use the palette to build interface components that feel cohesive yet context-aware, adapting to light mode, dark mode, and partner white-label needs without losing olo colour identity.
Design system integration
In the design system, olo colour is documented as tokenized values mapped to roles such as background, border, text, and interactive states. Tokens allow centralized updates and ensure that changes propagate consistently across web and native applications.
Design tokens include light and dark variants, semantic overlays, and accessibility checks that verify contrast ratios for each olo colour usage scenario.
Implementation best practices
Developers implement olo colour using platform-specific patterns, from CSS custom properties to native theme providers. Consistent implementation reduces drift between designs and code, enabling faster iterations and safer refactors.
Key practices include using semantic tokens instead of hardcoded hex values, enabling runtime theme switching, and providing fallbacks for legacy surfaces.
Accessibility and contrast
Accessibility is central to olo colour decisions. Each color pair is evaluated for contrast, readability, and usability scenarios, including color blindness considerations. Semantic colors such as success and error are paired with descriptive icons and text cues to ensure information is not conveyed by color alone.
Operationalizing olo colour for long-term consistency
- Adopt token-driven color definitions in both design and code
- Validate contrast and readability for every new surface
- Document usage guidelines and exceptions for partners
- Automate visual regression tests for color changes
- Schedule periodic reviews with design and accessibility stakeholders
FAQ
Reader questions
How do I reference olo colour tokens in a web project?
Use the design token package provided by your platform team, import the CSS custom properties from the olo design system, and apply roles such as --olo-color-primary or --olo-color-background. This ensures your implementation stays synchronized with brand updates.
What should I do when a partner requests a custom brand color?
Apply the partner color as an override on top of the neutral core and semantic tokens while keeping the primary brand olo colour for global elements. Validate contrast ratios and run accessibility audits to maintain readability and compliance.
How are new shades added to the olo colour palette?
Propose new shades through the design token review channel, include usage scenarios and accessibility metrics, and obtain approval from design and product governance. Once accepted, add tokens with clear roles and documentation before releasing them in a stable version.
Can olo colour be adapted for print and external marketing materials?
Yes, use the core olo colour definitions as a starting point and convert to print color spaces with careful calibration. Maintain hierarchy and brand recognition by preserving primary and semantic roles wherever possible.