Branding Guide

Branding Guide

Your one-stop shop for all branding information, conveniently gathered here for easy handoff to your branding team. Includes assets for your Tightknit community within Slack and for the associated Companion Forums Site.

Image Assets

Image AssetDetailsSetting Location
Community Horizontal LogoUsed in certain generated marketing images to represent your community. Recommended to use a combination logo image containing the brand logo and/or title. Recommended size is 70 px height, width between 70 - 240 px.General under Community module
Community IconUsed as the icon of the Tightknit bot user when it sends messages to community members. Recommended dimensions 48 x 48 px.
By default, it is the Slack workspace icon. Can also be configured as the profile photo for bot users.
General under Community module
Site Horizontal LogoAppears in the top navigation bar. Recommended to use a combination logo image containing the brand logo and/or title. Recommended size is 70 px height, width between 70 - 240 px.General under Companion Forums Site module
Site IconAppears in the top navigation bar alongside the site name, only if there is no Site Horizontal Logo. Recommended dimensions 48 x 48 px.
By default, it is the Slack workspace icon. Can also be configured as the profile photo for bot users.
General under Companion Forums Site module
FaviconAppears next to the site title in your browser tab. Recommended dimensions 32 x 32 px.General under Companion Forums Site module
Social Media ImageAppears when a link to the site is shared on social media. All other pages will use this by default, unless overridden. Recommended dimensions 1200 x 627 px.General under Companion Forums Site module
Home page bannerRecommended dimensions of at least 827 x 192 px. Very tall images may be clipped.Home Page under Companion Forums Site module
Feed bannersRecommended dimensions of at least 827 x 192 px. Very tall images may be clipped.Feed create/update panel, accessible by the ••• menu next to feeds
Event cover imagesRecommended dimensions 600 x 338 px. Must have 16:9 aspect ratio.Event create/update panel, accessible by the ••• menu next to the event in the Events List modal
Blog post cover imagesRecommended 16:9 aspect ratio with dimensions at least 480 x 270 px.The first image attachment of a Slack message synced to the companion site as a Blog-type post
Gamification Background ImageUsed as the background for Social Media announcement style images, such as Badge awards for users. Recommended dimensions of 1200 x 600 px. Max 2.5 MB file size.Settings under Gamification module

Branding Sets

A branding set is a collection of branding token values that work with our design system. You can access your branding sets by clicking on the Branding button under the Companion Site section of the admin settings. You can have up to 4 branding sets, with only one configured as the active branding set for your companion site.

The Default Branding Set cannot be deleted.

Colors

NameDescriptionVisual Guide
Paragraph Text ColorThe color of all non-header textBranding token usage
Header Text ColorThe color of header text, including:
• the site name
• section headers
• card headers
• post titles
Branding token usage
Link Text ColorThe color of certain anchor link text, including:
• author profile links
• event links
Branding token usage
Brand Color - PrimaryThe default color for primary buttons and certain other page elements, including
• navigation menu items: active & hover
• certain accent colors
• profile badges
• profile page backdrop
Branding token usage
Branding token usage
Brand Foreground Color - PrimaryThe color of text within primary buttons and certain other page elements affected by Brand Color - PrimaryBranding token usage
Brand Color - SecondaryThe default color for secondary buttons and certain other page elements, including
• pills
Branding token usage
Brand Foreground Color - SecondaryThe color of text within primary buttons and certain other page elements affected by Brand Color - SecondaryBranding token usage
Background ColorThe background color of the pagesBranding token usage
Navigation Header Background ColorThe background color of the top navigation header barBranding token usage
Card Background ColorThe background color of card sections, including:
• info sections
• feed posts
• post detail pages
• profile / event / feed list cards
Branding token usage

Color values must be a valid hex code in the format #RRGGBBB.