Settings

Preview

Three screens for the part of an app nobody demos: a menu that groups its rows, an account form, and a preferences list that carries switches.

Settings, three 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, so the dark screens are the same instances resolved against the other mode. On Selection the Dark mode switch is off in the light screen and on in the dark one.

What does a settings screen need from a component library?

Rows that group, a switch for every yes or no choice, a top bar that goes back and confirms, and fields for the account.

A settings screen needs grouped rows, a switch for each yes or no choice, a top bar with back and confirm, and form fields. In this set those are List, Toggle, Top Bar and Text Input, and List alone is 17 of the 29 instances placed on the three screens.

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 Settings screens built from?

76 instances across the 3 screens. 38 are Appetite UI components, 37 are Lucide icons with 20 different names, and the last is a flag asset in the phone field. 7 components carry the whole set.

29 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 Toggles, the Top Bar buttons and every glyph live. A component is counted by its set name, and an icon is an instance named in lowercase. The dark row holds the same instances as the light row.

List carries 17 of the 29 placed instances, and the Toggles and the row glyphs sit inside it. That is the point in one number: change List and the settings area changes, because a settings screen is a set of content decisions. The only parts drawn by hand are 13 lines named Divider, each 345 wide with its stroke bound to border/soft-100, 6 on Menu and 7 on Selection.

Counted on October 2, 2026 with a Plugin API script over the three light frames of the Settings page in the Appetite UI Figma file. Lucide supplies 20 different icons 37 times.

Which tokens do the Settings screens use?

Every solid fill and stroke resolves through a variable except the flag in the phone field, which makes the dark row a mode switch.

The three light frames hold 171 solid fills and strokes that are bound, spread over 17 different variables. The only unbound solid paints are 6 vectors of the country flag, the colors of a flag and not a token.

Paints are every visible solid fill and stroke on the three light frames, inside instances included, counted by bound variable name on October 2, 2026.