> ## 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.

# Dev Tools

> Developer-facing tools and sandboxes accessible under /dev, including icon tone playground, branding preview, and contrast audit pages.

The Dev Tools area (`/dev`) hosts developer and platform engineering utilities for testing visual components, branding configurations, and accessibility audits. The primary entry is the `/dev` path prefix, with sub-routes for specific tools.

## Overview

There is no single `/dev` index route. The three confirmed sub-routes under `/dev` each require `pf.wizards.admin`:

* `/dev/icon-tone-playground` — renders `IconTonePlaygroundPage`, a visual sandbox for testing icon tone and colour token combinations.
* `/dev/branding-preview` — renders `BrandingPreviewPage`, a live preview of the organisation's active branding configuration.
* `/dev/foreground-contrast-audit` — renders `ForegroundContrastAuditPage`, an accessibility audit tool for checking foreground/background colour contrast ratios.

All three sub-routes are lazy-loaded and gated by `RequirePermission permission="pf.wizards.admin"`.

## Who it's for

Requires permission `pf.wizards.admin` on all `/dev/*` sub-routes.

## Before you start

* You must hold `pf.wizards.admin`.
* These tools use live branding and theme configuration data from the current organisation.

## Steps

<Steps>
  <Step title="Navigate to a dev tool">
    Go directly to one of the sub-routes: `/dev/icon-tone-playground`, `/dev/branding-preview`, or `/dev/foreground-contrast-audit`.
  </Step>

  <Step title="Use the Icon Tone Playground">
    On `/dev/icon-tone-playground`, explore icon and colour token combinations to verify visual consistency.
  </Step>

  <Step title="Use the Branding Preview">
    On `/dev/branding-preview`, review how the current organisation's branding configuration renders across component types.
  </Step>

  <Step title="Run the Contrast Audit">
    On `/dev/foreground-contrast-audit`, inspect foreground/background colour pairings for WCAG contrast compliance.
  </Step>
</Steps>

## 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/IconTonePlaygroundPage.tsx
  * src/platform/dev/pages/BrandingPreviewPage.tsx
  * src/platform/dev/pages/ForegroundContrastAuditPage.tsx
</Accordion>