Visual style principles

Visual style principles guide how we apply Bolt's design system to create interfaces that feel cohesive, accessible and aligned with Nationwide's brand identity. These principles ensure that every visual decision—from color choice to spacing rhythm—supports clarity, consistency and user confidence.

---

Nationwide has a core set of brand philosophies that go beyond rules to provide higher-level rationale and context. These principles inspire what we create and how we bring our brand to life through digital experiences.

Blue is a powerful connector and the starting point for everything we do. It plays a central role in shaping our identity. Its versatility helps us convey a variety of emotions—sophisticated, calm, energetic or vibrant—while showcasing our modern and innovative approach.

The way we communicate is clear, concise and conversational. We express our brand with focus, resulting in a simplistic beauty that allows our message to shine. Visual restraint creates calm, readable experiences that let content take center stage.

It's important to us to keep the customer at the center of everything we do. We build genuine emotional connections with our audience that are authentic, empowering, diverse and inclusive. Our visual choices must support accessibility and ensure everyone can participate fully.

All of our elements work together in an intentional, purposeful way. They can be combined with elegant simplicity or layered together for depth, all while driving consistency, not sameness. Visual style principles work in harmony to create cohesive experiences.

---

Our visual style principles put TRUST into practice across every interface:

• Test with real users: Visual decisions are validated through research, accessibility testing and user feedback
• Reinforce confidence: Consistent color, typography and spacing create predictable, learnable interfaces
• Unify experiences: Shared visual language creates seamless journeys across platforms and touchpoints
• Support accessibility: Every visual choice—contrast, size, spacing, motion—prioritizes inclusive design
• Transform insights: Visual patterns evolve based on user needs, analytics and accessibility requirements

---

Principles for consistent, accessible, token-driven color usage in Bolt. Color clarifies hierarchy and communicates state—never serving as decoration alone.

Principles for clear, scalable, system-driven typography in Bolt. Typography establishes hierarchy and supports scanning through consistent scale and spacing.

Principles for consistent, token-driven spacing usage in Bolt. Space organizes information without visual noise, communicating grouping and hierarchy through intentional distance.

Principles for consistent, intentional corner radii and form in Bolt. Shape creates visual cohesion and polish, with interactive elements receiving rounded corners.

Principles for using Bolt's utility icon system. Icons clarify and support text—they don't replace it, especially for critical actions.

Principles for consistent, responsive layout structure in Bolt. Layout makes interfaces understandable through predictable grid systems and spatial relationships.

Principles for consistent, purposeful depth and layering in Bolt. Elevation establishes z-axis hierarchy, clarifying relationships and separating temporary content from the base interface.

Principles for purposeful, accessible animation and transitions in Bolt. Motion guides attention and provides feedback while respecting user preferences and accessibility needs.

---

Start with the user need. Visual decisions should always support task completion, comprehension and accessibility—never serve purely aesthetic goals.

Use tokens and system components. Bolt's design tokens ensure consistency. Custom values undermine cohesion and create maintenance burden.

Consider relationships. Visual style elements work together. Color choices affect readability. Spacing supports hierarchy. Shape reinforces interaction patterns. Motion clarifies transitions.

Prioritize accessibility. Every visual decision must meet WCAG 2.2 AA standards for contrast, size, spacing and motion. Accessibility is not negotiable.

When principles conflict, accessibility always wins. If a visual style choice compromises accessibility, it must be adjusted—no exceptions. All other principles serve to enhance usability while maintaining accessible foundations.

Maintain consistency, not sameness. Visual patterns should feel connected across experiences while adapting appropriately to context, platform and user needs.

---

Consistent visual language builds trust, reduces cognitive load and creates experiences users recognize and rely on.

When color, typography, spacing and other visual elements follow clear principles, users can focus on their tasks rather than decoding the interface. Predictable visual patterns create confidence. Accessible visual choices ensure everyone can participate. Cohesive visual systems make experiences feel polished, intentional and trustworthy—the foundation of products users return to.

Simple rule of thumb: If a visual choice draws attention to itself instead of supporting the content or task, reconsider it.