ASSET

DETAILS

EXAMPLE(S)

Accent Color

Location: accent elements throughout the experience such as navigation elements, notification counts, and more. Also a color option for the Note content type in Planner.

We recommend a bright color to provide some pop for the accented elements.

Issue Note:

• DON'T use the same colors for the Accent Color and Mobile App Wallpaper. If they match too closely, the sign-in button will blend into the wallpaper. See Mobile App Wallpaper for examples of issues.

EXAMPLES USE PINK ACCENT COLOR

SIGN IN BUTTON, NAVIGATION, BADGES, FEATURED BANNERS

Appended Hashtag

Optional

Location: share message when sharing to some social networks.

The Appended Hashtag is automatically added to your user's share if the target social platform allows pre-populated text.

The Appended Hashtag helps program users identify themselves as employees of your company. 

Note: some platforms do not allow pre-populated text. For example, Facebook requires the employee to add the hashtag manually due to platform policy. We encourage communicating directly and clearly with your Members about recommended hashtags.

TWITTER WEB SHARE

Assistant Mascot

Optional

Refer to Checklist for Ratio & Format

Location: top of Assistant view in both the web experience and the mobile app.

The Assistant Mascot asset will have two different background colors - light grey in the web experience and the Theme Color (usually a dark color) in the mobile app. 

We recommend a white image with an outline or an image with a solid white background in order to contrast with both a dark and light background.

If an Assistant Mascot is not provided, the FirstUp Icon will be displayed.

AVOID

• Transparent icons that use the same color as Theme Color.
• All black or all white icons without a grey outline.
  

WEB & MOBILE DEFAULT

WEB & MOBILE CUSTOMIZED

White logo outlined in grey

ISSUES: COLORS ARE TOO SIMILAR TO THE BACKGROUND

External Program Header

Optional

Refer to Checklist for Ratio & Format

Location: center of the banner on public facing pages.

Like the Program Header, the External Program Header is overlaid on the Theme Color and can use transparency. However, the External Program Header is configured separately so that you can express different branding to non-Members.

While the Program Header is displayed on the banner of your web experience when users are signed in, the External Program Header is displayed on the banner of articles or video that have been shared with non-Members.

If an External Program Header is not provided, your Program Name will be displayed.

WEB EXPERIENCE OF SHARED ARTICLE

Favicon

Optional

Refer to Checklist for Ratio & Format

Location: in web browser tab for the web experience once a user has logged in (does not display on the web experience sign in page).  

The favicon can be in ICO or PNG file format.

WEB EXPERIENCE, AFTER SIGN IN

Mobile App Wallpaper

Refer to Checklist for Ratio & Format

Location: background of multiple pages in the mobile app including sign in, join now, feeds view, and more.

Use a high-resolution image without words, logos, or symbols. User devices vary in size, which means that the placement of the interface elements varies and cropping may occur.

The overlaid text will render in your Primary Color.

The Theme Color is used as an overlay on top of the Mobile App Wallpaper (version 4.0 onward).

Highlights:

• DO use similar colors for the Theme Color and wallpaper.
• DON'T include text or logos in your wallpaper.
• DON'T use a high contrast image.
• DON'T use the same color as the Primary Color (black or white) and wallpaper.
• DON'T use the same color as the Accent Color and wallpaper.

EXAMPLE

Using pink wallpaper, white primary color, pink accent, & purple theme color

WALLPAPER, SIGN IN, & SUBMIT CONTENT (note purple overlay)

ISSUES: TEXT, LOGOS, HIGH CONTRAST

ISSUES: PRIMARY AND ACCENT ARE TOO SIMILAR TO THE WALLPAPER

Organization Name

Reference Only (Requires SC Staff to Change)

Location: sign in page of the mobile app experience and (if multiple programs are available) program selector.

"Organization" at SocialChorus is the umbrella under which you have one or more programs.

The Organization Name helps both members and SocialChorus staff identify your company, therefore it is usually simply your company name. The Organization Name will likely only ever appear to end-users in the mobile app sign in.

As the Organization Name is your company name, it does not need to be modified unless your company name changes.

Note that there are no image files associated with your organization. All image files are for your program(s).

See also Organization Code.

MOBILE APP SIGN IN 

Organization Code

Reference Only (Requires SC Staff to Change)

Location: FirstUp organization lookup.

FirstUp mobile app users can look up their program in two ways: by Organization Code or their email. If there are multiple programs under your organization, the same Organization Code is used for all of the programs.

The Organization Code is usually a variant of the Organization Name, though the Organization Code must be unique from all other codes in use at SocialChorus. Both the Organization Name and Organization Code are configured very early in your program's creation process and rarely altered.

Changing the Organization Code is strongly discouraged as a change can compromise SSO configurations, links, bookmarks, and RSS Feeds that draw from the program. If an update is absolutely necessary, to initiate a code change process please contact support@socialchorus.com.

FIRSTUP ORGANIZATION LOOKUP

Primary Color

Location: all text on the mobile app sign in page.

The Primary Color (white or black) should contrast with both the Mobile App Wallpaper from top to bottom (to keep the Organization Name, Program Name, and other text visible) and the Accent Color (so that the words Sign In or Join Now are visible).

You can choose the color black or white, but the text is otherwise not customizable.

MOBILE SIGN IN, WHITE vs BLACK

Privacy Policy

See Terms of Service.

Program Header

Optional

Refer to Checklist for Ratio & Format

Location: center of the banner on the web experience and mobile app (4.0 onward).

This image will overlay the Theme Color and can include transparency.

