Settings
Loyalty App Settings

App Styling Settings

6min

This section has four tabs grouped under App Styling: Images, Colors, Buttons and Form Fields. To edit any of these sections, simply navigate to the appropriate tab.

Images

Section

Description

Size

Format

Max File Size

Small Logo

Used in the top header of the native mobile app and Web Wallet

215 x 215 px

PNG



Cover Photo

Displayed on the Home screen

500 x 280 px

PNG



Splash Loading Image

Full-screen loading image shown while the app is loading

1356 W x 2934 H px

PNG

5 MB

Splashing Fallback Image

Full-screen loading image shown while the app is loading

1356 W x 2934 H px

PNG

5 MB

Colors

We will set ADA compliant colors by default, however, if you change them you may run into contrast issues. See Accessibility for more information.

Brand Colors

Brand color: Changes color for bottom tabbar, button, progress bars, links.

Error and success colors: Changes any error or success messages across the app (fields, toasts, etc.)

Text & Background Colors

Text

  • Primary text: Body copy, field text, headers
  • Secondary text: Placeholder, subtext, field labels

Backgrounds

  • Primary backgrounds: Discount cards, product cards, app headers, etc.
  • Secondary: screen backgrounds

Buttons

You can change the styling of your primary and secondary buttons (example in screenshot below). Keep in mind, you want the 'primary' style to represent the priority action on the screen.

Document image


Form Fields

Set border color and border radius