> For the complete documentation index, see [llms.txt](https://docs.zellify.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zellify.app/platform-introduction/funnel-builder/funnel-styling.md).

# Funnel Styling

The Styling System lets you define your brand and design once and apply it across your entire funnel.

All settings in the Styling System are global. This means any configuration you make here automatically applies to every page and component in the funnel. When you create new pages or add new components, they will use the configured colors, fonts, styles, animations, and other visual settings by default.

Global styling does not lock you into fixed values. Every page and most components allow individual overrides, so you can customize specific pages or components when needed.

The Styling System is divided into four sections: Brand, Fonts, Style, and Colors.

***

### Brand

The Brand page is used to manage shared brand assets.

<figure><img src="https://951987241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPontcfIF8v0iocPko5l%2Fuploads%2FfXPuv4qaVCwjcvvTG4Nh%2FCleanShot%202026-02-27%20at%2010.35.08%402x.png?alt=media&amp;token=e48fddce-d4ab-410a-b9da-26d994fc545a" alt=""><figcaption></figcaption></figure>

Here you can upload:

* A logo
* A favicon

The logo is uploaded once and can then be toggled on or off per page without re-uploading it. Any component that displays a logo will automatically use the logo configured on this page.

***

### Fonts

The Fonts page allows you to upload and manage custom fonts for your funnel.

<figure><img src="https://951987241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPontcfIF8v0iocPko5l%2Fuploads%2Ftn3gB9TyadCmtVCPa09E%2FCleanShot%202026-02-27%20at%2010.18.06%402x.png?alt=media&amp;token=41c09940-ad07-46e3-adec-107cc99d38bf" alt=""><figcaption></figcaption></figure>

Supported font formats:

* TTF
* OTF
* WOFF

Fonts are organized into font families. A font family is a collection of related fonts with different weights and styles.

When uploading fonts, Zellify automatically detects and assigns font weights. After creating a font family, you can assign it as the Primary or Secondary font. You can use different font families for Primary and Secondary text.

Once configured, all pages and components in the funnel will use these fonts by default.

***

### Style

The Style page controls global visual behavior and layout rules for the funnel.

<figure><img src="https://951987241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPontcfIF8v0iocPko5l%2Fuploads%2FQPPUzblAg6NO0yo0Pjz7%2FCleanShot%202026-02-27%20at%2010.37.49%402x.png?alt=media&amp;token=9ef617d4-d555-427e-9ce1-d1a6d51d174c" alt=""><figcaption></figcaption></figure>

From this page you can configure:

* Global border radius
* Page transition animations

The global border radius applies to all pages and components. Individual components can override this setting if a different radius is needed.

Page transitions work the same way. The transition configured here is used as the default for all pages, but each page can define its own transition if required.

***

### Colors

The Colors page is used to define your funnel’s color system.

Zellify provides a set of predefined color roles that components use by default. On this page, you assign color values to each role, and those values are then applied across all pages and components.

Colors can still be overridden on individual pages or components if needed.

<figure><img src="https://951987241-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPontcfIF8v0iocPko5l%2Fuploads%2F1MnGqF2ZRtrR8E8NgMrB%2FCleanShot%202026-02-27%20at%2010.42.10%402x.png?alt=media&amp;token=b180d238-5e3e-4bbe-926d-72b7a827a3cb" alt=""><figcaption></figcaption></figure>

***

### Why the Styling System Exists

The Styling System is designed to speed up funnel creation and keep your design consistent.

You configure your brand, fonts, styles, and colors once, then focus on building pages. Every new page and component automatically follows the defined design system, while still allowing full control when customization is required.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.zellify.app/platform-introduction/funnel-builder/funnel-styling.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.