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 Asset | Details | Setting Location |
|---|---|---|
| Community Horizontal Logo | Used 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. Max 2 MB file size, 1500 x 1500 px resolution. | General under Community module |
| Community Icon | Used 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 Logo | Appears 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. Max 4 MB file size, 2000 x 2000 px resolution. | General under Companion Forums Site module |
| Site Icon | Appears 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 |
| Favicon | Appears next to the site title in your browser tab. Recommended dimensions 32 x 32 px. | General under Companion Forums Site module |
| Social Media Image | Appears 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. Max 4 MB file size, 2000 x 2000 px resolution. | General under Companion Forums Site module |
| Home page banner | Recommended dimensions of at least 827 x 192 px. Very tall images may be clipped. Max 4 MB file size. | Home Page under Companion Forums Site module |
| Feed banners | Recommended dimensions of at least 827 x 192 px. Very tall images may be clipped. Max 4 MB file size. | Feed create/update panel, accessible by the ••• menu next to feeds |
| Event cover images | Recommended 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 images | Recommended 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 |
| Badge images | Recommended dimensions 400 x 400 px. Max 2 MB file size, 1500 x 1500 px resolution. | Badge create/update panel |
| Badge profile frame images | Used as profile photo overlays for users that earn a Badge. Use a square PNG image with transparency. Recommended dimensions 500 x 500 px. Max 2 MB file size, 1500 x 1500 px resolution. | Badge create/update panel |
| Gamification Background Image | Used as the background for Social Media announcement style images, such as Badge awards for users. Recommended dimensions of 1200 x 600 px. Max 2 MB file size, 1500 x 1500 px resolution. | 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
| Name | Description | Visual Guide |
|---|---|---|
| Paragraph Text Color | The color of all non-header text |  |
| Header Text Color | The color of header text, including: • the site name • section headers • card headers • post titles |  |
| Link Text Color | The color of certain anchor link text, including: • author profile links • event links |  |
| Brand Color - Primary | The default color for primary buttons and certain other page elements, including • navigation menu items: active & hover • certain accent colors • profile badges • profile page backdrop |   |
| Brand Foreground Color - Primary | The color of text within primary buttons and certain other page elements affected by Brand Color - Primary | |
| Brand Color - Secondary | The default color for secondary buttons and certain other page elements, including • pills |  |
| Brand Foreground Color - Secondary | The color of text within primary buttons and certain other page elements affected by Brand Color - Secondary |  |
| Background Color | The background color of the pages |  |
| Navigation Header Background Color | The background color of the top navigation header bar |  |
| Card Background Color | The background color of card sections, including: • info sections • feed posts • post detail pages • profile / event / feed list cards |  |
Color values must be a valid hex code in the format #RRGGBBB.