Flows & Screens

How onboarding flows are structured and how screens work.

Flow Structure

Flow: "User Onboarding"

Screen 1: Welcome

├──Background:gradient (#6366F1 → #1A1A1A)

├──Elements:[Logo, Heading, Body text]

└──Button:Continue

Screen 2: About You

├──Background:solid #FFFFFF

├──Elements:[Heading, Name input, Email input]

└──Button:Continue (disabled until fields valid)

Screen 3: Your Role

├──Background:solid #FFFFFF

├──Elements:[Heading, Option cards]

└──Button:Continue

Screen 4: All Done

├──Background:gradient

├──Elements:[Celebration illustration, Heading]

└──Button:Enter the app (completes flow)

Schema Example

flow.json

{
  "flowId": "flow_abc123",
  "name": "User Onboarding",
  "version": 3,
  "mandatory": true,
  "screens": [
    {
      "id": "screen_welcome",
      "position": 1,
      "backAllowed": false,
      "inputs": [],
      "ui": { "..." : "..." }
    },
    {
      "id": "screen_about_you",
      "position": 2,
      "backAllowed": true,
      "inputs": [
        { "id": "inp_name",  "type": "text",  "required": true },
        { "id": "inp_email", "type": "email", "required": true }
      ],
      "ui": { "..." : "..." }
    }
  ]
}

Screen Anatomy

Every screen has four layers that stack on top of each other:

1. Background Layer

Solid color, gradient, or image that fills the entire screen.

2. Content Layer

Headings, body text, images, and other static elements.

3. Input Layer

Text inputs, selectors, date pickers, toggles — whatever data you need to collect.

4. Action Layer

The primary button (Continue, Skip, or Complete) and optional back navigation.

Screen Properties

Property	Type	Description
`id`	`string`	Unique identifier for the screen
`position`	`number`	Order in the flow (1-indexed)
`backAllowed`	`boolean`	Whether users can navigate back to this screen
`inputs`	`Input[]`	Array of input fields on this screen
`ui`	`ScreenUI`	Visual configuration (background, elements, button)

Input Types

text

Single-line text input

email

Email with validation

number

Numeric input

date

Date picker

select

Dropdown selector

multi-select

Multiple choice

boolean

Toggle / checkbox

phone

Phone number with country code