Accent Color

Refer to Branding Assets: Accent Elements

(managed in Creator Studio under Configure > Experience > Branding)

Location: Accent elements throughout the experience such as navigation elements, notification counts, and more.

We recommend a bright color to provide some pop.

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 LIME GREEN ACCENT COLOR

Appended Hashtag

Optional

(managed in Creator Studio under Configure > Administration > Advocacy)

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 community 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.

X (FORMERLY TWITTER) WEB SHARE

Assistant Mascot

Optional

Refer to checklist for ratio and format

(managed in Creator Studio under Configure > Experience > Branding)

Location: Top of Assistant view in the web experience.

If an Assistant Mascot is not provided, the Firstup icon will be displayed.

Note: The Community Icon will be used in Assistant on the mobile app.

Dimensions: 78 x 78 pixels (width x height). PNG only; transparency recommended.

AVOID

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

WEB & MOBILE DEFAULT

Campaign Images

Optional

(managed in Creator Studio under Campaigns > Create Campaign)

See this knowledge base article for full details on content specifications.

Campaign Images

As these are subject to some cropping, aim for a 16:9 landscape ratio (1920x1080px). 

Campaign Image Blocks

We support image files in .jpg or .png format with a file size of up to 10MB. Ensure your file is smaller than 10 MB for successful upload. 

Depending on the ratio of the image block, you may aim for a 16:9 landscape ratio (1920x1080px) or a square (400x400px). Banner images should be at least 800px wide (variable height). 

Campaign Image Carousel

Users may notice increased spacing around image carousel thumbnails in the member experience.

This is due to enforcing a 16:9 aspect ratio (1920x1080px) for hero images. 

This fixed size maintains image aspect ratios without distortion or cropping. 

User Generated Content Images

We recommend a 16:9 image ratio, at least 1920px wide and 1080px tall.

WEB EXPERIENCE 

MOBILE EXPERIENCE 

Community Header

Optional

Refer to checklist for ratio and format

(managed in Creator Studio under Configure > Experience > Branding)

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 Community Header with transparency. This should provide contrast with the Theme Color without complicating your branding.

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

Dimensions: 300 x 100 pixels (width x height) recommended. PNG only.

DEFAULT WEB EXPERIENCE - display Community Name in plain text



WEB EXPERIENCE (white Community Header with transparency over navy/grey Theme Color)

DEFAULT MOBILE APP - display Community Name in plain text

MOBILE APP (white Community Header with transparency over navy Theme Color over Mobile App Wallpaper)

Community Icon

Refer to checklist for ratio and format

(managed in Creator Studio under Configure > Experience > Branding)

Location: Next to the Community Name in community content cards and other locations throughout the member experience, including the Notification Center; in member experience invitation email.

This icon represents your community as it will appear throughout different areas of the member 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 Community Icon.

Dimensions: 200 x 200 pixels (width x height). PNG only.

CONTENT CARD - MOBILE

ICON NEXT TO AUTHOR IN OPENED PIECE OF CONTENT

NOTIFICATION CENTER

RESOURCES PAGE

MEMBER EXPERIENCE INVITATION EMAIL

Community Logo

Refer to checklist for ratio and format

(managed in Creator Studio under Configure > Experience > Branding)

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

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

Dimensions: 300 x 150 pixels (width x height). PNG only.

WEB EXPERIENCE SIGN IN

Community Name

(managed in Creator Studio under Configure > Administration > Advocacy)

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

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

Imagine you or your employees talking about your community. Here at Firstup we often say, "it's posted in Nextup!"

If you have more than one community, consider how the names distinguish the communities from each other while still establishing an identity for each community individually.

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

EMAIL

AUTHOR OF CONTENT

SCATTERED THROUGHOUT EXPERIENCE

Customized Mobile App

Assets for Custom Branded App Submitted to Public App Stores

Location: iOS App Store and/or Google Play Store (i.e., a public app store).

iOS App Icon

1024 x 1024 px. Square, flat, no transparency.

Google Play Feature Graphic

1024 x 500 px

Splash Screen 

1242 x 2208 px
Solid colour with no images or text. 
Note: The app has overlay text that cannot be changed or removed. Because of this, we require no images or text on the splash screen. Patterns or textures are supported. 

External Community Header

Optional

Refer to checklist for ratio and format

(managed in Creator Studio under Configure > Experience > Branding)

Location: Center of the banner on public-facing pages.

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

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

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

Dimensions: 300 x 100 px. PNG only.

WEB EXPERIENCE OF SHARED CONTENT

Favicon

Optional

Refer to checklist for ratio and format

(managed in Creator Studio under Configure > Experience > Branding)

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).  

Dimensions: Between 32 x 32 and 128 x 128 pixels. PNG or ICO only.

WEB EXPERIENCE, AFTER SIGN-IN

Global Custom Web Font

Refer to Curate the Library: Fonts

Optional

(managed in Creator Studio under Configure > Experience > Branding)

WEB EXPERIENCE, DEFAULT FONT (INTER)

WEB EXPERIENCE, CUSTOM FONT

Knowledge Hubs Images

