디자인 시스템
web
v1.0.0
90/100

Vercel

@dante · Developer Tools

Developer-tools landing system: stark white canvas, near-black ink, Geist Sans with aggressive negative tracking, shadow-as-border layering, and workflow accents marking Develop → Preview → Ship.

HTML/CSS
React
shadcn/ui
Tailwind
#developer-tools
#geist
#marketing
#stark
Vercel
다운로드4
패키지 JSON 다운로드
DESIGN.mdSKILL.md

개요

Vercel

Visual Theme

A developer-tools landing system that treats the page like a compiler treats code — every unnecessary token stripped away. The canvas is overwhelmingly Pure White (#ffffff) with near-black ink (#171717, never #000000 for text). Whitespace is gallery-scale: 80–120px between sections, tight headlines floating in vast empty fields. There is no chrome, no decoration, no color variation between sections — depth comes entirely from layered shadows, not background tints.

Color

Achromatic by default: a six-step neutral ramp from Gray 50 (#fafafa) through Gray 100 (#ebebeb), 400 (#808080), 500 (#666666), 600 (#4d4d4d), to Gray 900 / Vercel Black (#171717). Three workflow accents — Develop Blue (#0a72ef), Preview Pink (#de1d8d), Ship Red (#ff5b4f) — appear only inside pipeline contexts. Link Blue (#0072f5) and Focus Blue (hsla(212, 100%, 48%, 1)) handle interactivity. Tinted-blue badges (#ebf5ff / #0068d6) carry status. Never decorate with the workflow accents; never warm the palette with oranges or greens.

Typography

Geist Sans is the crown jewel — a custom geometric sans run with aggressive negative tracking that scales with size: −2.4px at 48px display, −1.28px at 32px, −0.96px at 24px, −0.32px at 16px, normal at 14px. The result feels minified, like code optimized for production. Three weights only: 400 (read), 500 (interact), 600 (announce). Geist Mono handles code, technical labels, and uppercase eyebrows — the developer-console voice connecting marketing to product. OpenType "liga" is enabled globally; "tnum" activates for tabular figures in stats and metrics.

Layout & Depth

Max content width 1200px, base spacing unit 8px, section rhythm 96px+. The signature technique is shadow-as-border: box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08) replaces traditional CSS borders everywhere. Cards layer four shadow values — ring (border), soft 2px lift, 8px ambient, plus an inner #fafafa ring that produces the system's quiet inner glow. Radius scale is precise: 6px for buttons, 8px for cards, 12px for image-rounded surfaces, 9999px for pill badges only. Buttons stay rectangular; pills are reserved for tags and the rare nav CTA. The whole language reads as engineering — restrained, layered, deliberate.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (22)

white
#ffffff
black
#000000
vercelBlack
#171717
gray900
#171717
gray600
#4d4d4d
gray500
#666666
gray400
#808080
gray100
#ebebeb
gray50
#fafafa
shipRed
#ff5b4f
previewPink
#de1d8d
developBlue
#0a72ef
consoleBlue
#0070f3
consolePurple
#7928ca
consolePink
#eb367f
linkBlue
#0072f5
focusBlue
hsla(212, 100%, 48%, 1)
ringBlue
rgba(147, 197, 253, 0.5)
overlayBackdrop
hsla(0, 0%, 98%, 1)
selectionText
hsla(0, 0%, 95%, 1)
badgeBlueBg
#ebf5ff
badgeBlueText
#0068d6

타이포그래피 (3)

display
Geist, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
Geist, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, Monaco, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

컴포넌트 (13)

Button

Primary CTA in Vercel Black with white text; ghost variant uses shadow-as-border on white.

html
Hand-tuned CSS, no framework
1 props · 6 states · 8 tags · 2 소스

Input

Text input with shadow-as-border and a saturated focus ring.

html
Hand-tuned CSS, no framework
1 props · 5 states · 4 tags · 2 소스

Card

Surface card built from a multi-layer shadow stack — border + lift + ambient + inner Gray 50 ring for the signature inner glow.

html
Hand-tuned CSS, no framework
0 props · 2 states · 6 tags · 2 소스
누락 상태: focus-visible, disabled

Badge

Tinted-blue pill badge for status and feature labels.

html
Hand-tuned CSS, no framework
1 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Heading

Display headline with aggressive negative tracking — Geist's signature compressed feel.

html
Hand-tuned CSS, no framework
0 props · 1 states · 6 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Link

Inline link in Link Blue with underline; mono-cap variant for technical labels.

html
Hand-tuned CSS, no framework
0 props · 4 states · 4 tags · 2 소스
누락 상태: disabled

Hero

Centered hero — compressed Geist headline, Gray 600 subhead, dark CTA + ghost CTA, mono eyebrow.

html
Hand-tuned CSS, no framework
0 props · 1 states · 6 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Nav

Sticky white header — wordmark, mid-weight links, dark pill CTA, shadow-border on bottom.

html
Hand-tuned CSS, no framework
0 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Footer

Multi-column footer on white with hairline divider, Geist Mono column headers, gray link list.

html
Hand-tuned CSS, no framework
0 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Stat

Metric card — compressed display number with mono uppercase eyebrow and gray description.

html
Hand-tuned CSS, no framework
0 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

DeployStatus

Three-step pipeline pill: Develop (blue) → Preview (pink) → Ship (red). Workflow accents stay inside this context.

html
Hand-tuned CSS, no framework
0 props · 4 states · 6 tags · 2 소스
누락 상태: default, hover, focus-visible, disabled

DomainBadge

Production-domain row — mono domain text with a green status dot and a copy affordance.

html
Hand-tuned CSS, no framework
0 props · 2 states · 6 tags · 2 소스
누락 상태: focus-visible, disabled

KeyboardCmd

Compact keyboard shortcut chip — Geist Mono uppercase letters wrapped in shadow-bordered keys.

html
Hand-tuned CSS, no framework
0 props · 1 states · 4 tags · 2 소스
누락 상태: hover, focus-visible, disabled

DESIGN.md

Vercel

Visual Theme

A developer-tools landing system that treats the page like a compiler treats code — every unnecessary token stripped away. The canvas is overwhelmingly Pure White (#ffffff) with near-black ink (#171717, never #000000 for text). Whitespace is gallery-scale: 80–120px between sections, tight headlines floating in vast empty fields. There is no chrome, no decoration, no color variation between sections — depth comes entirely from layered shadows, not background tints.

Color

Achromatic by default: a six-step neutral ramp from Gray 50 (#fafafa) through Gray 100 (#ebebeb), 400 (#808080), 500 (#666666), 600 (#4d4d4d), to Gray 900 / Vercel Black (#171717). Three workflow accents — Develop Blue (#0a72ef), Preview Pink (#de1d8d), Ship Red (#ff5b4f) — appear only inside pipeline contexts. Link Blue (#0072f5) and Focus Blue (hsla(212, 100%, 48%, 1)) handle interactivity. Tinted-blue badges (#ebf5ff / #0068d6) carry status. Never decorate with the workflow accents; never warm the palette with oranges or greens.

Typography

Geist Sans is the crown jewel — a custom geometric sans run with aggressive negative tracking that scales with size: −2.4px at 48px display, −1.28px at 32px, −0.96px at 24px, −0.32px at 16px, normal at 14px. The result feels minified, like code optimized for production. Three weights only: 400 (read), 500 (interact), 600 (announce). Geist Mono handles code, technical labels, and uppercase eyebrows — the developer-console voice connecting marketing to product. OpenType "liga" is enabled globally; "tnum" activates for tabular figures in stats and metrics.

Layout & Depth

Max content width 1200px, base spacing unit 8px, section rhythm 96px+. The signature technique is shadow-as-border: box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08) replaces traditional CSS borders everywhere. Cards layer four shadow values — ring (border), soft 2px lift, 8px ambient, plus an inner #fafafa ring that produces the system's quiet inner glow. Radius scale is precise: 6px for buttons, 8px for cards, 12px for image-rounded surfaces, 9999px for pill badges only. Buttons stay rectangular; pills are reserved for tags and the rare nav CTA. The whole language reads as engineering — restrained, layered, deliberate.

어댑터 (6)

전체 파일 (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

버전