Your one-stop shop for all branding information, conveniently gathered here for easy handoff to your branding team.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.
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 → | 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 → | 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 → | Slack: General under Community module |
| Site Horizontal Logo | Appears in the top navigation bar of the companion 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 → | Slack: General under Companion Forums Site module |
| Site Icon | Appears in the top navigation bar of the companion 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 → | Slack: General under Companion Forums Site module |
| Favicon | Appears next to the companion site title in your browser tab. Recommended dimensions 256 x 256 px. Create with Canva template → | Slack: General under Companion Forums Site module |
| Social Media Image | Appears when a link to the companion 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 → | Slack: General under Companion Forums Site module |
| Home page banner | Displayed at the top of the Home page of the companion 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 → | Slack: Home Page under Companion Forums Site module |
| Events page banner | Displayed at the top of the Events page of the companion 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 → | Slack: Settings under Events module |
| Groups page banner | Displayed at the top of the Groups page of the companion 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 → | Slack: Settings in the Groups list modal, under Community module |
| Content Library page banner | Displayed at the top of the Resources page of the companion 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 → | 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 → | 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 → | Slack: Event create/update panel, accessible by the ••• menu next to the event in the Events List modal |
| 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 companion 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 → | Slack: Award create/update panel |
| 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 → | Slack: Award create/update panel |
| 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 → | Slack: Award create/update panel |
Branding Sets
A branding set is a collection of branding token values that work with our design system on the companion site. You can access your branding sets by clicking on theBranding 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 |  |
| Headline Text Color | The color of headline 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 • 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 |  |
| Header Background Color | The background color of the top header bar containing site search and account actions |  |
| Card Background Color | The background color of card sections, including: • info sections • feed posts • post detail pages • profile / event / feed list cards |  |
| Navigation Sidebar Background Color | The background color of the left navigation sidebar |  |
| Navigation Sidebar Text Color | The color of non-active nav item labels in the navigation sidebar |  |
| 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 Text Color | The text color of the currently selected nav item in the sidebar | |
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, openWebsite → 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 companion site is requested. There is nothing else to configure.
Uploading custom fonts (Enterprise)
In the same dropdown, chooseUpload 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 |
<em> 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
I uploaded a font but the site still shows the old one
I uploaded a font but the site still shows the old one
Companion 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.Italic in my dropdown is locked. How do I make text italic?
Italic in my dropdown is locked. How do I make text italic?
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.What's the per-file size limit?
What's the per-file size limit?
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.
Can I have different fonts for different branding sets?
Can I have different fonts for different branding sets?
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.
What if my font isn't on Google Fonts and we don't own the file?
What if my font isn't on Google Fonts and we don't own the file?
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.