큐레이션 · 오픈 · 무료

Nuxtlabs

Vercel의 NuxtLabs 인수를 발표하는 미니멀한 다크 모드 개발자 블로그 포스트입니다.

01

디자인 DNA

개발자 대상을 위한 조용하고 자신감 있는 인수 발표 블로그 포스트.

02

컬러

읽기 편안하고 집중력이 높아지는 쿨 블루 톤의 고대비 다크 모드.

03

타이포그래피

grotesque-sans · monospace

• display36px · 500
• body16px · 400

Geist를 디스플레이 및 본문 텍스트 모두에 사용하여 일관된 기술적 미감을 유지합니다. · 다크 배경에서 밀도 높은 텍스트의 가독성을 보장하기 위해 단락의 행간을 넉넉하게 설정합니다. · 굵은 글꼴(700)은 단락 내에서 강조 목적으로 절제되게 사용됩니다.

04

여백

일관된 단락 간격과 목록 항목 간격을 통해 세로 리듬감을 형성합니다.

05

표면 (라운드 / 그림자 / 경계선)

최소한의 테두리를 사용하며, 주로 미세한 구분이나 목록 항목 표시에 활용합니다.

06

레이아웃

최대 가독성을 위한 넉넉한 여백의 중앙 정렬 단일 열 텍스트 레이아웃입니다.

07

모션과 인터랙션

인터랙티브 요소의 절제된 색상 및 텍스트 장식 전환.

인터랙티브 요소의 hover 시 절제된 색상 전환. · 표준 클릭 동작.

08

컴포넌트

• button 버튼은 보이지 않습니다.
• card 카드는 보이지 않습니다.
• chip 칩은 보이지 않습니다.
• input 입력 필드는 보이지 않습니다.
• hero 크고 질감 있는 로고 마크, 두드러진 제목, 그리고 서문 단락으로 구성된 텍스트 기반 히어로 섹션입니다.

09

보이스와 금지 목록

• 톤 전문적이고 진정성 있으며 커뮤니티 지향적입니다.
• 헤드라인 직설적이고 선언적이며 축하하는 어조.
• CTA 텍스트 내의 정보성 링크.

• 흰색 배경을 사용하지 마세요 — 스크린샷은 어두운 네이비/블루 블랙 배경을 보여줍니다.
• 본문에 세리프 글꼴을 사용하지 마세요 — 스크린샷은 Geist로 명료한 산세리프만 사용합니다.
• 화려한 강조색이나 밝은 버튼을 추가하지 마세요 — 스크린샷은 다크 배경 위의 모노크롬 흰색/그레이 텍스트에 의존합니다.
• 다중 열 그리드 레이아웃을 사용하지 마세요 — 스크린샷은 단일 열 중앙 정렬 텍스트 레이아웃을 보여줍니다.
• 무거운 드롭 섀도우나 글래스모피즘 효과를 추가하지 마세요 — 스크린샷은 플랫하고 매트한 표면을 사용합니다.
• 텍스트 양쪽 정렬을 사용하지 마세요 — 스크린샷은 왼쪽 정렬 텍스트를 사용합니다.
• 피하기: 과대광고성 언어
• 피하기: 전문 용어가 지나치게 많은 기술적 설명
• 피하기: 공격적인 행동 유도

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko