Brand Settings

Brand Settings control the visual identity elements stored on each brand record: logo, colors, typography, favicon, and voice settings. These values are the source of truth for how your brand renders across all One Stack products.

ℹ️Brand Settings refers to the identity settings on an individual brand record — not account-level settings. Each brand (own or client) has its own independent settings.

Accessing Brand Settings

1. Navigate to Brand Library
2. Click on a brand card to open it
3. The brand detail page shows all identity tabs

Or from within a website or landing page editor:

1. Click the Brand icon in the editor toolbar
2. Click Edit Brand Settings — opens in a side panel

Logo

Your logo is stored in up to four variants:

Variant	Use Case
Primary (full color)	Main logo on white/light backgrounds
Monochrome	Single-color logo for limited-color printing or dark backgrounds where reversed isn't appropriate
Reversed	White or light-colored logo for use on the primary brand color or dark backgrounds
Icon	Symbol only (no wordmark) — used for favicons, app icons, and small sizes

Uploading a Logo Variant

1. In the Logo tab, click the variant you want to update
2. Click Upload
3. Select an SVG or PNG file:
   • SVG: Recommended — scales perfectly at all sizes, smaller file size
   • PNG: Accepted — use at least 1000×400px for good quality; 2x version recommended

💡If you only have one logo file, upload it to Primary first. Brand will auto-generate a monochrome version by desaturating the primary. Upload proper variants when available for best quality.

Logo Guidelines

• Keep backgrounds transparent (PNG) or use a viewBox (SVG)
• Logos are displayed on white backgrounds by default; avoid logos that are entirely white
• Maximum upload size: 10 MB
• Recommended aspect ratio: between 1:1 and 5:1 (wider is fine for wordmarks)

Colors

Each brand has five color roles:

Color Role	Purpose
Primary	Main brand color — used for primary buttons, links, section backgrounds, and Hub Bar accent
Secondary	Supporting color — used for secondary CTAs, hover states, and accents
Accent	Highlight color — used for badges, callouts, and emphasis elements
Background	Default page background (typically white or very light)
Text	Default body text color (typically near-black)

Editing Colors

1. Click the Colors tab
2. Click any color swatch
3. In the picker:
   • Enter a hex code (e.g., #0F4C81)
   • Use the saturation/brightness picker
   • Use the hue slider
4. Click Save

⚠️Changing the primary color triggers brand propagation suggestions. If you've propagated this brand to other products, click Propagate Changes after saving to update them.

Color Accessibility

The system automatically shows a contrast ratio badge for your text color against your background and primary colors:

• AA — Passes WCAG 2.1 AA (recommended minimum)
• AAA — Passes WCAG 2.1 AAA (best accessibility)
• Fail — Insufficient contrast (a warning is shown; you can still save)

Typography

Heading Font

The heading font is applied to all H1–H4 elements in websites, landing pages, and generated collateral.

1. Click the Typography tab
2. Click the Heading Font dropdown
3. Search by font name or browse by category (Serif, Sans-Serif, Display)
4. Select a font — a live preview renders immediately
5. Set the Heading weight: Light (300) / Regular (400) / Medium (500) / Semibold (600) / Bold (700)

Body Font

Applied to paragraphs, lists, form labels, and supporting text.

1. In the Typography tab, click Body Font
2. Select a font from the dropdown
3. Set the Body weight (typically Regular 400 or Medium 500)
4. Set the Base font size (16px is default; accepted range: 14–20px)

Font Pairing Preview

After selecting both fonts, the preview panel shows a sample heading + body text block in the chosen combination. This matches how text will render on websites and in collateral.

💡For most MSP brands, a strong sans-serif heading (e.g., Inter, Outfit, Plus Jakarta Sans) paired with a neutral body font (e.g., Inter, DM Sans) reads well on both screen and print.

Favicon

The favicon appears in the browser tab for any website using this brand.

1. Click the Favicon tab
2. Click Upload Favicon
3. Upload a .ico, .png, or .svg file
   • Recommended: 32×32px .ico or .svg
   • PNG accepted: 32×32px minimum, 512×512px recommended for high-DPI

The favicon is automatically applied to all websites associated with this brand.

Global Styles

Global styles set brand-level defaults that are applied across all websites and landing pages using this brand:

Setting	Description
Border radius	Rounded corner size for buttons and cards (0px = square, 8px = rounded, 9999px = pill)
Button style	Filled / Outlined / Ghost
Link decoration	Underline / No underline / Underline on hover
Section spacing	Compact / Normal / Spacious (padding above/below sections)
Shadow style	None / Subtle / Standard / Pronounced (card and element shadows)

Brand Voice

Brand voice settings guide the AI when generating copy for this brand (landing pages, collateral, QBR decks, proposals):

Setting	Options
Tone	Professional / Friendly / Technical / Casual / Authoritative
Communication style	Concise / Detailed / Storytelling
Formality	Formal / Semi-formal / Informal
Key values	Free-form tags (e.g., "Trust", "Innovation", "Local", "Enterprise-grade")
Avoid	Words or phrases the AI should not use

Tagline

The tagline is a short phrase (max 80 characters) displayed under the logo in collateral, email signatures, and optionally on websites.

Set or update it in the Overview tab of the brand detail page.

Saving Changes

All changes in Brand Settings save automatically as you make them (no explicit Save button is required). A "Saved" indicator appears in the top-right corner after each change.

If you've changed colors or typography, a Propagate Changes banner appears at the top of the page — click it to push updates to connected products.