Onboarding
Four onboarding screens, drawn light and dark, built from seven components that already exist in the system. Sixty instances and not one new component.
Preview
Four screens that take a new user from first launch to a signed in account. Two of them solve sign in twice, once social first and once email first, from the same components in a different order.
Not every screen in this set is shown here. The Figma file carries all of them, in light and dark.
The set is drawn twice in Figma, a light row and a dark row, with Color Tokens set explicitly on every frame rather than inherited from the page. The dark screens are not a second drawing. They are the same instances resolved against the other mode.
What it is built from
Sixty instances across the four screens. Thirty six are Appetite components, nine are Lucide icons, fifteen are logo, brand mark and flag assets. Every one of them reads from the same variables, which is why a rebrand moves all four screens at once.
Placed counts an instance sitting in the screen. Nested counts an instance inside another instance, which is where the three Pagination dots and every glyph live. Lucide supplies mail, lock and eye-closed nine times. Assets supplies the Apple, Google, Facebook and browser marks plus one flag set, eleven times.