Theme properties
Theme properties are thoughtfully named variables used throughout the design system to bring consistency to our components. They also afford you the ability create new, accessible components and content further reinforced by a financial institution's brand.
Components use theme properties from specific categories to allow for flexibility in branding, ensure proper color contrast, and guarantee proper color pairings in both light and dark themes. Do not select a theme property simply because it is the color you want to use. Rather, whenever elements such as text or icons appear on a background with a given theme property, those elements should only use the theme properties listed in the “use with” column.
For example, if you have an account card that uses the accountCardPrimaryBackgroundColor theme property, you should only use either accountCardPrimaryTextColor or accountCardPrimaryTextAccentColor for any content that is on top of it.
Examples of each theme property may be referenced by clicking a property name in the “property” column.
General card and list content
| Sample | Property | Sample value | Use with |
|---|---|---|---|
primaryContentBackgroundColor
Default card and list background |
#FFFFFFFF
|
|
|
secondaryContentBackgroundColor
|
#DEE4ECFF
|
|
|
bodyTextAlertColor
Used for inline errors and warning icons that are placed directly on card content |
#D73D09FF
|
||
bodyTextCompletedColor
Flags completed statuses in payments and remote deposit lists; also leveraged on successful task completion screens |
#3B8712FF
|
||
bodyTextDepositColor
Used to highlight |
#3B8712FF
|
||
bodyTextHighlightColor
Usually highlights user entered data in transaction lists and details |
#3B8712FF
|
||
bodyTextPrimaryColor
Dark text color used for primary content in layouts |
#071523FF
|
||
bodyTextRejectedColor
Flags rejected/stopped statuses in payments and remote deposit lists |
#D73D09FF
|
||
bodyTextSecondaryColor
Medium dark text color used for secondary or muted content in layouts |
#64707DFF
|
||
bodyTextThemeColor
Themed text that matches the institution's branding; matches the link button text colors, but lacks the button's various interactive state properties |
#2A73A8FF
|
||
defaultButtonColor
Simple hyperlink-like buttons with text that that is intended to display on primary or secondary content backgrounds |
#EEF1F5FF
|
||
defaultButtonDisabledColor
|
#EEF1F54D
|
||
defaultButtonFocusedColor
|
#EEF1F51A
|
||
defaultButtonPressedColor
|
#EEF1F533
|
||
defaultButtonTextColor
|
#2A73A8FF
|
||
defaultButtonTextDisabledColor
|
#2A73A880
|
||
defaultButtonTextFocusedColor
|
#2A73A8FF
|
||
defaultButtonTextPressedColor
|
#2A73A8FF
|
||
defaultButtonBorderColor
|
#EEF1F5FF
|
||
defaultButtonBorderDisabledColor
|
#EEF1F54D
|
||
defaultButtonBorderFocusedColor
|
#EEF1F580
|
||
defaultButtonBorderPressedColor
|
#EEF1F533
|
||
linkButtonFocusedColor
Background focused states |
#2A73A81A
|
||
linkButtonPressedColor
Background pressed states |
#2A73A833
|
||
linkButtonTextColor
Simple hyperlink like buttons with text that that is intended to display on primary or secondary content backgrounds |
#2A73A8FF
|
|
|
linkButtonTextDisabledColor
|
#2A73A84D
|
|
|
linkButtonTextDisabledColor
|
#2A73A84D
|
|
|
linkButtonTextFocusedColor
|
#2A73A8FF
|
||
linkButtonTextPressedColor
|
#2A73A8FF
|
||
inlineIconBackgroundColor
Color pairing used on legacy circle icon buttons; background defaults to 0% opacity in all new themes |
#FFFFFF00
|
||
inlineIconColor
Defaults to the link & body text theme color |
#2A73A8FF
|
||
dividerAlternativeColor
Used as a darker alternative to the default divider; most commonly used on the outline border of Online’s inputs |
#64707d99
|
||
dividerDefaultColor
Default fill for dividers in the app |
#E6E6E6FF
|
||
cardTitleTextColor
Used to theme primary card titles of cards |
#071523FF
|
||
toggleSwitchActiveColor
Color used to theme active toggle switches in Online and Android |
#3B8712FF
|
||
pinDotColor
Used to theme the passcoded dots on mobile native apps |
#2A73A8FF
|
Page container backgrounds
| Sample | Property | Sample value | Use with |
|---|---|---|---|
dashboardPageBackgroundColor
Reserved for the dashboard page’s containers that dashboard cards are displayed above |
#E3E7EDFF
|
||
secondaryPageBackgroundColor
Used as the background container for pages with card content |
#E3E7EDFF
|
Account card for primary accounts
| Sample | Property | Sample value | Use with |
|---|---|---|---|
accountCardPrimaryAccentColor
Accent color used available for text or iconography on the account card; account balances leverage this value |
#FFFFFFFF
|
||
accountCardPrimaryBackgroundColor
Card background for the dashboard accounts section of the app; used to theme the first party account at the institution |
#237CB0FF
|
||
accountCardPrimaryTextColor
Default text color for the account card |
#FFFFFFFF
|
Account card for aggregation accounts
| Sample | Property | Sample value | Use with |
|---|---|---|---|
accountCardSecondaryAccentColor
Accent color used available for text or iconography on the account card; account balances leverage this value |
#FFFFFFFF
|
||
accountCardSecondaryBackgroundColor
Card background for the dashboard accounts section of the app; used to theme third party aggregate accounts displayed in the app |
#485059FF
|
||
accountCardSecondaryTextColor
Default text color for the account card |
#FFFFFFFF
|
Action button card
| Sample | Property | Sample value | Use with |
|---|---|---|---|
actionCardAccentColor
Accent color used available for text or iconography on the account card; account balances leverage this value |
#FFFFFFFF
|
||
actionCardBackgroundColor
Card background for the dashboard accounts section of the app; used to theme third-party aggregate accounts displayed in the app |
#0C578DFF
|
||
actionCardTextColor
Default text color for the account card |
#FFFFFFFF
|
Hero background, text, and buttons
| Sample | Property | Sample value | Use with |
|---|---|---|---|
heroGradientColors
Three-stop gradient that overlays the background image; primarily used on the dashboard in mobile native apps, but is also leveraged on secondary pages in the Online app |
#ABD1EDCC, #ABD1EDCC, #ABD1EDCC
|
||
heroTextColor
Text guaranteed to contrast on hero background |
#1F3D52FF
|
||
heroEmptyCardColor
|
#00000026
|
|
Footer container
| Sample | Property | Sample value | Use with |
|---|---|---|---|
footerBackgroundColor
Background for footer section of Online app; not currently used by mobile native apps |
#FFFFFFFF
|
||
footerLinkTextColor
Simple anchor button text color for footer links that is guaranteed to contrast with footer background |
#485059FF
|
||
footerTextColor
Text guaranteed to contrast on footer background |
#64707DFF
|
Primary button
| Sample | Property | Sample value | Use with |
|---|---|---|---|
primaryButtonColor
The primary theme pairing; was more commonly used, but now has a limited use for first tally chips and login icons |
#2A73A8FF
|
||
primaryButtonDisabledColor
|
#2A73A84D
|
||
primaryButtonFocusedColor
|
#388ECDFF
|
||
primaryButtonPressedColor
|
#61A5D7FF
|
||
primaryButtonTextColor
Text guaranteed to contrast on theme background |
#FFFFFFFF
|
||
primaryButtonTextDisabledColor
|
#FFFFFF80
|
||
primaryButtonTextFocusedColor
|
#FFFFFFFF
|
||
primaryButtonTextPressedColor
|
#FFFFFFFF
|
Primary theme branding
| Sample | Property | Sample value | Use with |
|---|---|---|---|
primaryThemeBackgroundColor
The primary theme pairing; was more commonly used, but now has a limited use for first tally chips and login icons |
#2A73A8FF
|
||
primaryThemeTextColor
Text guaranteed to contrast on the primary theme background |
#FFFFFFFF
|
Secondary theme branding
| Sample | Property | Sample value | Use with |
|---|---|---|---|
secondaryThemeBackgroundColor
The secondary theme pairing; was more commonly used, but now has a limited use for second tally chips on dashboard |
#0C578DFF
|
||
secondaryThemeTextColor
Text guaranteed to contrast on the secondary theme background |
#FFFFFFFF
|
Toast messages
| Sample | Property | Sample value | Use with |
|---|---|---|---|
errorBackgroundColor
Error banner background color |
#D73D09FF
|
||
errorTextColor
Error banner text color guaranteed to contrast on error background |
#FFFFFFFF
|
||
toastBackgroundColor
Toast message background color; also used as a neutral message banner color pairing and occasionally as a button in cards lists |
#3E454DFF
|
||
toastTextColor
Toast message text color |
#FFFFFFFF
|
||
indicatorBackgroundColor
Indicator badge used to tally new messages |
#D73D09FF
|
||
indicatorTextColor
Indicator text color guaranteed to contrast on indicator background |
#FFFFFFFF
|
Menu
| Sample | Property | Sample value | Use with |
|---|---|---|---|
menuBackgroundColor
Background fill for menu drawer |
#FFFFFFFF
|
||
menuDividerColor
Unique menu divider color intended to only be used on the menu background |
#E6E6E6FF
|
||
menuIconBackgroundColor
Menu button’s circular icon background |
#FFFFFF00
|
||
menuIconBackgroundDisabledColor
Menu button’s circular icon background |
#FFFFFF00
|
||
menuIconBackgroundPressedColor
Menu button’s circular icon background |
#FFFFFF00
|
||
menuIconBackgroundSelectedColor
Menu button’s circular icon background |
#FFFFFF00
|
||
menuIconColor
Menu button’s icon fill color |
#2A73A8FF
|
||
menuIconDisabledColor
Menu button’s icon fill color |
#2A73A84D
|
||
menuIconPressedColor
Menu button’s icon fill color |
#2A73A8FF
|
||
menuIconSelectedColor
Menu button’s icon fill color |
#2A73A8FF
|
||
menuItemColor
Menu item background for various interactive states |
#FFFFFF00
|
||
menuItemDisabledColor
Menu item background for various interactive states |
#2A73A800
|
||
menuItemPressedColor
Menu item background for various interactive states |
#07152314
|
||
menuItemSelectedAccentColor
Small accent swatch used to highlight selected menu item in the presented list of pages |
#2A73A8FF
|
||
menuItemSelectedColor
Menu item background for various interactive states |
#2A73A81A
|
||
menuTextColor
Default text for menu items |
#071523FF
|
||
menuTextDisabledColor
|
#0715234D
|
||
menuTextPressedColor
|
#071523FF
|
||
menuTextSelectedColor
|
#071523FF
|
iOS header navigation bar
| Sample | Property | Sample value | Use with |
|---|---|---|---|
navigationBarButtonColor
Icon or text button color for ios nav bar |
#FFFFFFFF
|
||
navigationBarColor
Used to theme the primary nav bar at the top of mobile UIs; it displays the page title and icon/text buttons on iOS |
#2A73A8FF
|
||
navigationBarTitleColor
Nav title for iOS nav bar |
#FFFFFFFF
|
Android and online header navigation toolbar
| Sample | Property | Sample value | Use with |
|---|---|---|---|
statusBarColor
Themes the bar that houses the status icons at the to of a Android device’s screen; now defaults to the same values as the toolbar |
#2A73A8FF
|
||
toolbarColor
Used to theme the primary nav bar at the top of mobile UIs; it displays the page title and icon/text buttons on Android and Online apps |
#2A73A8FF
|
||
toolbarTitleColor
Nav toolbar title Android and Online apps |
#FFFFFFFF
|
||
toolbarButtonColor
Nav toolbar icon or text button for Android and Online apps |
#FFFFFFFF
|
Android action mode toolbar
| Sample | Property | Sample value | Use with |
|---|---|---|---|
toolbarActionModeButtonColor
Nav toolbar icon or text button for Android and Online apps |
#FFFFFFFF
|
||
toolbarActionModeColor
Used to theme the primary nav bar at the top of mobile UIs; it displays the page title and icon/text buttons on Android and Online apps |
#2A73A8FF
|
||
toolbarActionModeTitleColor
Nav toolbar title Android and Online apps |
#FFFFFFFF
|
||
statusBarActionModeColor
Themes the bar that houses the status icons at the to of a Android device’s screen; now defaults to the same values as the toolbar |
#2A73A8FF
|
Miscellaneous
| Sample | Property | Sample value | Use with |
|---|---|---|---|
buttonCornerRadius
|
8px
|
|
|
cardCornerRadius
|
10px
|
|
|
cardShadow
|
0 3px 12px 0 #00000026
|
|