Optional 

(managed in Creator Studio under Configure > Content > Topics)

Customizing Knowledge Hub (premium feature) is optional. 

Topic Thumbnails

We recommend a 1:1 ratio for optimal display.

Cover Image 

We recommend a size of 1128x185 pixels.

Shortcut Icon

See Shortcuts Icons.

WEB EXPERIENCE, THUMBNAIL

WEB EXPERIENCE, COVER IMAGE 

Mobile App Wallpaper

Refer to checklist for ratio and format

(managed in Creator Studio under Configure > Experience > Branding)

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 wallpaper is displayed as uploaded (no overlay) on the sign in page. After sign in, the Theme Color is used as an overlay on top of the Mobile App Wallpaper (version 4.0 onward).

Dimensions: 1242 x 2688 pixels (width x height). PNG only.

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 wallpaper, white primary color, lime green accent, & navy theme color

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

ISSUES: TEXT, LOGOS, HIGH CONTRAST

ISSUES: PRIMARY AND ACCENT ARE TOO SIMILAR TO THE WALLPAPER

Organization Name

(managed in Creator Studio under Configure > Administration > Account)

Location: Sign-in page of the mobile app experience and (if multiple communities are available) community selector.

"Organization" at Firstup is the umbrella under which you have one or more communities.

The Organization Name helps both members and Firstup 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 community(s).

See also Organization Code.

MOBILE APP SIGN IN 

Organization Code

(contact Support to update)

Location: Firstup organization lookup.

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

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 Firstup. Both the Organization Name and Organization Code are configured very early in your community'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 community. If an update is absolutely necessary, to initiate a code change process please contact Support.

FIRSTUP ORGANIZATION LOOKUP

Primary Color

(managed in Creator Studio under Configure > Experience > Branding)

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, Community 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

(managed in Creator Studio under Configure > Experience > Branding)

Shortcuts Icons

(managed in Creator Studio under Configure > Experience > Shortcuts)

Location: Below the homepage header in the member experience (web and mobile app) 
 

Customizing icons for Shortcuts is optional.

Recommendation: 120x120 to account for screens with high resolution, but 80x80 will cover most cases.

DEFAULT SHORTCUT ICONS ON HOMEPAGE

Shortcuts Headers

(managed in Creator Studio under Configure > Experience > Shortcuts)

Location: In the Assistant panel after selecting the required shortcut, and in the link modal when selecting a shortcut with multiple links in both the web and mobile experience.

Customizing headers for Shortcuts is optional.

Recommendation: 2:1 aspect ratio, with an image size of 530x265px. The maximum width of the Assistant window is 530px. The file should be in .png or .jpg. 

ASSISTANT PANEL

LINK MODAL

Terms of Service

(managed in Creator Studio under Configure > Experience > Branding)

Location: Accessible to users during and after registration.

The Firstup 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 communities, each community is configured individually.

The Firstup 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://firstup.io/legal/terms-of-service/
• https://firstup.io/legal/multi-tenant-privacy-policy/

Users accept the Terms of Service and Privacy Policy when joining the community - "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 community, 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 and format

(managed in Creator Studio under Configure > Experience > Branding)

Location: Banner of the web experience, public-facing pages, and mobile app (4.0 onward). The checkbox background and markers for unread notifications in the Notification Center.

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.

See also Community Header and External Community Header.

EXAMPLES USE NAVY THEME COLOR

MOBILE APP BANNER

WEB EXPERIENCE BANNER

PUBLIC FACING BANNER (External Community Header over Theme Color)

UNREAD NOTIFICATION MARKERS AND CHECKBOX BACKGROUND

Topic Images

Optional 

(managed in Creator Studio under Configure > Content > Topics)

Topic Image

We recommend a 1:1.1 ratio for optimal display. Refer to Content Specifications - Image, GIF, Video, and Documents for full guidance. 

Shortcut Icon

See Shortcuts Icons.

WEB EXPERIENCE, TOPIC IMAGE 

Tracking Hashtags

(managed in Creator Studio under Configure > Administration > Advocacy)

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

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

Web Wallpaper

Refer to checklist for ratio & format

(managed in Creator Studio under Configure > Experience > Branding)

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.

Dimensions: 2000 x 1000 pixels (width x height). PNG only.

Note: The Theme Color is applied to the Web Wallpaper on the All Topics page (but not on the sign-in page)

WEB EXPERIENCE

Welcome Video

Optional

(managed in Creator Studio under Configure > Experience > Branding)

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 community, share compliance information, and/or highlight details about how to use your community.

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 Creator Studio.

If you are not able to host the video publicly, consider publishing a video-only campaign. 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

Workflow Images 

Optional

(managed in Creator Studio under Configure > Connect > Workflows)

Headers

Full-width headers must be 600px wide and in .jpeg or .png format. If your header is blank and has only a logo/image, the image must be provided in the size you want it to appear in the email. 

Footers

Full-width footers must be 600px wide and in .jpeg or .png format. If your footer is blank and has only a logo/image, the image must be provided in the size you want it to appear in the email. 

HEADERS

FOOTERS