Tier 1Tier 1 · Web (www / app / auth). The full design system: our component library and the components.css recipe. This is the one tier where the recipe is the contract, native tiers take the tokens and nothing else.--red-text-secondary · --shadow-md · --z-dropdown · --radius-sm
01 Dropdown menu Menu
One surface recipe for every floating menu. Hover is --component-bg-hover, never yellow.
surface--component-bg on --line, --shadow-md, --radius
padding4px inner
stacking--z-dropdown
item32px, 16px leading icon
shortcutright-aligned, --font-ui-mono
statedata-state="open|closed" from the controlling primitive
Disabled items stay visible (aria-disabled="true", step-11 text, no hover). Hiding them makes menus feel unstable between files.

The destructive item is red text at rest and gains --red-component-bg on hover. Never a solid red fill inside a menu.
02 Context menu: file row
Right-click or long-press a file row opens the same menu at the pointer. The originating row holds --list-item-bg-active so the target is not lost.

Same items, same order as the row's dropdown. The two must not drift.
Sunset.Timelapse.4096x2160.ProRes.mov
03 Submenu
One level deep, maximum. The parent item shows a trailing caret and holds its hover surface (data-state="active") while open. Submenus inherit the same surface recipe with no extra elevation step.