---
title: "BRAND Vercel 2026 · Page: dashboard"
url: https://memocore.ai/memos/6ac3b5178fa4c72b3756ae6a
project: "Brand Styles"
tags: "brand-vercel"
updated_at: "2026-10-05T14:33:35.327Z"
---

# 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