Onboarding

Preview

Welcome, Sign In with social buttons first, Sign In with the form first, and Sign Up. Together they take a new user from first launch to a signed in account.

Onboarding, four screens, light and dark393 x 852 each, Platform ios-md

Each screen is drawn in Light and in Dark, with Color Tokens set on the frame itself. The dark screens are the same instances resolved against the other mode, so a rebrand in the variables moves both rows. Onboarding is also drawn for the outer and inner display of iPhone Duo, see iPhone Duo screens.

How do the two Sign In layouts differ?

Social first leads with four round provider buttons. Form first leads with the email and password fields.

Social first puts four round Social Buttons directly under the headline and pins the Sign in button to the bottom edge, so the form sits in the middle of the screen. Form first starts with the email and password fields and a Sign in button right under them, and moves Apple and Google to two wide Social Buttons below an or divider.

Both layouts are the same instances in a different order: one Logo, two Text Inputs, two Buttons and one Divider. Only the Social Buttons change, from 4 to 2. Switching a product from one layout to the other is a rearrangement, not a rebuild.

The minimum touch target on iOS is 44 pt. The frames pin Platform to ios-md, where platform/min-touch-target reads 44. The android mode of the same variable reads 48 dp.

What are the Onboarding screens built from?

60 instances across the 4 screens. 36 are Appetite UI components, 9 are Lucide icons and 15 are logo, brand mark and flag assets. Every one of them reads from the same variables, which is why a rebrand moves all 4 screens at once.

37 instances sit directly on the frames and the rest sit inside them. Placed counts an instance that is not inside another instance. Nested counts one that is, which is where the three Pagination dots, every glyph and every brand mark live. A component is counted by its set name, so every Button variant is a Button, and an icon is an instance named in lowercase. The dark row holds the same instances as the light row.

Three things on these screens are drawn by hand. Welcome carries the photograph as a 393 x 520 rectangle with an image fill, and a 393 x 180 rectangle named Top Background with a gradient fill over the top edge. Each Sign In screen carries a rectangle named Divider that works as a spacer, 345 x 147 on social first and 345 x 67 on form first.

Counted on October 2, 2026 with a Plugin API script over the four light frames of the Onboarding page in the Appetite UI Figma file.

Which tokens do the Onboarding screens use?

Almost every solid fill and stroke on these frames resolves through a variable. The exceptions are brand colors, which are not tokens.

The four light frames hold 131 solid fills and strokes that are bound, spread over 16 different variables. Another 32 solid paints are not bound: 12 in the Logo, 14 in the Social Button marks and 6 in the flag of the phone field, the colors of a brand and a flag. The Welcome gradient has two stops and neither is bound. The photograph is an image fill.

Paints are every visible solid fill and stroke on the four light frames, inside instances included, counted by bound variable name on October 3, 2026. A text layer that mixes two colors counts once for each.