Custom Branding in leafplanner: Login Page and Brand Palette Options

leafplanner understands that every enterprise client brings with them a unique identity and visual brand. To support this, we offer robust branding customization options for enterprise deployments. These options are especially useful for aligning the platform experience with your firm or family office’s brand, enhancing user trust, consistency, and familiarity across touchpoints.

Skip to Example

Importantly, because leafplanner supports both light and dark mode, we encourage clients to define complementary palettes for each mode to maintain accessibility standards and ensure consistent visual clarity across different viewing environments.

This article covers two key areas of branding customization in leafplanner:

Login Page Customization
Custom Brand Palette Implementation

1. Login Page Customization

The login page is often the first interaction users have with the platform. leafplanner provides flexible branding tools to make this experience truly yours. You can tailor both the textual elements and color styling independently from the main app interface.

Textual Branding Options

Option	Description	Default Value
Branding Text	A prominent message displayed on the login page, such as a company tagline or value prop.	`"Organize what matters. Empower who matters."`
Branding Quote	Optional. Appears under the Branding Text, useful for mission statements or taglines.	(empty if Branding Text is set)
Branding Author	Optional attribution shown below the quote.	(empty if Branding Text is set)

Example configuration:

"brandingText": "Dedicated to Elevating Your Wealth Experience"

Color Customization: Login-Only Colors

AuthLight: Applies only to the login page in light mode
AuthDark: Applies only to the login page in dark mode

These allow a visually distinct login experience without affecting the rest of the platform.

Key color properties within Light and Dark:

Property	Description	Default (Light)	Default (Dark)
Primary	Color for login buttons and highlights.	`#05966A`	`#05966A`
Accent	Light background color behind icons/avatars or used to signal focus.	`#ECFDF5`	`#102821`
SideBarColor	Sidebar background color on login screen, and optionally other grey-background areas.	`#E7E7E7`	`#333333`
Logo	An SVG logo specific to login screen and color mode (dark/light).	custom per client	custom per client

Horizontal versions of company logo will look best.

2. Custom Brand Palette Implementation (Platform-Wide)

Beyond the login page, leafplanner allows enterprise clients to define platform-wide color themes using the Light and Dark palettes. These apply across the app’s UI once the user is logged in.

Color Palette Properties

Property	Description	Notes
Primary	Used for all active action buttons throughout the application.	Must be in `#HEX` format; button text color adjusts for accessibility.
Accent	Used for active indicators, backgrounds behind icons, avatars, and visual emphasis areas.	Default is mode-specific.
SideBarColor	Applies to the left-hand sidebar, guides background, navbar background, and node buttons on dashboard.	Useful for adapting brand greys or bold accent backgrounds.
Logo	SVG logo used throughout the application. Light and dark versions recommended for optimal visibility.	Logo may differ from login page logo.

⚠️ Important Notes:

The error color, secondary (info) blue, and primary background color are fixed platform-wide and cannot be customized.
Contrast and accessibility standards are maintained automatically for all Primary button configurations.

Example Custom Palette Setup

Here's an example of a complete branding configuration for an enterprise client with a deep navy primary color and ivory accents:

"Light": {

  "Primary": "#1D3557",
  "Accent": "#F8F4E3",
  "SideBarColor": "#F2F2F2",
  "Logo": "<svg>...</svg>"
},
"Dark": {
  "Primary": "#A8DADC",
  "Accent": "#2B2B2B",
  "SideBarColor": "#1C1C1E",
  "Logo": "<svg>...</svg>"
}

And for the login page:

"Light": {
  "Primary": "#1D3557",
  "Accent": "#F8F4E3",
  "SideBarColor": "#ECECEC",
  "Logo": "<svg>...</svg>"
},
"Dark": {
  "Primary": "#A8DADC",
  "Accent": "#2B2B2B",
  "SideBarColor": "#141414",
  "Logo": "<svg>...</svg>"
}

Summary

leafplanner's custom branding features empower enterprise clients to align the platform with their unique visual identity. With distinct control over login-page presentation and application-wide palettes, clients can ensure a polished, consistent experience for family members, advisors, and staff.

Please contact us for more information.