BECU Digital Design Toolkit

The design toolkit is a Figma library that can be referenced and enabled in your projects.

Open in Figma

Release Notes

What's added

  • Two new List components along with usage and accessibility guidelines for Basic and Custom Lists. The Basic List and the Custom List come with 16 variants total.
  • Two new Step Tracker components along with usage and accessibility guidelines. The small and regular Step Trackers come with a multitude of variants for flexible use.
  • A new Breadcrumb component with many variants for Compact and Extended use and multiple levels. Defined usage and accessibility guidelines.
  • Established a standardized approach to drop shadow styles along with best practices.
  • A Horizontal Rule component to separate components or areas of a layout.
  • A Vertical Navigation component.
  • Created components with the most common text combinations (Headings and body text).

What's improved

  • Variants for disabled with deselected states in Checkboxes and Radio buttons.
  • Added a new blank variant to Tooltips, accommodating icon, link, and button use cases. Updated the behavior of Tooltips.
  • Selection Tiles now have interactive variants, supporting hover and click. Horizontal selection tiles now have an option that doesn't use iconography.
  • Updated drop shadow styles to provide better UI alignment across components. Updated components include cards, interactive icons, tooltips, and selection tiles.
  • Reworked Alerts components for responsive layouts.
  • Updated Links usage guidelines with more examples and more detailed behavior recommendations.
  • Included Stone as an accepted Button color and more examples of Buttons usage.

What's added

  • Two new card components and expanded cards usage guidelines.
  • A missing font style used in card components.
  • Badge component and usage guidelines for it.
  • Two selection tile components have been added, along with usage guidelines.
  • Two components, along with guidelines, have been created to standardize the design of right sidebar boxes in Online Banking.
  • One new component for popovers (icon & fly out menu), along with usage guidelines.
  • One new component for a 'more' menu (icon & fly out menu), along with usage guidelines.
  • A Bootstrap icon library ready to use on Figma, containing over 1,300 icons with variants (outline, fill, enclosed, etc.).
  • Implemented a modular approach to embed icons coming from the Bootstrap library into the Design Toolkit. The new approach uses an 'Icon Wrapper' with out-of-the-box, standard icon sizes and padding areas.
  • Multiple button variants with icons for mobile and desktop, incorporating Icon Wrapper.
  • Established a unified approach to Focus states.
  • Focus state variant added for desktop buttons.

What's improved

  • Fields and controls now have more features to handle input validation.
  • Improved multiple Notifications and Alerts components, along with best practices.
  • The new Icon Wrapper improved multiple components (Alerts, Forms, Popover, Related articles) with more to come.
  • Reviewed all buttons, bringing consistency to layer naming structure and variant properties.
  • Focus state was updated to provide better UI alignment across components. Updated components include cards, form components, interactive icons, buttons, links, and selection tiles.

Launch to with initial set of components.

Initial assembly of Library and Figma Files.


If you have questions that cannot be answered below please contact the UX CoE Team.

Why can't I interact with anything in the Design Toolkit?

You must have a Figma account to obtain assets and inspect elements. To learn more, please visit If you are a BECU employee please contact Liz Holland about our Enterprise account.

How do I provide feedback on what I see?

If you have feedback on a specific component, and you have a Figma account, you can leave a comment in the file ( learn more about Figma comments).

If you have general feedback, or encounter an issue, please alert the UX CoE team at

What's Included

The guide contains an inventory of UI patterns and Figma components. As a designer, you can leverage the components in your work, and implement the Figma library into your project. As a developer, you can review specifications of design attributes.

Published Patterns

Contains an inventory of patterns and brand assets that BECU vendors should use in their systems.


Contains all patterns that BECU designers should use in their prototypes.


Contains color, typography, and spacing primitives.

Enabling the Library

Once you have access you can enable the library for easy use in your projects.

How to Enable

Enable libraries from the Figma 'Assets' Panel - Option+3, then search for the library that you want or need to use in your project.

The name of this specific library is 'Components.'

Learn more about Figma libraries.

Library Usage Guidelines

The dos and don'ts of working with the Design Toolkit


  • Use the components and their variants just as they are.
  • If you notice something that can be better - or even something that is wrong in a component - contact the UX CoE team and provide feedback.


  • In your projects, do not override text and color styles.
  • In your projects, do not detach a component instance from their parent component.
  • In the libray, do not make changes without reviewing with colleagues.