FasCard Private Label App Requirements - Store Owner

Following are the requirements for creating a private-label version of the FasCard app:

1 App Logo
2 App Branding
- 2.1 Images
- 2.2 Colors

App Logo

The CCI customer must provide images for use as the app icon. Typically a vector graphic (SVG) will be sufficient for dynamically sizing to all required image sizes.
- Apple: https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon
- Google: https://developer.android.com/distribute/google-play/resources/icon-design-specifications

App Branding

The CCI customer must define the following branding customizations:

6 svg images
10 main color groups
- + any additional colors for specific components listed in the color description table below

Images

Image File	Example	Raw Image	Usage Description	Notes

Image File	Usage Description	Notes
Login_bg.svg	Displayed as background on login page.	Use subdued color so that test stands out.
logo.svg	Main Logo displayed on login and logout pages.
Question.svg	Displayed in upper/right corner for navigating to Feedback/Issue Report page
Start.svg	Displayed on intermediate page when user first logs in and provides quick link to start a machine.	There is css styling for text in middle to keep in mind for sizing image.
ThreeDots.svg	Image for Card Details button on the User Settings page	The coloring should match theme color.
WaitingLogin.svg	Shown when the app is first loading and downloading background files. Upon future revisits, this may not even be visible with most all required files being cached.	This image is nearly identical to Login_bg.svg but with defined color (white for FasCard)

Colors

Color Num	Color Name	Color

Color Num	Color Name	Color
color group 1	Blue	#4170B6
color group 2	LightBlue	#EAEBEC
color group 3	Orange	#F7AA22
color group 4	LightOrange	rgba(250, 172, 37, 0.3)
color group 5	Green	#37B34A
color group 6	Red	#EC1C24
color group 7	White	#FFFFFF
color group 8	Gray	#707273
color group 9	LightGray	#C0C2C3
color group 10	LightYellow	#FAFAD2

Style Color	Example	Usage Description	Notes

Style Color	Usage Description	Notes
Orange	Message box background color
White	Message box text color
Orange	Checkbox check color Selected page in navigation bar at bottom Quick start panel selected button back color
Blue	Used wherever color style is not explicitly defined	Main theme color of app
White	Text color of report selection buttons	Main theme inverse color of app
LightYellow	Back color of transient loading indicators: Dashboards loading Satellite status	Dashboards and satellite status is only accessible to employees
LightGray	Placeholder text color for any entry box with "descriptive" text
LightGray	Dividing lines used through out app: Location list Settings page Transaction activity list Notify Settings Work Task list (employee only) Report sections list (employee only)
Gray	Item boxes with dashed border used throughout app: Add-Value packages Redeemed coupons Rewards Reports (employee only) List of locations for Dashboards (employees only with multiple locations)
Gray	Back color of balance region on Location page will default to color group 8, but this color can/will be altered on the admin site by the location owner. If your app will be used at multiple FasCard locations, with different colors chosen on the location's admin site, this color will change in the app to match that choice.
Gray	Location search bar background color NOTELocation search text color is determined by operating system. It is black on android, and white on iOS as of 8/18/2023. Recommend using a neutral color background to display both white and black text.
White	NOTELocation search text color is determined by operating system. It is black on android, and white on iOS as of 8/18/2023. Recommend using a neutral color background to display both white and black text. Balance text color
White	Location panel address back color
Gray	Location panel address text color
Orange	Picker boxes selected color
LightOrange	Picker boxes back color
LightBlue	Background color of input fields throughout the app Add-Value packages Login page email/password entry fields Redeemed coupons
LightBlue	Login page labels
White	Label color throughout the app New User welcome page text Forgot password page labels
Blue	Used wherever color style is not explicitly defined for labels	Similar to 'bg-color' style as main theme color
LightBlue	Back color of the satellite reader connection bullet chart	Satellite status is only accessible to employees
LightBlue	Quick start panel unselected button back color
Blue	Quick start panel unselected button text color
White	Quick start panel selected button text color Top navigation bar image back color Location balance reload image back color Back color of the Terms/Privacy/Credits links on Settings page
Blue	Border around curved corner buttons Text color of the Terms/Privacy/Credits links on Settings page SIGN OUT button color is darkened through a sencha function and is not changeable on it's own. It will be a darker version of color group 3 or "orange"
White	Text color of Add Location button on Locations page Text color of buttons used in New User sequence of pages
LightBlue	Login page sign-up button back color
Blue	Login page sign-up button text color
Blue	Back color of navigation bar at bottom
White	Text color and forecolor of icons of navigation bar at bottom
White	Text color of machine count indicator
Green	Back color of total row in reports	Reports are only accessible to employees
White	Text color of total row in reports	Reports are only accessible to employees