Skip to main content

In a perfect fit scenario, a project using Bolt would make use of all of the system's main assets:

A project does not have to use all of the above in order to use Bolt.

In ideal conditions, Bolt components may account for 50% of the elements on a page, while tokens and other style utilities can be used to build out the rest of the items in a visually consistent manner.

Bolt for Web is the system's flagship model, providing the most complete range of options for using Bolt. However, Bolt also provides partial assets for other platforms. These range from documentation of best practices, to platform-specific design libraries, and low-level primitives that can be used to apply the Bolt look and feel to other systems.

Available Bolt Assets by Platform
As of September, 2024
Bolt for Web Bolt for Mobile Bolt for Messaging Bolt + AI
Figma libraries
Design tokens & primitives
Visual style utilities
Prebuilt components
Consumer documentation
Available
Available for use in production
Beta
Not yet recommended for use in production
Unavailable
Assets not planned for this format

The following questions can help guide your decision about whether to use Bolt. If you need more information, reach out using one of our channels.

As a design system, Bolt's purpose is not only to accelerate the creation of new applications, but also to ensure visual consistency across Nationwide experiences.

At present, Bolt does not support projects that need to diverge from Nationwide brand standards. In a few scenarios, Bolt may permit limited theming to align with third-party co-branding, but this should only be used with direction from the Design Standards team.

While Bolt can be used without a dedicated designer, we strongly recommend developers work with a designer from within UX, or at least one who is familiar with Bolt's Figma design libraries. These design libraries are kept closely in sync with the available coded components, speeding up build time by demonstrating the exact options that need to be configured.

While all of Bolt's assets are individually tested for usability and accessibility within themselves, it is still possible to combine the elements in a way that causes issues. For example, only certain elements may be permitted on certain background colors in accordance with Brand standards, and designers are responsible for ensuring all of the chosen color combinations provide sufficient contrast. Working with a designer shifts those conversations earlier in the process, streamlining the process to full production.

The best way to use Bolt is from the ground up, incorporating it into early decisions about both design and architecture. Components accelerate development of common screen elements, while systems for spacing and color provide a backbone for full page design.

That said, existing projects may choose to migrate to Bolt from other libraries, or integrate with Bolt on top of existing frameworks. While this may not offer the same time savings as building with Bolt from the start, these projects can still benefit from alignment with a centralized design system. Projects using Bolt will also benefit from ongoing support including bug fixes, enhancements, and access to new features as they become available.

Display settings

Note: not all settings persist across pages

Default Compact (-1) Sparse (+1) XL (default) 2XL 3XL Default Min Max Light (default) System Dark Branded (default) Unbranded