look-and-feel | mscripts

Look and feel

Branding your apps and websites

mscripts uses configurable templates to deliver a branded look and feel to your apps and websites. This section outlines the images and assets we'll need.

Please start by choosing a template for your app and web home page. You can choose a template with or without an advertising banner.

Next, choose icons and fonts, or you can provide your own. We provide information about the graphical assets your marketing team will need to provide, such as a logo, an app icon, and any in-app images you'd like to use in the application.

Use the tabs on the left side of the page to learn more about how you can modify your look and feel.

Submit your assets

Please upload your assets in mscripts Asana project portal site

Mobile app home page

You can choose one of three templates for your App home page. Two of the three home page templates are available with or without an advertising banner.

Advertising Banner

The advertising banner marquee rotates between up to three images to allow you to promote products and services. The banners can be set up to allow click-through to content on other parts of your digital properties. You may change banners once a month.

Learn more about banners.

Large grid

Small grid w/o banner

List w/o banner

List w/ banner

Small grid w/ banner

Responsive web home page

One standard home page design is available, either with or without an advertising banner. Please let your account manager know if you prefer a page with or without a banner.

Learn more about banners.

Web Pharmacy template with banner

Web Pharmacy template without banner

Icons

You can choose icons for your home page from two sets of standard icons, or you can provide us with your own icons, as long as they are high quality image files of 56 x 56 pixels. Please choose icon set 1 or 2, or let us know that you will provide your own custom icons.

The default menu list in the apps and web is:

Refill from list
Refill by scan
Reminders
Family care
Find a store
Transfer Rx
Doctors
Account

If you would like to link to an outside digital property please provide us with a sample of the icon that you'd like us to use. Our digital team can work to adapt it to the look and feel of the icon set you choose.

Brand Colors

Please provide us with the Hex or Pantone codes for your primary and secondary brand colors. You can brand the application header, buttons and icons throughout the application using the brand color of your choice. The icons on the home page can all be branded to your primary or secondary brand color, or you may specify the color of each individual icon. Please note that we follow the color contrast guideliness for accessibility color contrast guideliness for accessibility. We use your primary branding color in headers, buttons, and icons. If the color of your primary brand is light, the text inside the buttons will appear in black. If the color is dark, the text inside will appear in white. This allows us to stay in compliance with accessibility guidelines for color contrast. The colors of links may not be changed.

Logo

The logo appears inside your apps and web. We need a logo for a white background and for a color background. Illustrator/Vector file File format: PNG

App Icon

The app icon is the image that we use on the home screen of the phone to launch your application. Resolution: 1024 x 1024 72 dpi or Illustrator/Vector file File format: PNG No transparency, layers, shine gloss or rounded edges.

Fonts

Your Android and iOS apps can be configured with your choice of the below fonts. Please indicate which font you would prefer for each platform.

Android

Roboto (OS default)
Lato

iOS

Helvetica Neue (OS default)
Lato

Responsive web

Helvetica Neue (default)
Helvetica
Sans serif

In-app images

There are images on pages throughout the application, which help brand your application. We provide a set of neutral, nature oriented, stock images, which you may choose to use, or you may provide us with your own images. Images should be a 150x150 pixel vector image.

If you choose to provide your own images, you may want to consider the message of the screen on which each image will appear.