Set your brand standards once and Spekit applies them everywhere. Every Spek your team creates picks up the colors, fonts, layouts, and logos you configure in Brand Studio, so content stays on brand without extra work from your creators.
ℹ️ Prerequisite: Only Account Admins can configure Brand Studio. Log in to the Spekit Hub (Web App) before you start.
ℹ️ Brand Studio controls the content you create. It does not control how the Spekit product itself looks. For that, see [Admin Guide] Set up Custom Branding for the Spekit product.
1. Which logo goes where
Spekit uses 2 separate logo settings. They are independent. Changing one does not change the other.
| Setting | Where to find it | What it controls |
|---|---|---|
| Brand Studio logos | Brand Studio > Logos | The content you create, including header components and Deal Room landing pages |
| Custom Branding | Admin Tools > Custom branding | The Spekit product: the Hub (Web App), Sidekick (Chrome Extension), AI Sidekick, and embedded Speks |
ℹ️ You do not need to do anything. The logos you already uploaded in Custom Branding were copied into Brand Studio before this change went live. Your content will look the same as before. You only need to act if you want your content to use a different logo than your Spekit product.
💡 Pro Tip: Use Brand Studio logos for anything a customer sees and Custom Branding for your internal look.
2. How to set up Brand Studio
Brand Studio has a settings panel on the left and a live preview on the right. The preview updates as you make changes, so you can see the result before you save.
- Open the Spekit Hub (Web App).
- Click the gear icon to open Settings.
- Click Brand Studio in the left menu.
- Use the tabs to configure your settings. The preview on the right shows how your choices will look.
- Click Save changes.
ℹ️ Use Undo to step back one change, or Reset to return the tab to its previous saved state.
3. Brand Studio settings
Brand Studio is organized into 5 tabs. Use the table below to find a setting and see what it affects in your content.
| Tab | Setting | Options |
|---|---|---|
| Type | Header font | Select from the available font library |
| Body font | Select from the available font library | |
| Heading text weight | Regular, Medium, or Bold | |
| Header style | Default, Underlined, Highlighted, Gradient, or Overline | |
| Colors | Main | Primary buttons, tags, default links, heading accents |
| Secondary | Secondary buttons, gradient headings, optional links and outlines | |
| Accent | Block quote backgrounds, accent dividers, optional links and outlines | |
| Card background | Cards, footers, and content surfaces | |
| Page background | Page background behind all content | |
| Primary text | Default text, body copy, and headings | |
| Secondary text | Callout content text, block quote text | |
| Components | Card style | Flat, Shadow, or Outlined |
| Shadow intensity | Light, Medium, or Heavy | |
| Card corner radius | Square, Rounded, or Pill | |
| Card padding | Compact, Comfortable, or Spacious | |
| Hover effect | None, Darken, Lift, or Glow | |
| Link style | Underline, Color, or Bold | |
| Link color | Main, Secondary, or Accent | |
| Button style | Filled, Outlined, or Ghost | |
| Button radius | Square, Rounded, or Pill | |
| Section dividers | On or Off | |
| Divider style | Subtle, Bold, Dotted, or Accent Color | |
| Quote style | Left Border, Filled, Minimal, or Pull Quote | |
| Callout style | Filled, Left Border, or Outlined | |
| Logos | Full color logos | Logotype and logomark |
| White logos | Logotype and logomark | |
| Presets | Preset styles | Modern Minimal, Warm & Friendly, Corporate Pro, or Dark Mode |
ℹ️ The Colors tab groups these into Brand colors, Background colors, and Text colors on screen. The Components tab groups them into Card style, Links & Buttons, Dividers, Block quotes, and Call outs.
4. Add your content logos
The Logos tab holds the logos that appear in your content. Upload 4 versions so Spekit can pick the right one for light and dark backgrounds.
- Open Brand Studio and click the Logos tab.
- Click the upload icon under each logo you want to set.
- Select your file and click Open.
- Click Save changes.
SVG files are strongly recommended so your logo stays sharp at any size. You can also upload a transparent PNG.
| Logo | Recommended size |
|---|---|
| Full color logotype | At least 1200 x 300 px |
| Full color logomark | At least 512 x 512 px |
| White logotype | At least 1200 x 300 px |
| White logomark | At least 512 x 512 px |
💡 Pro Tip: Upload the white versions even if you mostly use light backgrounds. Dark headers and dark Deal Room sections will use them automatically.
ℹ️ Click the trash icon next to a logo to remove it.
5. Use your logo in content
Once your logos are uploaded, content creators can pull them into a Spek in 2 ways.
Insert a header component
- Open a Spek in the editor.
- Type
/headeror open the Components menu. - Pick a header style from the list.
- The logo area fills in automatically from your Brand Studio logos.
Insert a logo on its own
- Open a Spek in the editor.
- Click Insert, then Logo.
- Pick the version you want: Color or White.
ℹ️ If a header shows "Logo not configured", no logo has been uploaded in Brand Studio > Logos. Upload one, then reinsert or refresh the header.
6. Preset styles
Not sure where to start? Brand Studio includes 4 presets you can apply and then customize.
| Preset | Best for |
|---|---|
| Modern Minimal | Clean, understated, content-forward |
| Warm & Friendly | Approachable tones with softer design elements |
| Corporate Pro | Polished and professional for enterprise environments |
| Dark Mode | High contrast with a dark color palette |
7. Accessibility standards
Brand Studio has a built-in accessibility checker in the Colors tab. As you pick colors, it flags combinations that do not meet WCAG AA standards.
| Text type | Minimum contrast ratio |
|---|---|
| Normal text | 4.5:1 |
| Large text, 18px and above, bold | 3:1 |
Review your colors against these standards before you save and roll out to your team.
8. Best practices
A few habits make Brand Studio much easier to live with. These are the ones that save the most rework.
| Practice | Why it helps |
|---|---|
| Start with a preset | Pick the preset closest to your brand, then customize. Faster than building from scratch. |
| Set up Brand Studio before your team creates content | Speks created before setup will not pick up your standards automatically. |
| Run the accessibility check before saving | Color combinations that fail WCAG AA are hard for some users to read. |
| Get your brand assets first | Collect your hex codes, approved fonts, logo files, and brand guidelines before you sit down to configure. |
| Test in a real Spek | Create a test Spek and check how your settings look before rolling out. |
| Treat your settings as a living standard | When your brand changes, update Brand Studio first. Changes propagate automatically. |