> ## Documentation Index > Fetch the complete documentation index at: https://docs.tightknit.ai/llms.txt > Use this file to discover all available pages before exploring further. # Branding Guide > Configure and customize your community's branding assets and visual identity Your one-stop shop for all branding information, conveniently gathered here for easy handoff to your branding team. ## Image Assets | Image Asset | Details | Setting Location | | :------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- | | Slack Community Home Banner | Displayed at the top of the Home tab of the Tightknit Slack app, aka Community Home, for members of your community.
Recommended size is dimensions 1500 x 300 px. Max 2 MB file size.
[Create with Canva template →](https://www.canva.com/design/DAGryMy9U28/Ngt10mndlcRkNLWJAluKmg/view?mode=preview) | Slack: `General` under **Community** module | | Slack Community Horizontal Logo | Displayed in certain generated marketing images to represent your community. Recommended to use a horizontal or square 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.
[Create with Canva template →](https://www.canva.com/design/DAGq0MuoqZI/ymPRI7OEUW829YOTT6GFtw/view?mode=preview) | Slack: `General` under **Community** module | | Slack Community Icon (bot icon) | Used as the icon of the Tightknit bot user in Slack when it sends Slack 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.
[Create with Canva template →](https://www.canva.com/design/DAGreMnCVYM/GmC6Lw4QAF-Mmc7-REdZXA/view?mode=preview) | Slack: `General` under **Community** module | | Site Horizontal Logo | Appears in the top navigation bar of the community site. 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, 2000 x 2000 px resolution.
[Create with Canva template →](https://www.canva.com/design/DAGq0MuoqZI/ymPRI7OEUW829YOTT6GFtw/view?mode=preview) | Slack: `General` under **Community Site** module | | Site Icon | Appears in the top navigation bar of the community site alongside the site name, only if there is no **Site Horizontal Logo**. Recommended dimensions 256 x 256 px. Max 2 MB file size.
By default, it is the Slack workspace icon. Can also be configured as the profile photo for bot users.
[Create with Canva template →](https://www.canva.com/design/DAGreMnCVYM/GmC6Lw4QAF-Mmc7-REdZXA/view?mode=preview) | Slack: `General` under **Community Site** module | | Favicon | Appears next to the community site title in your browser tab. Recommended dimensions 256 x 256 px.
[Create with Canva template →](https://www.canva.com/design/DAGreMnCVYM/GmC6Lw4QAF-Mmc7-REdZXA/view?mode=preview) | Slack: `General` under **Community Site** module | | Social Media Image | Appears when a link to the community 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, 1500 x 1500 px resolution.
[Create with Canva template →](https://www.canva.com/design/DAGY7Q0XnU4/dcgaDcghf39gMv4rsn63Pg/view?mode=preview) | Slack: `General` under **Community Site** module | | Home page banner | Displayed at the top of the Home page of the community site. Recommended dimensions of at least 827 x 192 px. Very tall images may be clipped. Max 4 MB file size.
[Create with Canva template →](https://www.canva.com/design/DAGreDiBRPU/5J9bfIZ0ww_ab_AQ0mUKZQ/view?mode=preview) | Slack: `Home Page` under **Community Site** module | | Events page banner | Displayed at the top of the Events page of the community site. Recommended dimensions of at least 827 x 192 px. Very tall images may be clipped. Max 4 MB file size.
[Create with Canva template →](https://www.canva.com/design/DAGreDiBRPU/5J9bfIZ0ww_ab_AQ0mUKZQ/view?mode=preview) | Slack: `Settings` under **Events** module | | Groups page banner | Displayed at the top of the Groups page of the community site. Recommended dimensions of at least 827 x 192 px. Very tall images may be clipped. Max 4 MB file size.
[Create with Canva template →](https://www.canva.com/design/DAGreDiBRPU/5J9bfIZ0ww_ab_AQ0mUKZQ/view?mode=preview) | Slack: `Settings` in the Groups list modal, under **Community** module | | Content Library page banner | Displayed at the top of the Resources page of the community site. Recommended dimensions of at least 827 x 192 px. Very tall images may be clipped. Max 4 MB file size.
[Create with Canva template →](https://www.canva.com/design/DAGreDiBRPU/5J9bfIZ0ww_ab_AQ0mUKZQ/view?mode=preview) | Studio: Content Library settings | | Feed banners | Recommended dimensions of at least 827 x 192 px. Very tall images may be clipped. Max 4 MB file size.
[Create with Canva template →](https://www.canva.com/design/DAGreDiBRPU/5J9bfIZ0ww_ab_AQ0mUKZQ/view?mode=preview) | Slack: 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.
[Create with Canva template →](https://www.canva.com/design/DAGsO6Q-rNk/DzJdvK4fbdyfFaMcgME2HQ/view?mode=preview) | Slack: Event create/update panel, accessible by the `•••` menu next to the event in the [Events List modal](/events/getting-started#accessing-events) | | Content Resource cover images | Recommended 16:9 aspect ratio with dimensions of 1280 x 720 px. | Studio: Resource create/update panel within a Content Collection | | Blog post cover images | Recommended 16:9 aspect ratio with dimensions at least 480 x 270 px. | Slack: The first image attachment of a Slack message synced to the community site as a Blog-type post | | Badge images (Awards) | Recommended dimensions 500 x 500 px. Max 2 MB file size, 1500 x 1500 px resolution.
[Create with Canva template →](https://www.canva.com/design/DAGq0BwSHkA/7TBDlHSLGuCibQlmdbb_MQ/view?mode=preview) | Slack: [Award create/update panel](/gamification/awards) | | Profile frame images (Awards) | Used as profile photo overlays for users that earn an Award. Use a square PNG image with transparency. Recommended dimensions 512 x 512 px. Max 2 MB file size, 1500 x 1500 px resolution. We recommend making all your Badge frames the same size and shape so that users can easily generate new frames repeatedly on top of their profile photos.
[Create with Canva template →](https://www.canva.com/design/DAGq0It5Z9c/iNSkz1J4ovoOaXuro1MY7w/view?mode=preview) | Slack: [Award create/update panel](/gamification/awards) | | Certificate template (Awards) | Used as the background template when generating credentials / certificates for users that have earned an Award. Required dimensions 1500 x 1125 px. Max 2 MB file size.
[Create with Canva template →](https://www.canva.com/design/DAGq0A1weoA/bVMjsyTTKXdyczE3aV4k4A/view?mode=preview) | Slack: [Award create/update panel](/gamification/awards) | ## Branding Sets A *branding set* is a collection of branding token values that work with our design system on the community site. You can access your branding sets by clicking on the `Branding` button under the *Community 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 community site. The *Default Branding Set* cannot be deleted. ### Colors | Name | Description | Visual Guide | | :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Paragraph Text Color | The color of all non-header text | Paragraph text color usage | | Headline Text Color | The color of headline text, including:
• the site name
• section headers
• card headers
• post titles | Headline text color usage | | Link Text Color | The color of certain anchor link text, including:
• author profile links
• event links | Link text color usage | | Brand Color - Primary | The default color for primary buttons and certain other page elements, including
• certain accent colors
• profile badges
• profile page backdrop | Primary brand color usage
Primary brand color on profile | | Brand Foreground Color - Primary | The color of text within primary buttons and certain other page elements affected by *Brand Color - Primary* | Primary foreground color usage | | Brand Color - Secondary | The default color for secondary buttons and certain other page elements, including
• pills | Secondary brand color usage | | Brand Foreground Color - Secondary | The color of text within primary buttons and certain other page elements affected by *Brand Color - Secondary* | Secondary foreground color usage | | Background Color | The background color of the pages | Background color usage | | Header Background Color | The background color of the top header bar containing site search and account actions | Header background color usage | | Card Background Color | The background color of card sections, including:
• info sections
• feed posts
• post detail pages
• profile / event / feed list cards | Card background color usage | | Navigation Sidebar Background Color | The background color of the left navigation sidebar | Navigation sidebar background color usage | | Navigation Sidebar Text Color | The color of non-active nav item labels in the navigation sidebar | Navigation sidebar text color usage | | Navigation Sidebar Active Item Background Color | The background color of the currently selected nav item in the sidebar. Also determines the hover color for nav items. | Navigation sidebar active item background color usage | | Navigation Sidebar Active Item Text Color | The text color of the currently selected nav item in the sidebar | Navigation sidebar active item text color usage | Color values must be a valid hex code in the format `#RRGGBBB`. ### Fonts Each branding set picks two fonts: one for **headings** and one for **body text**. The heading font appears on page titles, post titles, card headers, and any element styled as a heading. The body font is used everywhere else. There are two sources to pick from, depending on your plan: | Source | Plan | What it is | | :------------------ | :----------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Default (Inter)** | All plans | The Tightknit default. Fast, neutral, no upload required. | | **Default catalog** | Momentum and above | A curated selection of well-licensed Google Fonts (Inter, Poppins, Roboto, Open Sans, Space Grotesk, Lora, Playfair Display, Source Serif). One click to pick, served by Google Fonts CDN, italic variants included automatically when the font has them. | | **Upload your own** | Enterprise | Drop your own `.woff` / `.woff2` files into Studio. Each face is hosted on our R2 bucket and served by `cdn.tightknit.ai`. | #### Picking a font In Studio, open `Site` → `Branding`, click into a branding set, and use the **Header** and **Body** dropdowns to pick the family for each. Each dropdown is set independently — the header defaults to `Default (Inter)` and can be changed to any catalog or custom family. When you pick from the default catalog, the font loads automatically the next time the community site is requested. There is nothing else to configure. #### Uploading custom fonts (Enterprise) In the same dropdown, choose `Upload a new font...`. Drop one or more `.woff` or `.woff2` files into the dialog. The family name is read from the font file's embedded metadata and pre-filled for you (you can edit before saving). Each file's weight (Regular, Bold, Light...) and style (normal or italic) are also detected automatically. Confirm the license checkbox (you must own a license to embed the font on your site), then click `Save`. The new family is immediately available in both the Header and Body dropdowns of the branding set you opened the dialog from. #### What weights and styles should you upload? Upload only the weights you actually want available. Browsers can fake bolder or lighter text by stretching the regular weight, but the result is visibly worse than a real font face for that weight. | Coverage level | Weights to upload | Italics | | :----------------------------------- | :---------------------- | :----------------------------------------------------- | | **Minimum** (just enough to render) | 400 (Regular) | None | | **Recommended** (covers Tailwind UI) | 300, 400, 500, 600, 700 | At least 400 italic | | **Full coverage** | 300, 400, 500, 600, 700 | Italics for every weight you use in headings or quotes | The recommended set covers the weights our community site themes use for buttons, post titles, navigation, and body copy. Without 700, bold text falls back to a synthetic-bold of the regular face, which usually looks too heavy or jagged. Without an italic at the matching weight, `` text and styled quotes render as a synthetic skew of the upright glyphs, which doesn't match a real italic design. The dialog auto-detects each file's weight and style from its embedded metadata. The dropdowns in the upload dialog are read-only when detection succeeds. To change a weight or style, upload the file for that specific variant. #### Frequently asked Community site pages are cached. The new font may take a minute to appear on already-loaded pages. A hard refresh (`Cmd-Shift-R` on macOS, `Ctrl-Shift-F5` on Windows) bypasses the cache immediately. The dropdown is locked because we read what your font file actually contains. If the file's metadata says Regular (not italic), selecting Italic in the UI wouldn't make text render in italic, it would just label the file incorrectly. To get true italic rendering, upload a separate file that is the italic variant of your font (for example, `MyFont-Italic.woff2`), and the dialog will accept it as the italic face. 2 MB per file. WOFF2 files for a single weight are typically well under that. If your file is larger, your foundry probably ships an unsubsetted version with full Unicode coverage. Most Latin-only websites can use a Latin-subset WOFF2 from your foundry's site. Yes. Each branding set has its own Header and Body picks. You can keep the default branding set on Inter, and a second branding set on a custom upload, then switch which is active depending on context. You'll need to source a licensed copy of the font files from your foundry, then upload them as a custom font (Enterprise plan). We can't link to or embed third-party hosted fonts directly. ### Shapes Each branding set includes two shape controls that theme the entire community site. Both are configured in Studio under **Site > Branding** by clicking into a branding set. #### Corner roundedness Controls how rounded buttons, cards, search inputs, and other UI surfaces appear across the site. Three presets are available: | Preset | Effect | | :-------------------- | :-------------------------------------------------------------------------------------------- | | **Square** | Fully angular corners on all elements, including pills and tags | | **Rounded** (default) | Moderate rounding that balances softness with structure | | **Pill** | Maximal rounding: buttons and controls approach a capsule shape, cards become heavily rounded | The corner style cascades to every UI element on the community site. Changing it in one place updates buttons, cards, search bars, tabs, and all other surfaces at once. #### Avatar shape Controls the shape of member avatars across the site. Avatar shape is independent of the corner style, so you can pair any avatar shape with any corner preset. | Preset | Effect | | :-------------------- | :---------------------------------------------------- | | **Square** | Sharp, flat-cornered avatars | | **Rounded** (default) | Soft-cornered avatars (the historical Tightknit look) | | **Circle** | Fully circular avatars | Combine corner style and avatar shape to create distinct visual identities. For example, use Square corners with Circle avatars for a modern, editorial feel, or Pill corners with Rounded avatars for a friendly, approachable look. ## Related topics - [General Settings](/community-site/general.md) - [Awards](/gamification/awards.md) - [Quickstart](/getting-started.md) - [Automated Onboarding Journeys](/guides/set-up-automated-onboarding-journeys.md) - [Zoom Meeting Templates](/guides/zoom-meeting-template-guide.md)