Skip to main content
MortgageMate
Documentation
Docs/Branding/Brand Builder

Brand Builder

Create fully customized themes for your calculators.

What is Brand Builder?

Brand Builder is a visual editor that lets you create custom themes from scratch or by modifying an existing preset. Every aspect of the calculator appearance can be customized to match your brand.

Start from Preset

Choose any of the 5 preset themes as a starting point, then customize individual properties to match your brand.

Live Preview

See your changes in real-time with an interactive preview that shows exactly how your calculator will look.

Customization Options

Brand Builder organizes customization into four expandable sections:

Colors

Customize the complete color palette including background, text, primary buttons, success/warning/error states, borders, and input fields.

  • Background & Card colors
  • Primary & Secondary colors
  • Text & Muted text colors
  • Success, Warning, Error states
  • Border & Input styling
  • Focus ring color

Typography

Choose fonts and sizing to match your brand identity.

  • Body font family (Google Fonts supported)
  • Heading font family
  • Font sizes (xs through 3xl)
  • Font weights

Styling

Fine-tune visual details like corners and shadows.

  • Border radius (sm, md, lg, full)
  • Shadow depth (sm, md, lg)
  • Preset style options (Sharp, Rounded, Pill)

Chart Colors

Define the color palette for charts and graphs in calculator results.

  • Up to 6 chart colors
  • Click to edit individual colors
  • Visual preview of palette

Creating a Custom Theme

1

Open Brand Builder

Go to Theme Gallery and click Create Custom Theme, or navigate directly to Brand Builder from the dashboard.
2

Name Your Theme

Enter a name and optional description for your theme. This helps you identify it later.
3

Choose a Base Theme

Select a preset theme to start from. This sets the initial values for all properties. Choose the preset closest to your desired look.
4

Customize Properties

Expand each section to customize:
  • Colors — Click color swatches to open the picker
  • Typography — Select fonts from the dropdown
  • Styling — Choose radius and shadow presets
  • Chart Colors — Click to edit each chart color
5

Preview Your Changes

Watch the live preview update as you make changes. Click Fullscreen for a larger view.
6

Save Your Theme

Choose to save as Personal (private) or Community (shared with other users).

Save Options

When saving your theme, you have two options:

Save Personal

Private to your account. Only you can see and use this theme.

  • Appears in "My Themes" tab
  • Can be applied to any of your domains
  • Edit or delete anytime

Save Community

Shared publicly. Other users can browse and apply your theme.

  • Appears in "Community" tab for everyone
  • Tracks download count and rating
  • Share your creativity with others

Editing Existing Themes

You can modify themes you've previously created:

From Theme Gallery:

  1. 1.Go to the My Themes tab
  2. 2.Hover over the theme you want to edit
  3. 3.Click the menu icon (three dots)
  4. 4.Select Edit Theme
Save Changes

Updates your existing theme in place. Domains using this theme will automatically reflect the changes.

Save As Copy

Creates a new theme with your changes, preserving the original. Great for creating variations.

Resetting Changes

Reset All

Click the Reset All button next to the base theme selector to restore all properties to the selected preset's defaults. This is useful if you want to start fresh without switching to a different base theme.

Google Fonts

Brand Builder supports Google Fonts for typography. Select from popular options like Inter, DM Sans, Space Grotesk, Crimson Pro, and more.

Ready to build your brand?

Create a custom theme that perfectly matches your website.

Open Brand Builder
Theme GalleryWhite Label