Customer-facing style and typography

A separate palette and font set for the customer portal, with the real typefaces loaded into the settings page so the samples are honest.

What it is

The portal has its own token namespace inside the brand: its own primary and secondary colours, its own appearance, and display / body / mono font choices. The admin page loads the same Google Fonts stylesheet the customer portal will, so the sample text renders in the actual faces rather than a substitute.

Also called: portal colours · customer page fonts · how the customer page looks

See it
Customer-facing style and typography
🔒ridgelinepostframe.com/project/portal120
Barndominium
Framing · on schedule
The Customer-facing style block: portal colour fields plus the three font selectors with live sample text in the real faces. Sample data — no customer information appears here.
How it works
  1. 1Portal tokens live under brand_tokens.portal, separate from the email tokens.
  2. 2Font choices per slot resolve to a stylesheet URL, which the settings page injects into its own head for preview.
  3. 3The portal theme is derived from these by the portal theme library, which measures contrast.
Why we built it

The code states the separation explicitly — 'an inbox and a signed document want different surfaces, and one should never silently restyle the other' — and notes the derived portal theme measures contrast, so a brand colour cannot produce unreadable text on a page a customer has to sign.

The problem
  • Email styling and portal styling shared one palette, so one change altered both.
  • Font previews were rendered in fallback faces and lied about the result.
Sound familiar?
What you get
The customer-facing page can be styled independently of email.
What you see in the picker is the typeface the customer gets.
Contrast is measured rather than assumed.

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →