FasCard Private Label App Requirements - Store Owner
Following are the requirements for creating a private-label version of the FasCard app:
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.
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 |
|---|---|---|---|---|
 |  | Displayed as background on login page. | Use subdued color so that test stands out. | |
Main Logo displayed on login and logout pages. | ||||
Displayed in upper/right corner for navigating to Feedback/Issue Report page | ||||
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. | |||
Image for Card Details button on the User Settings page | The coloring should match theme color. | |||
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 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 |
|---|---|---|---|
Orange | Message box background color | ||
White | Message box text color | ||
Orange |
| ||
Blue | Used wherever color style is not explicitly defined | Main theme color of app | |
White |
| Main theme inverse color of app | |
LightYellow | Back color of transient loading indicators:
| 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:
| ||
Gray | Item boxes with dashed border used throughout app:
| ||
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
| ||
White |
| ||
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
| ||
LightBlue | Login page labels | ||
White | Label color throughout the app
| ||
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 |
| ||
Blue |
| ||
White |
| ||
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 |