If using a dark Theme Color, we recommend a white Program Header with transparency. This should provide contrast with the Theme Color without complicating your branding.

The Program Header may be between 200px and 500px wide, but 300px is recommended.

If the Program Header is not provided, your Program Name will be displayed instead in light text.

WEB EXPERIENCE (white Program Header with transparency over purple Theme Color)

MOBILE APP (white Program Header with transparency over purple Theme Color over purple Mobile App Wallpaper)

Program Icon

Refer to Checklist for Ratio & Format

Location: next to the Program Name in program content cards and other locations throughout the employee experience.

This icon represents your program as it will appear throughout different platforms of the employee experience.

We recommend making an image that includes as little whitespace as possible, as this image is often displayed as small as 35px x 35px.

Transparency is accepted for the Program Icon.

CONTENT CARD - MOBILE

CONTENT CARD - WEB

ASSISTANT AND RESOURCES PAGES

Program Logo

Refer to Checklist for Ratio & Format

Location: The sign in and join now pages of the web experience.

The Program Logo helps users identify which company and program they are signing into. You can use this asset to express your company branding, the program's name, and more.

WEB EXPERIENCE SIGN IN

Program Name

Location: throughout the employee experience and in email campaigns such as sign in pages, headers, emails, as the author of content, and more.

The Program Name that you select will set the tone for your communications platform, so choose the Program Name carefully. Be thoughtful about your goals and incorporate that vision into your Program Name.

Imagine you or your employees talking about your program. Here at SocialChorus we often say, "it's posted in SC Now!"

If you have more than one program, take into consideration how the names distinguish the programs from each other while still establishing an identity for each program individually.

We recommend not changing the Program Name if possible, as the Program Name is the cornerstone of your program's branding.

EMAIL

AUTHOR OF CONTENT

SCATTERED THROUGHOUT EXPERIENCE

Terms of Service

Location: accessible to users during and after registration.

The SocialChorus Platform Terms of Service and Privacy Policy are automatically added to your platform. If you want to customize the Terms of Service or Privacy Policy, there are two options:

• Link - Paste in the URL if your terms or policy are accessible via the web.
• Text Box - Type or paste the text directly into the text box editor. The text inside the text box can be formatted, but with limited options. Please make sure that any hyperlinks or images are hosted at a location that your users can access.

If you have multiple programs, each program is configured individually.

The SocialChorus Platform Terms of Service and Privacy Policy can be referred to as an example. If you need a physical copy of the documents for your legal team to review, please navigate to the links below and print the web pages:

• https://www.socialchorus.com/terms-of-service/
• https://www.socialchorus.com/multi-tenant-privacy-policy/

Users accept the Terms of Service and Privacy Policy when joining the program - "By creating an account you agree to the Terms of Service and Privacy Policy".

Users may see the Terms of Service and Privacy Policy presented in slightly different ways depending on the version of the program, whether SSO is enabled, and the environment (web experience or mobile app). However, in all versions and environments, the Terms of Service and Privacy Policy are always available for review after fully registering. In the mobile app, navigate to Settings > About. In the web experience look for the links below the navigation bar on the left.

REGISTRATION MESSAGE

MOBILE APP

WEB EXPERIENCE

Theme Color

Refer to Checklist for Ratio & Format

Location: Banner of the web experience, public-facing pages, and mobile app (4.0 onward). Also available as one of the color options for the Note content type in Planner. 

Use a dark color for your Theme Color. The buttons that appear in the web banner are always light-colored. Using a dark Theme Color allows enough contrast to see the buttons.

The Theme Color should go with your overall branding, but also not be distracting for users browsing on the web or mobile app.

Note: the Theme Color is overlaid on top of both the Web Wallpaper and Mobile App Wallpaper. If you use complementary colors such as blue and yellow, they may combine to create an undesired third color (green). Consider using similar, possibly even the same, colors for the Theme Color and the wallpapers.

See also Program Header, External Program Header, Web Wallpaper, and Mobile App Wallpaper.

EXAMPLES USE PURPLE THEME COLOR

MOBILE APP (Theme Color overlaid on Mobile App Wallpaper)

WEB EXPERIENCE BANNER (Program Header overlaid on Theme Color)

WEB EXPERIENCE DISCOVER PAGE (Theme Color overlaid on Web Wallpaper)

PUBLIC FACING BANNER (External Program Header over Theme Color)

Tracking Hashtags

Reference Only (Deprecated Feature that Appears in Studio)

Location: not visible to Members or Studio users, not used by platform.

Tracking Hashtags are a deprecated feature, they have no impact. Do not configure.

Tracking Hashtags are not visible.

Web Wallpaper

Refer to Checklist for Ratio & Format

Location: The sign in and join now pages of the web experience.

The Web Wallpaper is responsive and stretches to fit the user's device, so keep in mind that users may not see the entire image.

See also Theme Color.

WEB EXPERIENCE

Welcome Video

Optional

Location: In the web experience the video is displayed as an overlay until closed. In the mobile app experience the video is at the top of Latest after the user registers. The video persists at the top of the feed until acknowledged.

Use the Welcome Video to communicate a vision for the program, share compliance information, and/or highlight details about how to use your program.

The video must be publicly accessible, though it can be an unlisted video on Vimeo or YouTube (Kaltura and other video hosting sites are not supported).

After pasting the link to the video you can click Preview to watch the video in Studio.

If you are not able to host the video publicly, consider publishing a video post to My Feed (Latest). The downside to this option is that more recent content can push the video post down the feed and out of visibility.

WEB EXPERIENCE

MOBILE APP