BRAND Vercel 2026 · Page: dashboard

HEADER brand: Vercel; design_date: 2026-10; page_type: dashboard; variants: list-view (project Deployments list), detail-view (project Overview, partly) example_urls: https://vercel.com/<team> (team Overview), https://vercel.com/<team>/<project>/deployments evidence: measured in a logged-in Hobby team on 2026-10-05 from the dashboard stylesheets (0s2bp-fj0r2zt.css Tailwind build with Geist tokens, 3-qb-ev6vlqj7.css app shell, 13 smaller chunks), the dashboard JS chunks and computed styles; the team was filled with demo projects for the capture (two Vercel Drop static sites, two empty projects, one preview redeploy, a little test traffic); captured on a direct connection from Japan in the user's own browser, viewport 2048x926 CSS (browser zoom 75%, Windows scaling 125%; the window could not be set to 1440x900); some values are taken at 1536 CSS width; unless marked purpose: show the team's projects and their state at a glance and start new work (Add New, deploy, connect Git) skeleton: app shell = 256px sidebar + 56px top bar + content; content centered with 24px side padding, max width not measured, est ~1620px; one column of sections on mobile overrides: page canvas #fafafa (html.dash background --ds-background-200); content surfaces (cards, inputs, menus) #ffffff; same Geist tokens, colors and focus ring as the Overview; the dashboard uses 14px as its base size and almost no headings above 24px; links in content are blue (#0070f3 est) unlike the marketing site SECTIONS S0 sidebar - Recipe dashboard-sidebar (256px rail, 36px rows, team switcher, Find, account row) S1 top bar / app header - context and page title background: #fafafa, bottom 1px #ebebeb line (est); height: 56px (--navbar-height) layout: three zones: left the scope switcher ("All Projects ⇕" at team level, project avatar + "demo-site-1 ⇕" inside a project; 14px 500 #171717 with a 16px chevrons-up-down icon); center the page title 14px 400-500 #171717 ("Overview", or breadcrumbs "Deployments / CDzooWtqm" with a copy icon); right "Agent" (sparkle-triangle icon + 14px label) that opens a 420px agent side panel (html.omniagent-panel-open, content shifts left) motion: breadcrumb items fade in 150ms (motion-safe animate-in fade-in); scope switcher opens a popover (Recipe dashboard-menus); agent label width animates between "Agent" 88px, "Working..." 111px, "Ready" 89px, "View Chat" 114px, and the "ready" flash lasts 400ms responsive: on mobile the title stays centered and the sidebar opens from a menu button (inf) S2 toolbar - find and create layout: one row, 8px gaps (est): search field (flex 1) | filter icon button | grid/list segmented toggle | Add New elements: search field 36px tall, white, radius 6px, ring 0 0 0 1px rgba(0,0,0,0.08), magnifier 16px at 12px from the left, placeholder "Search Projects..." 14px #8f8f8f, key hint "/" in a 20px key cap at the right; focus: ring 0 0 0 1px rgba(0,0,0,0.34), 0 0 0 4px rgba(0,0,0,0.16) (grey, not blue), transition all 150ms; filter button 36x36 secondary (white, ring #ebebeb, icon 16px); view toggle: two 36x36 icon cells in one ringed 6px-radius group, selected cell bg #ebebeb (est), hover #f2f2f2; Add New primary 36px (Recipe dashboard-menus) motion: hovers 150ms (Geist button), focus ring on the search animates 150ms responsive: on narrow screens the toggle and filter collapse first, the search stays (est) S3 overview column / cards - Usage, Alerts, Recent Previews layout: left column ~404px wide (est at 1536), sections stacked 32px apart (est); section title 14px 500 #171717, 12px above its card (est) elements: card = white, radius 6px, ring rgba(0,0,0,0.08) + 0 2px 2px rgba(0,0,0,0.04), padding 16-20px; Usage card: header "Last 30 days" 14px 500 + small black "Upgrade" button (24px, radius 6px, 12px 500 white); empty body: a 32px white icon tile with a ring and radius 6px holding a 16px bar-chart icon, then "Your usage will appear here" 14px #4d4d4d centered; Alerts card: centered heading "Get alerted for anomalies" 14px 500, body 14px/20px #4d4d4d two lines, secondary small button "Upgrade to Pro" (32px, radius 6px); Recent Previews card: eye icon tile + "Preview deployments that you have recently visited or created will appear here." 14px #4d4d4d centered copy: empty states are one short sentence, sentence case, no exclamation marks S4 projects grid - the team's projects layout: responsive grid of cards ~382px wide (min est 360px), 24px gaps (2 columns at 1536, 3 at 2048); section title "Projects" 14px 500 elements: project card (li, group/project-card): white, radius 6px, ring 1px rgba(0,0,0,0.08) + 0 2px 2px rgba(0,0,0,0.04), padding 16px, gap 12px; top row: 32px round project avatar (default = dashed triangle in a ring), name 14px 500 #171717 (a link, underline on hover, an arrow icon shown only on hover), domain 14px #4d4d4d below, a 28px round deployment-status button at the right (ring, check icon, a spinning arc while building); middle: "Connect Git Repository" 14px blue link (or the latest commit when Git is connected); bottom: relative time "45m ago" 14px #4d4d4d states: card itself has a box-shadow transition of 150ms but no visible hover change; the status button shows building / ready / error responsive: one column on mobile S5 deployments list (variant list-view, project scope) - every deployment of a project layout: H1 "Deployments" 24px/32px 600 #171717 (heading-24 at weight 600) at the top of the content; 12px below a filter row; then a table card elements: filter row: "Add Filter" secondary small button with a filter icon (32px, radius 9999px est) and suggestion chips shown as dashed outline pills (1px dashed #c9c9c9, 32px, label 14px #8f8f8f with the value in #171717: "Author <name>", "Environment Production", "Status Error"); table card: white, radius 6px, ring, rows 48px with 12px side padding and a 1px #ebebeb divider; columns: deployment id 14px #171717 | status (8px round dot, teal #50e3c2 est for Ready, amber for Building, red for Error) + "Ready" 14px #4d4d4d + duration "2s" #8f8f8f | environment badge | source ("Redeploy of 6GqBrr8o4" with a rotate icon, "View code", "Vercel Drop", or the commit) | relative time + author avatar 20px | "..." icon button (row menu, Recipe dashboard-menus) badges: Production = pill 24px, 12px 500 white on #0072f5 with a 14px up-arrow circle icon, padding 2px 10px 2px 6px; Preview = same pill, white with an inset 1px rgba(0,0,0,0.08) ring, 12px 500 #171717, eye icon; Pre-Production (in the Redeploy dialog) = green tint pill footer: "Deployment Retention is enabled for this project ... Learn more" 14px #4d4d4d with a blue link, and a "View Recently Deleted" secondary small button at the right loading: the whole table shows skeleton rows: same 48px rows with rounded grey bars in each column (bg #ebebeb, shimmer 1.5s ease-in-out infinite) S6 project overview (variant detail-view, partly seen) elements: "Production Deployment" card with a header row (title 14px 500, "Connect Git", "Instant Rollback" secondary buttons, "Visit ⌄" primary split button, "..." menu), a 16:10 preview thumbnail of the site in a ringed frame at the left and a facts grid at the right (Deployment URL, Domains with a "+" icon, Status with dot, Created with avatar, Source); collapsible "Deployment Settings" row with a "3 Recommendations" blue tint pill; a hint line about drag-and-drop deploys; a row of three cards: Production Checklist (0/5 progress pill, list of 36px rows with icons, grey fills), Observability (6h, CDN Requests count with a blue sparkline), Analytics (empty state with "Enable Analytics" secondary button) empty project: "No Production Deployment" centered in the card with an upload icon and "Drag and drop your project anywhere on this page to deploy it, or choose a file or a folder." (file and folder in blue) PAGE COMPONENTS deployment status button (project card): 28px circle, white, 1px ring, 14px icon (check when ready); building: a 2px blue arc spins around it (est 1s linear) key hint cap: 20x20 white, ring 1px rgba(0,0,0,0.08), radius 4px, 12px 500 #4d4d4d ("F", "/", "Esc") promo card in the sidebar: see Recipe dashboard-sidebar INTERACTIONS - sidebar navigation and Find: Recipe dashboard-sidebar - Add New, row menus, Redeploy dialog, toasts: Recipe dashboard-menus - id: dashboard.drop-to-deploy element: whole project page / new-project page trigger: dragging files or a folder over the page, or "choose a file or a folder" open: the page accepts the drop and goes to a "New Project" card: "Drop to Deploy" with the file list (14px mono names, sizes at the right), team select and project name input side by side, full-width primary "Deploy" button close: Deploy -> "Congratulations!" page with a live preview, then the project overview - id: dashboard.search-shortcut trigger: "/" focuses the project search, "F" opens Find (Recipe dashboard-sidebar) STATES loading: skeleton rows and bars (rounded, #ebebeb, shimmer); team name in the sidebar is a 72x16 skeleton until loaded empty: every card has a centered icon tile + one sentence + optional button (Usage, Alerts, Recent Previews, Analytics, No Production Deployment) building: status dot amber + timer, "Building..." card with an upsell for faster builds toast after actions: "Deployment created" success toast (blue #0072f5, white text, x), bottom right (Recipe dashboard-menus) SCREENSHOTS - file: vercel_2026_dashboard_d2048_projects.jpg shows: team Overview: sidebar with Projects active, top bar "All Projects / Overview / Agent", toolbar (search with "/", filter, grid/list, Add New), Usage, Alerts and Recent Previews empty cards, 4 project cards in a 3-column grid, promo card in the sidebar source: live https://vercel.com/<team> 2026-10-05, page 2048x926 CSS (browser zoom 75%), image downscaled to 1568x710 by the capture tool; team avatar, team name, username and avatars masked with grey boxes key values: page #fafafa; cards white radius 6px with hairline ring; project card ~382x122; text 14px; Add New #171717 36px do not copy: logos, project names; use placeholders - file: vercel_2026_dashboard_d2048_add-new-open.jpg shows: Add New menu open: 449x176 white popover, radius 12px, two columns of 4 items with 16px icons, divider between columns - file: vercel_2026_dashboard_d2048_deployments.jpg shows: project Deployments list: H1 24px 600, Add Filter + dashed suggestion chips, table with two 48px rows (Preview redeploy, Production), Ready dots, blue Production pill, Preview outline pill, retention note