Color

Blue is a powerful connector and the starting point for everything we do, playing a central role in shaping our identity. We always lead with vibrant blue—big, vibrant and optimistic.

Color is one of the most expressive visual tools in Bolt. It sets mood, supports hierarchy, communicates state and strengthens the Nationwide brand—when applied with restraint and consistency. Using vibrant blue with a limited range of complementary blues and accent colors ensures power and coherence across audiences, channels and tactics.

Bolt uses design tokens - where designers and engineers select semantic roles (surface, on‑surface, interactive, accent) rather than raw hex values. These tokens define surfaces, text, borders, interactions and feedback states—ensuring experiences remain predictable, accessible and thematically adaptable at any size, density or theme mode.

In Bolt, color indicates hierarchy and communicates state. It should:

• Support comprehension
• Reinforce hierarchy
• Convey meaning reliably
• Maintain accessibility across themes and contexts

Color is not decoration. It should never compete with content or serve as branding alone. When text alone is clearer, no color cue is needed.

Bolt's color system ensures accessibility, consistency and scalability.

• All colors originate from semantic tokens (surface, on‑surface, border, interactive, accent)
• All text, icons and interactive states meet WCAG 2.2 AA contrast across light/dark modes
• Feedback colors pair with clear, concise copy and optional icons so meaning is never conveyed by color alone
• Background classes define local color contexts:
  • Static backgrounds use fixed colors regardless of theme mode or context
  • Dynamic backgrounds enable contextual theming (components auto-adjust colors based on background) and light/dark mode support

• Prefer neutral surfaces and let spacing and typography carry hierarchy
• Use accent colors intentionally and consistently across a flow
• Apply background contexts to containers—not individual components—to ensure contrast integrity
• Avoid using multiple accent colors simultaneously unless meaning requires it
• Reinforce state (error, success, warning) with text and/or iconography, not color alone
• Disabled states use 50% opacity to indicate unavailability while maintaining color relationships

Color is powerful and emotional. It sets tone, builds connection and can evoke action. Bolt's palette balances expressive accent colors with neutral foundations so teams can communicate clearly while staying aligned to the Nationwide brand.

Use accent colors sparingly and consistently. Within any single screen or flow, limit accent color usage to maintain clear visual hierarchy and ensure vibrant blue remains the primary brand color. Too many accent colors create visual noise and dilute the brand.

Mint is distinctive. It should be used as the lead accent within competitive environments (e.g., paid media), where breakthrough and brand linkage are critical.

Color influences priority—it helps some components stand out while others recede. Use color to indicate:

• Levels of hierarchy
• Meaning or status
• Areas requiring user attention

Do not use tints of colors. This preserves the vibrancy and brand recognition of the palette and avoids accessibility issues.

Avoid:

• Accent colors in headlines
• Using accent colors on top of accent-colored backgrounds (e.g., Mint on a Deep Purple background)
• Different accent colors for icons when using accent in typography (creates inconsistency)
• Accent colors for body copy or small text
• Applying color solely for decoration or to "fill space"

Consistent, intentional color supports comprehension, reduces cognitive load and builds trust.

By centralizing contrast rules, tokens and contextual backgrounds, Bolt ensures that color remains accessible and dependable across all products, platforms and themes. When users can rely on color cues to understand hierarchy and meaning, they can navigate interfaces with confidence and ease. Conversely, inconsistent or decorative use of color can create confusion, reduce clarity and erode trust in the product.

Simple rule of thumb: If color is the only way to understand meaning or status, add text or an icon.

See design tokens documentation for a full list of semantic color token values.

Bolt uses semantic color tokens (surface, on-surface, interactive, accent) rather than raw hex values. These tokens ensure color remains accessible and adaptable across themes and contexts.

Static background contexts are unaffected by global light/dark mode.

Dynamic backgrounds create a local context based on global theme accent colors. These background colors update automatically with global light/dark mode, as do the values of all contextual colors within them.