Best for

Forms — a labelled, required field that opens its list in place

Anatomy

Field Header Label with the required mark and hint · 60px field · the list in flow while open · footer hint that turns red when nothing is picked

Best for

Right-click and ⌘K menus — short actions that each own a keyboard chord

Anatomy

a search field with its ⌘K chips opens it · Five 48px rows · 20px icon and label · a ⌘ chip pair per row that lifts to white on the active one · arrow keys and the real chords move it

Best for

Menus where each entry needs a line of explanation

Anatomy

the picked row's own chip opens it · Five rows · 20px icon · label with an optional Badge · description line · the picked row keeps the wash and border/subtle

Best for

Choosing several options at once — a titled sheet of rows with a checkbox each

Anatomy

a chip naming what is on opens it · Card title over a divider · four rows with their 28px mark, label, Badge and description · 20px Checkbox · multi-select

Best for

Long action sheets — grouped sections in one scrolling card

Anatomy

a Take action button opens it · Two titled sections · 44px icon containers, the active one white and lifted · app rows with their own marks · the card scrolls past the drawn height

Best for

The avatar menu — settings, support, the plan and the way out

Anatomy

a Sam Rivera profile chip opens it · Avatar header with the plan badge · settings group · Support label over two more rows · plan row with the dark Upgrade button · red Logout

Best for

Multi-account apps — the same menu with a refresh and a way to add another

Anatomy

a Sam Rivera profile chip opens it · Avatar header with a 32px refresh button · four rows ending in red Logout · Add New Account across the foot