Skip to main content
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:
ControlWhat it sets
ColorThe text color.
Input HintThe placeholder color (inputs only).
FontThe font family (see below).
WeightThin, Extra Light, Light, Regular, Medium, Semibold, Bold, Extra Bold, or Black.
SizeFont size, 8 to 120 px.
SpacingLetter spacing.
LineLine height.
AlignLeft, Center, or Right.
CaseNormal, Uppercase, or Lowercase.
ShadowAn 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.
In Simple mode, text blocks set type through a Size preset (Display, Title, Heading, Subheading, Body, Caption) plus color and alignment in the block controller, rather than the full per-property Typography section above.

​
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, the Design tab shows exactly these (the preset gallery and the five core pickers) plus a background preset picker (see 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

1

Pick a preset to start

Open the Design tab and click a preset (for example Indigo) to apply a full palette.
2

Set your brand Primary

Edit the Primary token with the color picker. The derived palette updates around it.
3

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

See it propagate

Change Primary again. Every property bound to token:primary updates at once, on the canvas and on device.

​
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.
  • Watch contrast. Light text on a busy or light background 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.