# Customize styles and layouts - Docs

**Product tours is in private alpha**

Product Tours is currently in private alpha. [Share your thoughts](https://app.posthog.com/external_surveys/019af5f5-a50e-0000-b10f-e8c30c0b73a0) and we'll reach out with early access.

**Currently only available on the web. Requires `posthog-js` >= v1.324.0.**

Customize the appearance of your tours to match your brand.

## Colors

-   **Background color** - Background of tour steps, modals, and banners
-   **Text color** - Body text color
-   **Button color** - Primary button background
-   **Button text color** - Text on buttons
-   **Border color** - Borders around steps and modals

## Typography

Set a custom font family. The font must be available on your site.

## Layout

-   **Border radius** - Corner roundness (0 for sharp, higher values for rounded)
-   **Box shadow** - Enable/disable shadow behind tour elements
-   **Width** - Control modal and step width

### Modal position

For modal steps and announcements, choose the screen position: center (default), corners, or edges.

Element step positioning is automatic based on available viewport space.

## Behavior

-   **Show overlay** - Dark overlay behind the tour to focus attention
-   **Dismiss on outside clicks** - Close the tour when clicking outside of it (enabled by default)

## White-label

Remove PostHog branding from tours.

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better