Buy Template Now $65→
Skip to main content

Brand Configuration

The Brand Configuration file contains your application's core branding settings. It is used throughout Pulse AI to manage your logo, brand name, highlighted brand text, and navigation call-to-action buttons.

Updating this file allows you to rebrand the entire template from a single location.

File Location

content/
└── shared/
    └── brand.ts

Usage & Configuration Structure

import { BRAND, CTA } from "@/components/content/shared/brand";

The file exports two objects:

BRAND
CTA

Example:

export const BRAND = {
  name: "Pulse",
  highlight: "Ai",
  logo: "/logo.svg",
};
 
export const CTA = {
  primary: {
    label: "Get Started",
    link: "/signup",
  },
  secondary: {
    label: "Login",
    link: "/login",
  },
};

Brand Configuration

The BRAND object controls your website's visual identity.

export const BRAND = {
  name: "Pulse",
  highlight: "Ai",
  logo: "/logo.svg",
};

Brand Name

The name property defines the primary portion of your brand name.

name: "Pulse"

Example:

name: "Acme"

Result:

Acme

This value is displayed throughout the application wherever the brand name is used.

Highlighted Text

The highlight property defines the accent portion of your brand name.

highlight: "Ai"

Example:

highlight: "Cloud"

Result:

AcmeCloud

The highlighted text is automatically styled using your primary theme color.

This is commonly used to emphasize part of a product name.

Examples:

PulseAI
AcmeCloud
LaunchPro
GrowthHub

The logo property specifies the path to your logo image.

logo: "/logo.svg"

Example:

logo: "/images/brand/logo.svg"

Your logo file should be placed inside the public directory.

Example:

public/
└── images/
    └── brand/
        └── logo.svg

Supported formats include:

  • SVG
  • PNG
  • JPG
  • WEBP

Where BRAND Is Used

The BRAND object is used throughout the application.

Examples include:

  • Navbar Logo
  • Footer Logo
  • Browser Metadata
  • Marketing Pages
  • Authentication Pages
  • Copyright Notices

Updating the values inside BRAND automatically updates all connected components.

Header Call-To-Actions

The CTA object controls the buttons displayed inside the Navbar.

export const CTA = {
  primary: {
    label: "Get Started",
    link: "/signup",
  },
  secondary: {
    label: "Login",
    link: "/login",
  },
};

Primary CTA

The primary button is used for your main conversion action.

Example:

primary: {
  label: "Start Free Trial",
  link: "/signup",
}

Common examples:

  • Get Started
  • Start Free Trial
  • Join Now
  • Book Demo
  • Create Account

Secondary CTA

The secondary button is typically used for returning users.

Example:

secondary: {
  label: "Sign In",
  link: "/login",
}

Common examples:

  • Login
  • Sign In
  • Dashboard
  • Contact Sales

Changing CTA Destinations

Update the link property to change button destinations.

Example:

primary: {
  label: "Get Started",
  link: "/register",
}

or

primary: {
  label: "Book Demo",
  link: "/demo",
}

Navbar Integration

The Navbar automatically reads CTA values from the Brand Configuration.

Example:

<Button href={CTA.secondary.link}>
  {CTA.secondary.label}
</Button>
 
<Button href={CTA.primary.link}>
  {CTA.primary.label}
</Button>

No additional configuration is required.

Example Rebrand

Original:

export const BRAND = {
  name: "Pulse",
  highlight: "Ai",
  logo: "/logo.svg",
};

Updated:

export const BRAND = {
  name: "Acme",
  highlight: "Cloud",
  logo: "/images/acme-logo.svg",
};

Result:

AcmeCloud

The Navbar, Footer, and all branding-related components will automatically reflect the new values.

The Brand Configuration file provides a centralized location for managing your application's identity.

Use it to:

  • Update your brand name
  • Change highlighted text
  • Replace your logo
  • Configure navbar CTA buttons

Most branding changes can be completed by editing a single file:

content/shared/brand.ts

without modifying any components.

Nextlogo