Menubar
The desktop menu bar: four words on a 210-wide strip, and behind each of them a menu whose rows carry ticks, dots, shortcuts and submenus - twenty-five variants built around one 312 × 28 item.
A menu that holds one ticked item indents everything in it, so the labels line up whether or not they have a mark. Level 1 starts its text at 6; Level 2 reserves the 16px slot and starts at 28. It is the only thing the axis does.
Every other variant hovers to base.muted and keeps its text colour. Destructive goes the other way: the whole row fills with base.destructive and the label flips to base.destructive-foreground. A delete you are about to press should look like one.
There is no Level 1 version of either, because an item carrying a mark is by definition in a menu that indents. That is why the matrix is eighteen rather than twenty-four: six combinations that could not exist were never drawn.
A submenu row, a section heading, and the bar itself
SubTrigger is an item with a chevron instead of a shortcut. Label is the small muted heading inside a menu, and it indents on Level 2 exactly as the items do. Trigger is the word on the bar, 40 × 24 and highlighted when its menu is open.
One bar, four menus open in turn
808 by 792, and live here: click a word on the bar to open its menu, click it again to close. The ticks in View toggle, the theme and profile radios move, and Find opens the submenu beside it. Every panel is the size the file draws it at.
Every row in every panel is Level 2, including the ones carrying nothing in the mark slot. Untick Show sidebar and the label stays where it is - that is the whole point of the indent living on the menu rather than on the item that happens to be checked.
Seven components, twenty-five variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Menubar
The indent, and nothing else. Level 1 starts its text 6 from the left edge; Level 2 reserves a 16px slot for a tick or a dot and starts at 28. A menu holding one checkable item puts every row in it on Level 2, so the labels line up whether or not they carry a mark.
Because Checkbox and Radio only exist at Level 2. An item carrying a mark is by definition in a menu that indents, so the six Level 1 combinations that could not occur were never drawn. Default and Destructive are the only variants with both levels.
It is the one row that inverts. Everything else hovers to a base.muted block and keeps its text colour; Destructive fills with base.destructive and flips label and shortcut to base.destructive-foreground. Delete Account should look like what it is before you release the mouse.
The trigger, essentially. All three share the same 312-wide item, the same Level indent and the same destructive treatment; Menubar is the one whose triggers live on a persistent 210 × 32 bar rather than appearing where you clicked. Learn the item once and all three read the same.