Branding & Appearance
Customize your organization's visual identity across all public-facing pages. Set colors, fonts, logo, and design templates.
Branding & Appearance lets you set the default visual identity for all your public-facing pages — giving pages, forms, event pages, and more. Changes apply across your entire organization and can be overridden on individual pages.
Accessing Branding Settings
Navigate to Settings → Branding & Appearance. Admin or Owner role required.
Design Panel
The Design Panel is your primary tool for customizing branding. It’s organized into sections:
Theme (Colors & Typography)
| Setting | Description | Default |
|---|---|---|
| Primary Color | Main brand color used for headers and accents | #3b82f6 |
| Secondary Color | Supporting color for gradients and secondary elements | #6366f1 |
| Accent Color | Highlight color for CTAs and interactive elements | — |
| Background Color | Page background | #f9fafb |
| Font Family | Body text typeface | Inter |
| Heading Font | Optional separate font for headings | — |
| Border Radius | Corner rounding for cards and buttons | 8px |
Header
Configure the header bar that appears on public pages:
- Logo: Upload your organization’s logo (PNG, JPG, SVG, GIF, or WebP — max 5MB)
- Logo Height: Control the logo display size
- Show Organization Name: Toggle your org name in the header
- Show Page Title: Toggle the page title in the header
Button Styling
Customize the primary call-to-action button:
- Background color, text color, border radius
- Size (small, medium, large) and width (full or auto)
- Hover effect (darken, lighten, or shadow)
Input Styling
Style form fields on pages with forms:
- Label color, input background, border color
- Focus ring color, placeholder text color
Layout
Control the page structure:
- Max Width: Content area width (default 672px)
- Padding: Inner spacing
- Card Style: Choose between card, flat, bordered, or glass
- Background Pattern: Optional dots, grid, or waves pattern
Organization Logo
Upload your logo from the Branding settings page. Supported formats:
- PNG, JPG, GIF, WebP: Validated by file content (magic bytes)
- SVG: Validated for XML/SVG markers
- Max size: 5MB
Your logo appears in the header of all public pages that use your default branding.
Design Templates
Choose from 40+ pre-designed templates across 7 categories. Templates provide a starting point — you can customize any setting after applying a template.
Access templates via the Template Gallery button in the Design Panel.
AI Brand Detection
Automatically extract your brand colors and fonts from an existing website:
- Enter your website URL in the Auto-detect from Website section
- Click Analyze — Muin fetches the page and extracts CSS colors and font declarations
- Review the detected colors, fonts, and logo in the comparison preview
- Click Apply Detected Branding to use the extracted values
Rate limit: 5 analyses per minute per organization.
Live Preview
The live preview on the right side of the settings page shows how your branding will look on public pages. It updates in real-time as you make changes and supports three device sizes:
- Desktop (1024px)
- Tablet (768px)
- Mobile (375px)
How Branding Resolution Works
Muin uses a 3-tier resolution system:
- Page-level branding — Settings on individual pages (highest priority)
- Tenant branding — Your organization’s default settings (this page)
- Platform defaults — Muin’s built-in defaults (lowest priority)
Each section (theme, header, inputs, button, layout) merges independently, so partial overrides at any level work correctly.
Tips
- Start with a design template that matches your style, then customize from there
- Use the AI brand detection feature to pull your existing website’s colors automatically
- Test your branding on the live preview at all three device sizes before saving
- Individual pages can override any setting via their own Design tab