Skip to content

Visual language / Theme properties

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
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
© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.