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
Success

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. Contrast text is set to #FFFFFF.

Color	Default Hex Value	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)
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

Color	Default Hex Value	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

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

Color	Default Hex Value	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)

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

Color	Default Hex Value	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)

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

Color	Default Hex Value	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)

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

Color	Default Hex Value	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)

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

Default

#FFFFFF

Elevation 0

#FFFFFF

Elevation 1

#FFFFFF

Elevation 8

#FFFFFF

Elevation 16

#FFFFFF

Dark Mode

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

​Light Mode

​Dark Mode

​Icons

​Navigation Bar

​Splash Screen

Themes

Global Customizations

Required Customizations

Optional Customizations

Button Styles

Colors

Mode Backgrounds

Light Mode

Dark Mode

Icons

Navigation Bar

Splash Screen