Style a Journey
Choose a theme, a font, and colors, and set the progress bar and backgrounds.
The look of a Journey is set once, for every screen, on the Journey tab of the panel on the right. A single screen can then have its own background.
Pick a theme
Under Look, choose one of 12 themes. Each comes in a dark and a light version: Forge, Gold, Blue, Purple, Emerald, and Rose.
Pick a font
Font offers a few built-in choices and a searchable list of Google Fonts.
Inter and Lora are bundled with the Journey. Any other font loads from Google Fonts when the Journey opens.
Use your own colors
Under Custom theme colors, change any color of the theme:
| Color | Where it shows |
|---|---|
| Page | The background of every screen |
| Text | Questions and body text |
| Main color | Buttons and selected options |
| Text on main color | The words on those buttons |
| Second color | Accents |
| Quiet fill, Quiet text | Options that are not selected, and hints |
| Lines | Borders |
| Around the screen | The area outside the Journey on a wide display |
Add a backdrop
Backdrop pattern puts dots or lines behind every screen. Glow spots on every screen adds soft color.
Set one screen's background
Select the screen, and in the Inspector open Background. Choose a Solid color, a Gradient, an Image, or a Video. A video can loop and play without sound.
Progress bar and back button
Under Progress and navigation:
| Setting | What it does |
|---|---|
| Back button | Shows or hides it on every screen |
| Split progress by arcs | Gives each arc its own part of the bar |
A single screen can differ. In its Navigation section, show or hide the back button and the progress bar, or leave the screen out of the count.
Width
Content width sets how wide the Journey is on a large display.
Verify
Use the device menu above the preview to check the Journey on a phone and on a desktop. To see it on your own phone, open Share and scan the code. See Share without code.