Back to site

Branding your portal

The Contractor Codex is white-label by default. Everything your client sees — pages, PDFs, emails — is stamped with your branding. This page covers every branding lever.

Where branding settings live

/admin/settings for visual branding (business name, support email, accent color, portal greeting, logo upload). /admin/settings/email-domain for email-sending domain (separate page because it requires DNS verification).

Business name

The user-facing name that appears on every page header, PDF, and email. Set during org setup; change anytime in Settings.

The name shows up on:

  • The portal's left-side header (next to the logo)
  • Every quote, contract, and invoice PDF
  • Email "From" name + subject lines
  • The <title> tag of pages your clients see

Keep it short — 30 characters or less reads well in headers. Use your brand name, not your legal entity name.

Logo

Upload any image file up to 10MB. A square transparent PNG looks best, since the portal renders the logo against both light and dark surfaces.

Upload from Settings. The portal stores it via the storage layer and serves it through the /api/uploads/brand-logo-{orgId}.png endpoint. Next.js's image optimizer handles resizing for the surfaces it appears on (portal header, PDF reports, email signatures), so you don't need to pre-size anything.

If you don't upload a logo, the portal falls back to /public/logo.png (the platform's default mark). That's fine for testing but you should upload your own before going live.

Portal theme

The Portal Theme selector in Settings sets the color scheme you and your clients see across the portal and quote pages. There are 27 presets: one light theme ("Daylight") plus 26 dark-family themes, including editor-inspired looks like Dracula, Gruvbox, Monokai, One Dark, Solarized, and Sakura. The default is the dark Contractor Codex look.

Your choice is saved as the brand_theme setting and applied as data-theme on the page's <html> element, so the whole portal repaints to match. Each theme ships with its own accent color, and by default the portal uses it everywhere: buttons, links, nav highlights, badges. Switch themes and the accent switches with it.

If you want your brand color instead, untick Match my theme's accent color in Settings → Branding and pick your own hex. A custom accent always wins over the theme's accent.

Accent color

A single hex color that drives every button, link, badge, focus ring, and active-state highlight in the portal. Pick from your brand identity.

Set in Settings via the color picker. The color is stored as a hex value (e.g., #e7c98b) and applied via CSS custom properties on the <body> style. No build step — change takes effect on next page load.

The accent also drives:

  • The mobile address bar color (via theme-color meta tag)
  • The PDF accent stripe on quotes and contracts
  • Email link colors

Picking a good accent

  • Saturated, not too bright — pure colors compete with text; muted saturated colors read better.
  • Sufficient contrast against white text — links + buttons use white text on the accent background. Pick a color with at least 4.5:1 contrast against #ffffff.
  • Brand-aligned — if your logo is heavy blue, picking orange creates visual conflict. Match or complement.

Some examples that work

  • #e7c98b — warm tan (platform default)
  • #3b82f6 — bright blue
  • #10b981 — emerald green
  • #f97316 — orange
  • #8b5cf6 — purple

Support email

Two-purpose field:

  • Customer-facing display. Stamped on PDF footers and "Contact us" links so your clients have an address to reach you.
  • Recipient for client-activity notifications. When set, every quote-accepted, contract-signed, change-requested, and declined notification gets routed to this address instead of your login email. Leave the field empty if you'd rather receive them at the email you signed in with.

Set in Settings. Use a real, monitored inbox. The "From" address on outbound emails comes from your email-sending domain (next section), not this field.

Email-sending domain

Email works with no setup: everything the portal sends goes out from the shared portal address with your business name shown. If you want email to come from your own domain instead, set that up under Settings → Email Domain. The full walkthrough is in the Email-sending domain guide.

Where branding shows up

SurfaceLogoNameAccent
Portal header✓ (buttons)
Quote PDF✓ (accent stripe)
Contract PDF
Invoice PDF (Stripe-hosted)
Email notifications✓ (small)✓ (link color)
Hosted quote page
Hosted signing page

Per-client preview

Want to see what a specific client's portal looks like with your branding? From /admin/clients, click View Portal on any client card — you'll preview their portal as them (with your branding stamped on every surface).

Multi-org branding

If a single Clerk account belongs to multiple orgs (e.g., a freelancer who works at two companies), each org has its own branding. When the user switches orgs (via the org switcher in the portal header), the branding swaps to match.

For clients who have memberships in multiple orgs' portals, same deal — they switch portals via the dashboard's org switcher.