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

# Branding preview

> Developer tool for previewing all semantic color token pairs in light and dark mode simultaneously.

The Branding Preview screen is a developer utility for verifying tenant theme tokens at the route `/dev/branding-preview`.

## Overview

The page renders every semantic surface and foreground token pair as side-by-side swatches in both light and dark mode simultaneously. Token groups include surfaces, interactive, form, status, and palette. It uses `runTenantVarsAuditAndReport` to check WCAG contrast ratios and `useActiveTheme` to reflect the current tenant theming override. An audit result badge and copy-to-clipboard for token names are available. The page is marked as a developer-only tool — not intended for end-user workflow.

## Who it's for

Required permission: `pf.wizards.admin`

## Before you start

* You must hold the `pf.wizards.admin` permission.
* This page is intended for developers and design-system reviewers verifying tenant branding changes.

## Steps

<Steps>
  <Step title="Open Branding Preview">Navigate to `/dev/branding-preview`.</Step>
  <Step title="Review token swatches">Browse token groups (surfaces, interactive, form, status, palette) in light and dark mode side by side.</Step>
  <Step title="Check contrast audit results">Review WCAG contrast audit results surfaced by the audit report.</Step>
  <Step title="Copy token names">Click a swatch to copy the CSS variable name for use in code.</Step>
</Steps>

## Key concepts

* Semantic color tokens — CSS variables driving all UI colors; no hardcoded hex values
* WCAG contrast audit — checks foreground/background pairs against accessibility thresholds
* `useActiveTheme` — reflects the active tenant white-label override

## Related

<Columns cols={2}>
  <Card title="Platform Foundation" icon="layer-group" href="/pf/overview">
    Platform Foundation overview.
  </Card>

  <Card title="Governance & parity" icon="scale-balanced" href="/governance/index">
    Documentation coverage and governance.
  </Card>
</Columns>

<Note>
  This page documents shipped product behavior. It is not medical, legal, or
  billing advice. Verify against your organization's policies and applicable
  regulations before using it for clinical, compliance, or billing decisions.
  Protected health information (PHI) shown in the product is governed by your
  tenant's access controls and is never exposed in this documentation.
</Note>

<Accordion title="Documentation sources">
  * src/routes/platform.tsx
  * src/platform/dev/pages/BrandingPreviewPage.tsx
</Accordion>