Theme Your Mobile App - MX Documentation

You can brand the MX mobile app to match the look and feel of your institution. In this guide, we’ll cover:

Required customizations (like the app’s logo)
Optional customization options with examples to inspire your design

Themes

Your users can choose from multiple themes within the app, each with a light and dark mode. For example, your app could have a Default theme, a Space theme, and a Sports theme. By default, the app includes one theme that you’ll customize to match your institution’s branding. Light and dark modes respect the user’s device settings.

Global Customizations

Some customizations are set in the default theme and apply to all other themes:

App Icon
App Logo
Splash Screen
Error Colors
Info Colors
Success Colors

Required Customizations

The default theme sets some customizations which apply to all other themes. You must specify the following:

Customization	Description	Requirements & Recommendations
App icon	The icon for entering the app	1024px X 1024px file (PNG preferred, or high quality JPG) with no alpha-channel (transparency)
App logo	The logo that appears in the app	636px X 226px (for 3x resolution devices)
Brand colors	See Colors.

Optional Customizations

Consider these other customizations to further brand your app.

Customization	Description	Requirements & Recommendations
App bar	Displays logo, search bar, notification bell, and three-dot menu	Choose `transparent` or `filled`, choose `condensed` (64px) or `tall` (108px).
Background image	The background image for the app	A 1179px X 2556 px PNG or high-quality JPEG. Make sure the image isn’t blurry or pixelated at this size. If you want to provide separate versions for light and dark mode, label them `background-light.png` and `background-dark.png`. Background images may be slightly stretched or cropped depending on users’ device size and aspect ratio.
Button styles	Applies to all buttons	See Button Styles.
Card styles	A solid background image for displaying information	Choose paper or glass.
Font family	Default is Inter	To customize, send us an OpenType collection (`.ttc`), TrueType (`.ttf`), or OpenType (`.otf`) file. You must either send an open source file or a font with the license permitting you to use it.
Icon set	Default is Material Symbols and Icons	To customize, send us an SVG library or Figma link that uses vector icons.
Navigation bar	The navigation bar at the footer of the app	See Navigation Bar.
Splash screen	Uses the background image and app logo.	See Splash Screen.

Button Styles

You can change the following attributes for the buttons that appear in the mobile app:

Background color
Corner radius
Label color

You can pick from one of the following values to use for the corner radius of all buttons in the app.

Colors

To brand the app to your institution, you can customize the app’s colors:

Light mode background
Dark mode background
Brand
Text
Error
Warning
Info (applies to dark mode and light mode)
Success (applies to dark mode and light mode)

The default app colors are all ADA compliant. You’ll need to verify that the colors you choose to override the defaults meet accessibility standards.

Color	Default Hex Value (Light Mode/Dark Mode)	Description
Primary	`#1A1A1A`	Used for a majority of text
Secondary	`#666666`	Used for some labels and help text
Disabled	`#808080`	Used for disabled text states

Color	Default Hex Value (Light Mode/Dark Mode)	Description
Main	`#2C64EF`	Used for primary buttons, text links, active filter pills, and active tabs
Dark	`#022272`	Used in some cases for pressed states of buttons and links
Light	`#F1F5FF`	Used in some places for backgrounds (like in the navigation bar)
Contrast Text	`#FFFFFF`
Selected	`#2C64EF` (8%)	Used for selected states
Focus	`#2C64EF` (12%)	Used for focus states
Pressed	`#E2E8FC`	Used for pressed states
Outlined Border	`#2C64EF`	Used for enabled states

We recommend you only change these colors to different shades of red.

Color	Default Hex Value (Light Mode/Dark Mode)	Description
Main	`#E32727`	Main error color
Dark	`#8C0E0E`	Used in some cases for pressed states of buttons and links
Light	`#FFDFE1`	Used in some places for backgrounds (like in the navigation bar)
Contrast Text	`#FFFFFF`

We recommend you only change these colors to different shades of yellow.

Color	Default Hex Value (Light Mode/Dark Mode)	Description
Main	`#FFB70D`	Main warning color
Dark	`#963D01`	Used in some cases for pressed states of buttons and links
Light	`#FFEEC5`	Used in some places for backgrounds (like in the navigation bar)
Contrast Text	`#FFFFFF`

We recommend you only change these colors to different shades of blue.

Color	Default Hex Value (Light Mode/Dark Mode)	Description
Main	`#2C64EF`	Main info color
Dark	`#0130A6`	Used in some cases for pressed states of buttons and links
Light	`#9EB5FF`	Used in some places for backgrounds (like in the navigation bar)
Contrast Text	`#FFFFFF`

We recommend you only change these colors to different shades of green.

Color	Default Hex Value (Light Mode/Dark Mode)	Description
Main	`#12875E`	Main success color
Dark	`#00432C`	Used in some cases for pressed states of buttons and links
Light	`#D9FDEA`	Used in some places for backgrounds (like in the navigation bar)
Contrast Text	`#FFFFFF`

Mode Backgrounds

Some components in a theme can have varying levels of elevation: 0, 1, 8, or 16. 0 represents no shadow, while 16 represents a significant shadow. You can change the background color used for each elevation (if it’s available for that element type). For example, if you set the light mode background color for elevation level 1 to #F2F2F2, then any component that has a elevation of level 1 will have the #F2F2F2 background color. The default for light mode is white (#FFFFFF). If you change this, use another light shade.

Light Mode
Dark Mode

Default #FFFFFF
Elevation 0 #FFFFFF
Elevation 1 #FFFFFF
Elevation 8 #FFFFF
Elevation 16 #FFFFF

Default #000000
Elevation 0 #000000
Elevation 1 #232323
Elevation 8 #404040
Elevation 16 #383838

Icons

By default, the app’s icon set uses Material Symbols and Icons. The navigation bar that appears at the lowest edge of the app has the following customization options:

Border radius
Background style (paper or custom)
Shadow or no shadow
Height
Margins & padding

Icons within the navbar have the following customization options:

Border radius
Color
Font
Icon
Height
Margins & padding

Splash Screen

You can customize the splash screen through the background image and logo.

​Themes

​Global Customizations

​Required Customizations

​Optional Customizations

​Button Styles

​Colors

​Mode Backgrounds

​Icons

​Navigation Bar

​Splash Screen