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

# Colors and typography

> Pick colors with the color picker, style text with the typography controls, and set a flow-wide theme of colors and type.

Color and type controls show up wherever you style something: the color of a piece of text, a fill, a border, a gradient stop. This page covers the **color picker**, the **typography controls** for text, and the flow-wide **theme** where you set reusable colors and type styles.

## The color picker

Any color field opens the same picker. It has:

* A **saturation and brightness** area to drag a shade.
* A **hue** slider.
* An **alpha** slider, where transparency is allowed.
* A **hex** input, so you can paste an exact value.
* A row of **preset swatches** for quick picks.

Pick a swatch, drag in the area, or type a hex code. The trigger button always shows the current value as a hex string so you can read it at a glance.

## Typography

Select a **text** or **input** component to get its **Typography** section in the Style tab (Advanced). It controls:

| Control        | What it sets                                                                     |
| -------------- | -------------------------------------------------------------------------------- |
| **Color**      | The text color.                                                                  |
| **Input Hint** | The placeholder color (inputs only).                                             |
| **Font**       | The font family (see below).                                                     |
| **Weight**     | Thin, Extra Light, Light, Regular, Medium, Semibold, Bold, Extra Bold, or Black. |
| **Size**       | Font size, 8 to 120 px.                                                          |
| **Spacing**    | Letter spacing.                                                                  |
| **Line**       | Line height.                                                                     |
| **Align**      | Left, Center, or Right.                                                          |
| **Case**       | Normal, Uppercase, or Lowercase.                                                 |
| **Shadow**     | An optional text shadow: color, X, Y, and blur.                                  |

### Fonts

The **Font** menu is grouped:

* **System**: System Default, SF Pro, Serif, and Monospace.
* **Custom**: any fonts you have uploaded to the workspace.
* **Google Fonts**: Inter, Roboto, Open Sans, Poppins, Montserrat, Lato, Nunito, Playfair Display, DM Sans, and Space Grotesk.

Custom fonts are uploaded in your workspace settings. See [Custom fonts](/dashboard/custom-fonts).

<Note>
  In [Simple mode](/editor/editing-modes), text blocks set type through a **Size** preset (Display, Title, Heading, Subheading, Body, Caption) plus color and alignment in the [block controller](/editor/block-controllers), rather than the full per-property Typography section above.
</Note>

## The flow theme (global styles)

Open the **Design** tab in the mini-sidebar to set colors that apply across the whole flow. The theme has two parts:

* A gallery of **presets**: **Indigo**, **Midnight**, **Vibrant**, **Ocean**, **Forest**, and **Rose**. Click one to apply its whole palette.
* Five **core color tokens** you can edit directly with the color picker: **Primary**, **Secondary**, **Background**, **Text Primary**, and **Text Secondary**.

In [Simple mode](/editor/editing-modes), the Design tab shows exactly these (the preset gallery and the five core pickers) plus a **background preset** picker (see [Backgrounds](/editor/backgrounds)). In Advanced mode, the Design tab adds a **Flow Settings** tab (flow name and version, default background, screen transitions, export/import JSON, and a Clear Flow action).

### How theme tokens work

You edit five core tokens; FlowPilot derives the rest of the palette from them (a full set of about fifteen tokens including `primary`, `onPrimary`, `secondary`, `background`, `surface`, `textPrimary`, `textSecondary`, `border`, `success`, `destructive`, and more). Brand hues stay fixed; neutral tokens adapt to keep contrast against the effective background.

Color properties on components can store a **token reference** (`token:primary`, `token:background`, and so on) instead of a fixed hex value. The reference is resolved to a concrete color at render time, in the editor and in both SDKs. Because the editor stores the full palette as plain hex, the SDKs only do a dictionary lookup; they never compute colors on the device. The practical effect: change a theme color and everything bound to that token restyles at once, on every platform.

In the color picker, a **Theme** row of swatches links a property to a token (or detaches it back to a literal color). The Design panel's own core pickers edit the tokens themselves, so they do not show that row.

Set a color in the theme (a token) when it should be consistent across the flow (your brand color, your text color). Set a literal color directly on a component when it is a one-off.

## Example: a brand color through the theme

<Steps>
  <Step title="Pick a preset to start">
    Open the **Design** tab and click a preset (for example **Indigo**) to apply a full palette.
  </Step>

  <Step title="Set your brand Primary">
    Edit the **Primary** token with the color picker. The derived palette updates around it.
  </Step>

  <Step title="Bind a component to the token">
    Select a button or text, open its color field, and pick the **Primary** swatch in the picker's **Theme** row so it stores `token:primary`.
  </Step>

  <Step title="See it propagate">
    Change **Primary** again. Every property bound to `token:primary` updates at once, on the canvas and on device.
  </Step>
</Steps>

## Notes and warnings

* **Custom fonts must be uploaded.** If you reference a font that is not uploaded to the workspace, the SDK falls back to a system font on the device. Upload it first in [Custom fonts](/dashboard/custom-fonts).
* **Watch contrast.** Light text on a busy or light [background](/editor/backgrounds) can be unreadable on a real screen. Check it in preview, not just on the canvas.

## Common mistakes

* **Hardcoding the same color everywhere.** Set it once as a theme token (for example Primary) and bind components to it, so a rebrand is one change instead of many.
* **Using a font that is not uploaded.** It silently falls back to a system font on device.
* **Low-contrast text on a background.** It can look fine in the editor and fail on a phone in sunlight.

## Related pages

* [Custom fonts](/dashboard/custom-fonts)
* [Backgrounds](/editor/backgrounds)
* [The properties panel](/editor/properties)
* [Flow schema reference](/reference/flow-schema)