Explore

Call From Work- Brand Assets

A collection of brand assets used and created for the mobile-app Call From Work.

Style Guide and Color Palette

⁠

⁠

Hex value

RGB value

Description

#275096

39, 80, 150

Primary Blue, Headers, Main Text, Main Buttons, Icons, Symbols against white background

#4C8EFF

76, 142, 255

Secondary Blue, Secondary Button, On-State, Emphasized Text. Can be used as Primary Blue on darker backgrounds.

#1FB369

31, 142, 105

Green, Verified, Active

#DEA70A

222, 167, 10

Yellow, Low Balance

#DF3434

223, 52, 52

Red, Invalid, Error, Destructive Buttons

#FFFFFF

255, 255, 255

White, Lightmode BG for modals and screens. Text on dark backgrounds.

#EFF8FF

239, 248, 255

Background for fields

#FFF4F4

255, 244, 244

Background for Invalid Field, Error with field

#E0E0E0

224, 224, 224

Light Grey, Nav Bar Background

#BBBBBB

187, 187, 187

Medium Grey, Lines, Outlines, Borders, Greyouts, Inactive, Deactivated

#494A4A

73, 74, 74

Dark Grey, Settings Item title, paragraph text on white background. Phone Number/Contact Name for Call Log

#091324

9, 19, 36

Dark Blue, Used instead of true black. Informative/Suplemental text on white background. Call Log information.

#091324 #275096

9, 19, 36 39, 80, 150

Blue Gradient, Background Gradient for Header, Sign-Up, Login, and Splash Screen.

There are no rows in this table

⁠

Primary Blue and White are the dominant colors for graphics and interface. With Secondary Blue, and Light Grey being accent colors. Heading Text is often Primary Blue (Secondary Blue if using a dark background) while paragraph text is Dark Grey (White if using a dark background). Dark Blue can also be used for supplemental text (Light Grey if using a dark background). Secondary Blue can be used for emphasis. Examples are at the end of this document.

Design guidelines for showing CallFromWork on Device

Use the latest flagship model of the phone on a given platform. - Eg. iPhone 11. For Android use latest Samsung Galaxy flagship - eg. Galaxy S10 (not Edge or Note models). Please only use black/white models of the phones.

Keep phones facing forward. We try to keep phones straight as they are the clearest way of showcasing the app.

When placing any screen, such as the app itself or an incoming call, use a mockup instead of a screenshot. This is important for consistency across all screenshots so that they have a consistent status bar. This is also useful for altering text within screenshots, CallFromWork we often need variations of the incoming call number.

Use a clean status bar on all screenshots

A. Full Signal and Wifi Symbol

B. No Network Name

C. 9.41 AM for time

D. 100% battery

E. 100% battery