Context
These are, simply put, all the elements in your Mobile App that Users can click on to execute an action.
Button font
- Defines a default font family for primary and secondary buttons
- Choose a font that includes Regular and Bold weight since both are in use
Please note: Button font can only be defined through the Customization Center if you decide to enable Styles. If not, we will use the Body font.
These are the requirements for buttons:
- File format: OTF or TTF
- A font with Bold and Regular weights
- License
Colors
Primary button color
Primary buttons indicate the main action on the screen. They are made of two colors: a primary button color (background) and white text. Pick a color that ensures white text is easily readable:
- Primary button color
- White text (cannot be changed)
Secondary button color
Secondary buttons are used for secondary action on the screen. They are created from two colors as well: the secondary button color (background) and the body text color defined in the Typography section. This combination should also be easily readable:
- Secondary button color
- Body text color
Disabled button color
Used for the disabled state of the primary button. Disabled buttons are made of two colors: a disabled button color (background) and white text. Pick a color that ensures white text is easily readable, but the button still looks disabled:
- Disabled button color
- White text (cannot be changed)
Button outline color on loyalty card
Used to outline the barcode and the “Use” button on loyalty cards. These buttons can be found on both the home screen and the loyalty page. When choosing the color of outline, we recommend using white if the background is dark and darker color if the background is light:
Comments
0 comments
Please sign in to leave a comment.