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

​
The flow theme (global styles)

Open the Design tab in the mini-sidebar and stay on Theme to set styles that apply across the whole flow. It has three sub-tabs:
  • Colors: quick Presets (Default, Dark, Vibrant) plus five color tokens you can edit directly: Primary, Secondary, Background, Text Primary, and Text Secondary.
  • Typography: two reference type styles, Title Large and Body Medium, each with a font family, size, and weight.
  • Spacing: a note that spacing is set per component in the properties panel.

​
How the theme is used

The theme’s color tokens drive button variants. A button’s variant (Primary, Secondary, Ghost, Destructive) pulls its colors from the theme, so changing the theme’s Primary color restyles every Primary button at once. Any per-component color you set by hand still wins over the variant, so you can override a single button without touching the theme. Set a color in the theme when it should be consistent across the flow (your brand color, your text color). Set a color directly on a component when it is a one-off.

​
Example: a brand color through the theme

1

Set the theme Primary color

Open Design > Theme > Colors. Set Primary to your brand color with the color picker.
2

Add a button that uses it

On a screen, insert a Button. In its Button settings, leave the variant on Primary.
3

See it pick up the token

The button uses your theme Primary color. Change the theme Primary again and every Primary button updates.
4

Tune the type styles

In Design > Theme > Typography, adjust Title Large and Body Medium to match your brand’s headings and body text, and use those sizes and weights when you style text components.

​
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 the theme Primary and use button variants, 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.