---
title: "BRAND Vercel 2026 · Recipe: dashboard-menus"
url: https://memocore.ai/memos/6ac3b4d08fa4c72b3756ae66
project: "Brand Styles"
tags: "brand-vercel"
updated_at: "2026-10-05T14:31:44.471Z"
---

# BRAND Vercel 2026 · Recipe: dashboard-menus

HEADER
brand: Vercel; design_date: 2026-10; kind: component; used_in: BRAND Vercel 2026 · Page: dashboard (toolbar menu, deployment rows, dialogs, notifications)
evidence: read from the dashboard chunks (toast component in 1ynr6vt2-gvsz.js, Geist dialog and popover rules in 0s2bp-fj0r2zt.css / 3-qb-ev6vlqj7.css) and computed styles in a logged-in Hobby team 2026-10-05, viewport 2048x926 CSS (browser zoom 75%), unless marked

LOOK
All overlays are white floating sheets with a 12px radius and the soft layered Geist menu shadow over a hairline ring. Menus appear instantly under their trigger and fade out quickly when closed. Dialogs drop in with a short fade and slide, over a light grey veil. Notifications are 420px white cards stacked in the bottom-right corner like a deck: only the newest is fully visible, older ones peek out behind it, smaller and higher; hovering the stack fans them out.

STRUCTURE
popover menu (Add New): UL role menu, 449x176, bg #ffffff, radius 12px, padding 0, shadow 0 0 0 1px rgba(0,0,0,0.08), 0 1px 1px rgba(0,0,0,0.02), 0 4px 8px -4px rgba(0,0,0,0.04), 0 16px 24px -8px rgba(0,0,0,0.06) (--ds-shadow-menu); right-aligned to the button, 8px below it; two columns of 4 items with a 1px #ebebeb divider between columns: Project, Domain, Integration, Sandbox | Agent, Store, AI Gateway Key, Team Member
menu item: 212x32 (in a 6px padded column), radius 6px, padding 6px 8px, 16px line icon + 12px gap + label 14px/20px 400 #171717; hover/highlighted bg rgba(0,0,0,0.05) (gray-alpha-100), instant; focus-visible same fill, no outline
row action menu (deployment "..."): same popover style, ~200px wide (est), items 32px: Instant Rollback, Promote (disabled #a8a8a8 with a right icon), then Redeploy, Inspect Deployment, View Source, Copy URL, Assign Domain, Visit ↗
dialog (Redeploy): centered card ~560px wide (est), white, radius 12px, menu/modal shadow; title 16-20px 600 (est), body 14px #4d4d4d, a select "Choose Environment" (Production with a blue "Production" pill / Preview with a green "Pre-Production" pill), a radio card with the deployment URL and "Current" badge, a checkbox "Use existing Build Cache"; footer bar #fafafa with a 1px top line: "Cancel" secondary small left, "Redeploy" primary small right
toast: 420px wide (max 100vw - 2 x 24px), bottom-right with 24px gaps (est), bg #ffffff, radius 12px, shadow --ds-shadow-menu, padding 16px, text 14px/21px #171717; variants: success bg #0072f5 (blue-700) with white text, error bg red-800 with white text, warning amber-800 with dark text; optional action button and close x

KEY PARAMETERS
menu open: instant (no open animation); close: fade-out (opacity 1 -> 0) using --ds-motion-popover-duration 200ms with --ds-motion-timing-swift cubic-bezier(0.175,0.885,0.32,1.1)
trigger "Add New": primary button 36px tall (size medium), padding 0 10px, label 14px 500 white on #171717, radius 6px, chevron-down 16px after the label; hover #383838 150ms
dialog: open animation "show" (translateY from --translate-y-start to --translate-y-end, opacity 0 -> 1) plus content fade-in; modal dialogs 350ms cubic-bezier(0.4,0,0.2,1); sheets 400ms with the dialog open curve and close "hide" 400ms; backdrop fade-in/out with the same timing; a wrong action shakes the dialog (2 x 100ms); drawers on mobile move with transform 500ms cubic-bezier(0.32,0.72,0,1)
command dialogs (cmdk): overlay fade to 0.8, content scale 0.96 -> 1 and fade, 300ms cubic-bezier(0.175,0.885,0.32,1.1)
toast timing: mounts with opacity 0 and transform translate3d(0,100%,150px), 10ms later becomes visible (opacity 1, transform none) with transition all 350ms cubic-bezier(0.25,0.75,0.6,0.98); auto-hides after 3500ms (paused while hovered, restarted on leave; persistent if it has an action); hide = opacity 0 + scale(0.98) over 160ms cubic-bezier(0.6,0.3,0.98,0.5), removed after 160ms
toast stacking: toast at position p (0 = newest) is translated up by (20px x p) minus the height difference, pushed back by -p px on z and scaled 1 - p x 0.05; its content is hidden (opacity 0) unless it is the newest; max-height 50px for stacked ones; at most 3 visible (2 on small screens), older ones opacity 0; hovering the stack area expands all toasts to their full heights stacked with gaps (scale 1, content opacity 1) over 350ms, inner content transitions 400ms ease-in-out

MOTION
open menu: click (or Enter/Space) -> appears instantly; arrow keys move the highlight; Escape or outside click closes with the 200ms fade
open dialog: click -> veil and card animate together (350ms); close by Cancel, Escape or veil click with the hide animation
toast: event -> slides up from below the viewport edge and fades in (350ms), waits 3.5s, fades and shrinks to 98% (160ms)

STATES
hover: item fill rgba(0,0,0,0.05) instant; disabled items #a8a8a8 and not hoverable; focus and keyboard: roving focus in menus, focus trap in dialogs; touch and mobile: menus become bottom sheets (inf), toasts full width minus 48px; reduced motion: dialog and toast transforms are removed, fades stay short (est)

HOW TO BUILD
Use one popover style for every menu (white, 12px radius, the four-layer menu shadow, 6px inner padding, 32px rows with an instant grey hover) that opens without animation and fades out in 200ms. Build toasts as an absolutely positioned stack in the bottom-right corner with per-index translate, z and scale, a 350ms cubic-bezier(0.25,0.75,0.6,0.98) entrance and a 160ms exit, 3.5s timeout paused on hover.

PITFALLS
animating the menu open (it is instant); dark or blurred overlays (menus have none; dialogs use a light grey veil); square corners (12px on all floating surfaces, 6px on rows); toasts in the top-right or centered; colored toasts for neutral messages (only success/error/warning are filled)

SCREENSHOTS
- file: vercel_2026_dashboard_d2048_add-new-open.jpg (attached to Page: dashboard) Add New menu open: two columns, 32px rows, divider