Branding

The Branding page lets you customize how Latch UI components look on your site. Navigate to Settings > Branding in the dashboard.

Customization levels

Latch offers three tiers of customization:

Generic

The default. Latch UI components render with the standard Latch design system (purple accent, system font, 8px border radius). No configuration needed.

Themed

Apply your publication’s brand identity to all UI components. Configure:

• Brand color — Primary button color, link color, and accent color (color picker + hex input)
• Hover color — Button hover state
• Logo — URL to your publication’s logo (SVG or PNG). Displayed in auth modals and paywalls.
• Border radius — Roundness of buttons, inputs, and cards (0px to 24px slider)
• Font family — Choose from common web fonts or specify a custom font stack
• Custom text — Override default headings and descriptions:
  • Auth modal heading and description
  • Paywall heading, description, and CTA button text

Tip

Themed mode is recommended for most publications. It provides strong brand consistency without requiring CSS knowledge.

Fully Custom

Everything in Themed, plus a CSS editor that injects custom styles directly into the Shadow DOM of every Latch UI component. Use this for:

• Changing text transforms, letter spacing, line heights
• Custom button styles beyond color
• Advanced layout adjustments
• Targeting specific internal component classes

/* Example custom CSS */
.latch-btn-primary {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.latch-modal {
  max-width: 480px;
}

Caution

Custom CSS is injected into every component’s Shadow DOM. Avoid overly broad selectors that could break component layouts. Test your changes using the live preview panel.

Live preview

The branding editor includes a live preview panel on the right side of the page. It shows a rendered mockup of your auth form and paywall modal, updated in real-time as you change settings.

Switch between Auth and Paywall preview tabs to see how both components look with your configuration.

How branding works on publisher sites

When a publisher loads @latch/ui on their site, the components automatically fetch the branding configuration from the Latch API using the publication’s publishable key:

GET /api/v1/branding
X-API-Key: pk_...

The response is cached for the page session. All components apply the branding on first render (or re-render once the config arrives).

1. Publisher calls init({ apiKey: 'pk_...' }) to initialize the SDK
2. Publisher imports @latch/ui — this triggers the branding fetch
3. Components render with defaults, then re-render with branding when the fetch completes
4. All subsequent component renders use the cached branding config

Priority order

Branding values are applied in this priority order (highest wins):

1. HTML attributes on the component (e.g. <latch-paywall-modal message="Custom">)
2. Dashboard branding config (fetched from the API)
3. CSS custom properties set on the element or ancestor (e.g. --latch-primary)
4. Default values built into the component

This means publishers can still override specific values per-component using HTML attributes, while the dashboard branding provides publication-wide defaults.

API reference

Public endpoint

GET /api/v1/branding
X-API-Key: pk_...

Returns the branding configuration. Used by UI components automatically. Only accessible with a publishable key (pk_).

Admin endpoints

GET /api/v1/branding/admin
Cookie: (session)

PUT /api/v1/branding/admin
Cookie: (session)
Content-Type: application/json

{
  "brandingMode": "themed",
  "brandColor": "#e74c3c",
  "logoUrl": "https://example.com/logo.svg",
  "borderRadius": "12",
  "paywallHeading": "Become a member"
}

All fields are optional on PUT. Omitted fields are not changed. Set a field to null to clear it.

Available fields

Field	Type	Description
brandingMode	"generic" | "themed" | "custom"	Customization level
brandColor	string | null	Primary color hex (e.g. "#e74c3c")
brandColorHover	string | null	Hover color hex
logoUrl	string | null	Logo image URL
borderRadius	string | null	Border radius in pixels (e.g. "12")
fontFamily	string | null	CSS font-family value
authHeading	string | null	Auth modal heading
authDescription	string | null	Auth modal description
paywallHeading	string | null	Paywall heading
paywallDescription	string | null	Paywall description
paywallCtaText	string | null	Paywall CTA button text
customCss	string | null	Custom CSS (custom mode only)