Falaah Falaah AI

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

Go to Settings → Organization → Brand Center. Admin or Owner role required. The Brand Center has four tabs: Brand Identity, Legal & Receipt, Email & Messaging and Saved Themes.

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 #3D4F5F (Muin slate)
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

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

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.

Start from a preset

Under Brand Identity, the Theme section offers 20 ready-made looks, including Ramadan giving, Eid celebration, Eid al-Adha and Muharram & Islamic New Year. Every preset passes our readability check.

  1. Pick a preset card. Picking a preset replaces your colors.
  2. We save a copy of your current brand first, so you can undo.
  3. A toast says “Preset applied.” with an Undo button that puts your previous brand back.

You can change any color after you apply a preset.

We keep your text readable

When you save or import a brand, we check that text can be read against the color behind it. If it cannot, we adjust the text color just enough to pass. We adjust:

  • Page text and secondary text
  • Button text
  • Header text
  • Form labels

We never change your brand colors (primary, secondary, accent, background). When your main color is light against the page background, we suggest a darker shade instead, and you choose whether to use it.

After a save that needed changes, a banner says “We adjusted N text colors so everyone can read your pages.” It shows each change with a before and after swatch. Select Looks good to dismiss it, or Undo adjustments to go back to the colors you chose.

Undo and version history

Every change to your brand is saved. Open the Saved Themes tab and find Version history.

  • Each row shows when it changed, who changed it, and what happened (for example “Before website import” or “Before preset”).
  • Select Restore to bring an earlier version back in one click. We save your current brand first, so a restore can be undone too.
  • We keep your 50 most recent versions, plus every theme you save by name.

Preview your emails

The live preview has four tabs: Giving Page, Kiosk, Tax Receipt and Email. The Email tab shows the real email your donors receive, rendered with your saved brand. Save your changes to see them there. Edit email styles takes you to the Email & Messaging tab.

Dark mode for public pages

Under Brand Identity, Dark mode lets visitors who use dark mode see a dark version of your pages. It is off by default.

  1. Turn on Show a dark version to visitors who use dark mode.
  2. Set the dark colors. We check them for readability the same way as your light colors.
  3. Use the light and dark toggle on the preview, then save.

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:

  1. Page-level branding: Settings on individual pages (highest priority)
  2. Tenant branding: Your organization’s default settings (this page)
  3. 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.

Pull your brand from your own website

You do not have to enter colors and fonts by hand. The Brand Center can read your existing site and propose a brand for you.

  1. Go to Settings -> Organization -> Brand Center.
  2. Find Pull design from your website and enter your Website URL, for example https://yourorg.org.
  3. Select Import from website. Analysis takes about a minute.
  4. Choose what to apply lists each item it found – colors, fonts, logo and style – so you accept them one at a time rather than all at once. Copy suggestions are offered separately.
  5. Select Apply selected. Muin confirms “Brand applied” and reminds you: “Review the change and Save to make it live.” Nothing is public until you save.
  6. Try another URL runs it again against a different page.

If your site has no strong branding, Muin says so plainly – “We couldn’t find strong branding on that page – review each item before applying” – rather than inventing a palette.

When it goes wrong

What you see What to do
“Select at least one thing to import.” Tick at least one item under Choose what to apply.
“Nothing to apply” The analysis found nothing it could use. Try your home page, or a page with your logo and headings on it.
“We couldn’t find strong branding on that page” Review each suggestion individually before applying; treat them as guesses.
The brand applied but the public page looks unchanged You applied without saving. Save on the Brand Center screen to make it live.
One page looks different from the rest Individual pages can override any setting from their own Design tab. Check that page’s overrides.

Tips

  • Start with a preset or a design template that matches your style, then customize from there
  • Made a change you do not like? Restore an earlier version from Saved Themes → Version history
  • Pull your colors, fonts and logo straight from your website, then accept them item by item
  • 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

Next step