styles
← 갤러리

Vercel Monochrome

순백 캔버스 위 진짜 검정 — Geist 타이포그래피와 1px 헤어라인, 그레이스케일 위계만으로 완성하는 개발자 미니멀리즘.

swiss-international monochromedeveloper-minimaltrue-blackgeisthairline-bordersmono-labelshigh-contrastgrayscale-hierarchy
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

버셀(Vercel) 홈페이지에서 추출한 흑백 개발자 미니멀리즘. 라이트는 #fafafa 근백색 배경에 #171717 진회흑 텍스트, 다크는 순수한 #000000 트루 블랙에 #ededed near-white — 양쪽 모두 채도 0의 완전한 그레이스케일이 기본이다. 위계는 색이 아니라 회색 명도 단계(#171717→#4d4d4d→#666→#8f8f8f)와 Geist의 강한 음수 자간(H1 64px에서 -3.84px = -0.06em)으로 만든다. 라운드는 6px(버튼 pill 예외), 구획은 그림자 대신 1px 헤어라인 보더(#ebebeb / #2e2e2e)와 배경 단차로. 유채색은 포커스 링과 링크의 파랑(#0072f5), 상태 신호의 초록 정도가 전부이며 페이지에서 거의 보이지 않을 만큼 절제된다. 대문자 Geist Mono 라벨이 기술적 밀도를 더하는 시그니처.

타입 스케일

display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
small Ag 스타일 견본 Style Specimen
mono-label Ag 스타일 견본 Style Specimen

Geist 단일 패밀리(디스플레이까지 동일), 모노 라벨만 Geist Mono. 시그니처는 극단적 음수 자간 — 측정 H1 64px/-3.84px = -0.06em, H2 56px/-3.36px도 정확히 -0.06em. 큰 타입일수록 자간을 더 조인다. 웨이트는 측정값 400/450/500/600 — 히어로가 400/450으로 의외로 가볍고, 굵기 대신 크기와 자간으로 존재감을 만든다. 대문자 Geist Mono 라벨(FOR CODING AGENTS 류)이 섹션 헤더/피처 리스트의 시그니처.

골든 예제 (exemplar)

Deploy in
monochrome.

For coding agents
To ship apps
Automated by agents

Global delivery

Zero to millions

Hierarchy from gray steps, never color.

Fluid compute

Hairlines, not shadows

Every division is a 1px border ring.

Status: live

One blue, at most

Chroma is a focus ring, not decoration.

Do

  • 팔레트는 채도 0 그레이스케일로 시작하고, 유채색은 포커스 링·링크의 파랑 하나만 최후에 더한다
  • 위계는 회색 명도 단계(#171717→#4d4d4d→#666→#8f8f8f)와 타입 크기로만 만든다
  • 큰 헤드라인은 Geist 400~450 웨이트에 -0.06em의 강한 음수 자간을 건다
  • 섹션 키커·피처 리스트는 대문자 Geist Mono 라벨로 쓴다
  • 구획은 1px 헤어라인 보더와 배경 단차로 — 다크 모드는 트루 블랙(#000) 위에 #2e2e2e 보더

Don't

  • 그라디언트·글래스모피즘·컬러 일러스트 금지 — 표면은 언제나 플랫 무채색
  • 브랜드 파랑을 버튼 필·헤드라인 등 장식에 남용 금지 — 포커스/링크 신호 전용
  • 블러 드롭 섀도로 카드 띄우기 금지 — 0 0 0 1px 링 또는 보더만
  • 다크 모드를 짙은 회색(#111 이상)으로 타협 금지 — 배경은 순수한 #000000
  • 굵은 웨이트(700+)로 존재감 만들기 금지 — 크기와 자간이 대신한다

컴포넌트 노트

button
base: primary는 배경 var(--primary)(라이트=검정, 다크=화이트) + 반전 텍스트, pill(radius 9999px), padding 10px 20px, 14px/500.
hover: 명도 한 단 이동(검정→#383838급), 120ms. 이동·글로우 없음.
focus: box-shadow 0 0 0 2px var(--background), 0 0 0 4px var(--ring) — 측정된 파랑 더블 링.
secondary_variant: 배경 var(--card), 1px var(--border) 보더, 텍스트 var(--foreground), 동일 pill.
ghost_variant: 투명 배경, 텍스트 var(--secondary-foreground), hover 시 var(--foreground).
card
배경 var(--card), 1px var(--border) 헤어라인, radius 6px, padding 24-32px. 그림자 없음.
input
배경 var(--background), 1px var(--input) 보더, radius 6px, padding 10px 12px, 14px. 포커스 시 파랑 더블 링.
nav
상단 고정, 배경 var(--background) + 1px 하단 헤어라인. 좌측 삼각형 로고, 중앙 14px 고스트 링크(muted→foreground), 우측 보더 pill 'Log In' + primary 필 pill 'Sign Up'.
label
대문자 Geist Mono 13px, letter-spacing 0.04em, 색 var(--muted-foreground) — 섹션 키커와 피처 리스트에 사용.