Overview
Integrations
Activity
Usage
Settings
All Projects
⌕
Project cards: #0a0a0a, ring #ffffff17, radius 12
A
acme-web
acme.vercel.app
acme/acme-web
feat(ui): redesign dashboard cards with ring shadows
D
docs
docs.acme.dev
acme/docs
fix: broken anchor links in API reference
card hover state: ring #ffffff30 + shadow-medium
Deployment table: 52px rows, mono details
dpl_9f2k1Production · Current⎇ main · a1b2c3d2m 14s8h ago
dpl_7x8w2Preview · ui/compact-items⎇ ui/compact · e4f5g6h—now
dpl_3c4v9Preview · fix/auth⎇ fix/auth · i7j8k9l44s1d ago
row 2 is rendered in its hover state (bg gray-100)
Build logs: mono, status-only color
Building · dpl_7x8w2
12:04:01.2Cloning github.com/acme/acme-web (Branch: ui/compact, Commit: e4f5g6h)
12:04:03.8Restored build cache from previous deployment
12:04:11.0Running "npm run build"
12:04:26.4warn Large page data detected: /dashboard (204 kB)
12:04:44.9Compiled successfully in 31.2s
12:04:45.1Uploading build outputs…
skeleton shimmer: gray-100 #1a1a1a to gray-200 #1f1f1f
Buttons: primary is white, secondary is a ring, not a border
primary / default
primary / hover #ccc
primary / disabled
secondary / default ring a400
secondary / hover ring a500
secondary / disabled
ghost / default
ghost / hover gray-100
ghost / disabled
danger / red-700
danger / hover red-800
danger / disabled
small / 32px
medium / 40px
large / 48px
Inputs: default, focus ring, disabled, plus kbd hints
⌕⌘K
default: bg #0a0a0a, ring 1px #ffffff24
⌕⌘K
focus: blue-700 ring 2px outside 1px border
⌕
pill radius 9999px
disabled: gray-600 text, ring a200
Ready
Building
Error
Preview
Queued
⌘KFEsc
badges: pill, 12px/500, tinted bg + color-900 text + ring color-400
Typography: GeistSans everywhere, GeistMono for technical strings
Page title · GeistSans · 28/34 (24–32) · 600 · tracking -0.02em
All Projects
Card title · GeistSans · 16/24 · 600
acme-web
Body / rows · GeistSans · 14/20 · 400 · gray-1000 #ededed
Production deployment is current and serving traffic from all regions.
Secondary · GeistSans · 13–14 · 400 · gray-900 #a1a1a1
Last updated 8h ago by ramil
Labels / caps · GeistSans · 12 · 500 · tracking 0.04em · uppercase · gray-900
Deployment protection
Code / mono · GeistMono · 13 · 400 · gray-1000 on gray-100 chip
npx vercel --prod
Palette: every captured token, grouped by role
text (900 secondary, 1000 primary; 600 placeholder/disabled, 700 icons)
gray-1000#ededed
gray-900#a1a1a1
gray-700#8f8f8f
gray-600#878787
gray-800#7d7d7d
surfaces + borders (100–400 fills, 500 borders)
background-200#000000
background-100#0a0a0a
gray-100#1a1a1a
gray-200#1f1f1f
gray-300#292929
gray-400#2e2e2e
gray-500#454545
gray alpha (rings over any bg)
alpha-100#ffffff0f
alpha-200#ffffff17
alpha-300#ffffff21
alpha-400#ffffff24
alpha-500#ffffff3d
alpha-600#ffffff82
alpha-700#ffffff8a
alpha-800#ffffff78
alpha-900#ffffff9c
alpha-1000#ffffffeb
accent + semantic (status only)
blue-600≈ #52a8ff
blue-700≈ #0070f3
blue-900oklch 71.7%
blue-1000oklch 96.75%
red-700≈ #ee4444
red-800oklch 58.01%
red-900oklch 69.96%
amber-700#f5a623
greensuccess
geist-cyan#50e3c2
geist-warning#f5a623
teal/purple/pinknot captured
chrome stays grayscale; blue = info/links/focus, red = error, amber = warning, green = success
Depth & motion
radius scale + control heights
6px
controls
controls
8px
inputs / nav items
inputs / nav items
12px
cards / tables
cards / tables
9999px
pills / badges
pills / badges
4px
kbd
kbd
32 / 40 / 48px
control heights
control heights
shadow recipes (ring + glow)
border
0 0 0 1px #ffffff25
0 0 0 1px #ffffff25
border-small
0 0 0 1px #ffffff25,
0 1px 2px #00000029
0 0 0 1px #ffffff25,
0 1px 2px #00000029
medium
0 2px 2px #00000052,
0 8px 8px -8px #00000029
0 2px 2px #00000052,
0 8px 8px -8px #00000029
xl
0 1px 1px #00000005,
0 4px 8px -4px #0000000a,
0 16px 24px -8px #0000000f
0 1px 1px #00000005,
0 4px 8px -4px #0000000a,
0 16px 24px -8px #0000000f
motion
150ms ease transitions on ring, background and color. Building status pulses. Skeletons shimmer gray-100 #1a1a1a to gray-200 #1f1f1f. Spacing base 4px, standard gap 24px.