> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Developer Portal Email Branding

> Customize the appearance of Welcome and OTP emails with your brand.

export const DeveloperPortalNextSteps = ({basePath, current, implementationHref, implementationTitle = "Implementation Guide", implementationDescription = "Continue with your selected integration path."}) => {
  const pages = [{
    id: "setup",
    title: "Portal Setup",
    description: "Configure API keys, environments, networks, domains, and email settings.",
    slug: "developer-portal-setup"
  }, {
    id: "email",
    title: "Email Branding",
    description: "Customize Welcome and OTP emails with your brand colors, fonts, and logos.",
    slug: "developer-portal-email-branding"
  }, {
    id: "payments",
    title: "Payment Integration",
    description: "Configure payment providers and transaction features for crypto onramps and offramps.",
    slug: "developer-portal-payments"
  }, {
    id: "security",
    title: "Security Settings",
    description: "Configure authentication methods, session management, and transaction permissions.",
    slug: "developer-portal-security"
  }];
  return <>
      <h2>Next Steps</h2>
      <div className="not-prose grid grid-cols-1 gap-4 md:grid-cols-2">
        {pages.filter(page => page.id !== current).map(page => <Card key={page.id} title={page.title} description={page.description} href={`${basePath}/${page.slug}`} />)}
        {implementationHref && <Card title={implementationTitle} description={implementationDescription} href={implementationHref} />}
      </div>
    </>;
};

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

Customize the visual appearance of Welcome and OTP emails sent to your users during authentication. These branding settings apply specifically to automated emails, not your application UI. If you use Para UI on web and want to customize the modal, refer to the <Link label="Modal Customization Guide" href="/v3/react/guides/customization/modal" />.

## Brand Colors

Configure your brand colors to match your company's visual identity in all email communications.

<Frame>
  <img src="https://mintcdn.com/getpara/7kQoZd8_2lgraXk0/images/v3/developer-portal-colors-configuration.png?fit=max&auto=format&n=7kQoZd8_2lgraXk0&q=85&s=1d82cb974b5a5aac84f906613aff2496" alt="Developer Portal Brand Colors Configuration" width="808" height="208" data-path="images/v3/developer-portal-colors-configuration.png" />
</Frame>

### Color Settings

* **Foreground**: Primary brand color for buttons, links, and highlights
* **Background**: Background color for email content areas
* **Accent (Optional)**: Secondary color for borders and accents

<Tip>
  - Use your primary brand color for the foreground to maintain consistency
  - Ensure sufficient contrast between foreground and background colors
</Tip>

## Typography

Select fonts that align with your brand identity and ensure readability across email clients.

<Frame>
  <img src="https://mintcdn.com/getpara/7kQoZd8_2lgraXk0/images/v3/developer-portal-font-selection.png?fit=max&auto=format&n=7kQoZd8_2lgraXk0&q=85&s=c88a8d0a54cd8f250d0cb89451e6be61" alt="Developer Portal Font Selection" width="808" height="275" data-path="images/v3/developer-portal-font-selection.png" />
</Frame>

## Logo Assets

Upload your company's visual assets to personalize email headers and branding.

<Frame>
  <img src="https://mintcdn.com/getpara/7kQoZd8_2lgraXk0/images/v3/developer-portal-logos-upload.png?fit=max&auto=format&n=7kQoZd8_2lgraXk0&q=85&s=db313c5b7200391e8e673536246059f3" alt="Developer Portal Logo Upload" width="808" height="239" data-path="images/v3/developer-portal-logos-upload.png" />
</Frame>

<Tip>
  * **Icon**: 80px × 80px square format for email headers
  * **Logo**: Maximum width 200px for email signatures and footers
  * **Format**: PNG or SVG recommended for best quality
  * **Background**: Transparent backgrounds work best
</Tip>

## Social Links

Add your company's social media and website links to email footers. These links will appear in all automated emails, providing users with easy access to your online presence.

<Frame>
  <img src="https://mintcdn.com/getpara/7kQoZd8_2lgraXk0/images/v3/developer-portal-social-links.png?fit=max&auto=format&n=7kQoZd8_2lgraXk0&q=85&s=94f7ac7069891089bde19f057e3056c1" alt="Developer Portal Social Links Configuration" width="808" height="278" data-path="images/v3/developer-portal-social-links.png" />
</Frame>

### Available Links

* **Website URL**: Your company's main website
* **X/Twitter Profile**: Twitter or X profile link
* **LinkedIn Profile**: Company or founder LinkedIn page
* **GitHub Profile**: Company or project GitHub repository

## Email Impact

These branding settings specifically affect:

### Welcome Emails

* Sent to new users during initial registration
* Display your logo, brand colors, and company links
* Include verification links with your custom styling

### OTP Emails

* Sent during two-factor authentication
* Use your brand colors and typography
* Include your logo for brand recognition

<Warning>
  Email branding settings do NOT affect your application UI. For web modal customization, see the <Link label="Modal Customization Guide" href="/v3/react/guides/customization/modal" />.
</Warning>

<DeveloperPortalNextSteps basePath="/v3/react/guides/customization" current="email" implementationHref="/v3/react/overview" implementationTitle="React & Web Guide" implementationDescription="Continue with the React and Web SDK integration path." />