> ## 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 Card = ({imgUrl, title, description, href, horizontal = false, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  const handleClick = e => {
    e.preventDefault();
    if (newTab) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = href;
    }
  };
  return <div className={`not-prose relative my-2 p-[1px] rounded-xl transition-all duration-300 ${isHovered ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <a href={href} onClick={handleClick} className={`not-prose flex ${horizontal ? 'flex-row' : 'flex-col'} font-normal h-full bg-white overflow-hidden w-full cursor-pointer rounded-[11px] no-underline`}>
        {imgUrl && <div className={`relative overflow-hidden flex-shrink-0 ${horizontal ? 'w-[30%] rounded-l-[11px]' : 'w-full'}`} onClick={e => e.stopPropagation()}>
            <img src={imgUrl} alt={title} className="w-full h-full object-cover pointer-events-none select-none" draggable="false" />
            <div className="absolute inset-0 pointer-events-none" />
          </div>}
        <div className={`flex-grow px-6 py-5 ${horizontal ? 'w-[70%]' : 'w-full'} flex flex-col ${horizontal && imgUrl ? 'justify-center' : 'justify-start'}`}>
          {title && <h2 className="font-semibold text-base text-gray-800 m-0">{title}</h2>}
          {description && <div className={`font-normal text-gray-500 re leading-6 ${horizontal || !imgUrl ? 'mt-0' : 'mt-1'}`}>
              <p className="m-0 text-xs">{description}</p>
            </div>}
        </div>
      </a>
    </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 Para modal interface. If you're looking to customize the modal appearance, refer to the <Link label="Modal Customization Guide" href="/v2/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/Yc456VjJn0ZAAvY0/images/v2/developer-portal-colors-configuration.png?fit=max&auto=format&n=Yc456VjJn0ZAAvY0&q=85&s=039cc9067520c7dc81530ae3233b9749" alt="Developer Portal Brand Colors Configuration" width="808" height="208" data-path="images/v2/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/Yc456VjJn0ZAAvY0/images/v2/developer-portal-font-selection.png?fit=max&auto=format&n=Yc456VjJn0ZAAvY0&q=85&s=6f80b69f712c7b6604da1f7c6f31e42f" alt="Developer Portal Font Selection" width="808" height="275" data-path="images/v2/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/Yc456VjJn0ZAAvY0/images/v2/developer-portal-logos-upload.png?fit=max&auto=format&n=Yc456VjJn0ZAAvY0&q=85&s=98d7824e66d51012b0df3bc0355325af" alt="Developer Portal Logo Upload" width="808" height="239" data-path="images/v2/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/Yc456VjJn0ZAAvY0/images/v2/developer-portal-social-links.png?fit=max&auto=format&n=Yc456VjJn0ZAAvY0&q=85&s=996314ef80d0c90251a28e140d2a6506" alt="Developer Portal Social Links Configuration" width="808" height="278" data-path="images/v2/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 Para modal interface. For modal customization, see the <Link label="Modal Customization Guide" href="/v2/react/guides/customization/modal" />.
</Warning>

## Next Steps

<CardGroup cols={2}>
  <Card title="Portal Setup" description="Configure technical settings, networks, and domain security for your integration." href="/v2/react/guides/customization/developer-portal-setup" />

  <Card title="Payment Integration" description="Set up payment providers and transaction features for crypto buying and selling." href="/v2/react/guides/customization/developer-portal-payments" />

  <Card title="Security Settings" description="Configure authentication methods, session management, and transaction permissions." href="/v2/react/guides/customization/developer-portal-security" />
</CardGroup>