큐레이션 · 오픈 · 무료

Buttondown

독립 크리에이터를 위한 실속 있고 인간적인 이메일 뉴스레터 플랫폼.

01

디자인 DNA

디지털 크리에이터를 위한 차분하고 믿음직한 우체국.

02

컬러

최대 가독성을 위한 고대비의 블랙 온 화이트 배경과, 액션을 위한 선명한 블루 프라이머리 컬러, 그리고 따뜻한 파스텔 악센트.

03

타이포그래피

transitional-serif · humanist-sans

• display96px · 900
• heading48px · 700
• body18px · 400
• caption14px · 400

디스플레이 타이포그래피에는 묵직하고 촘촘한 트래킹의 세리프 폰트를 사용합니다. · 본문 텍스트에는 높은 가독성을 위해 깔끔한 산세리프를 사용합니다. · 편안한 읽기를 위해 줄 길이를 짧게 유지합니다.

04

여백

표준 4px 베이스 그리드와 섹션 사이의 넉넉한 수직 패딩.

05

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

1px solid rgba(0, 0, 0, 0.1)

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1)

06

레이아웃

히어로에서 기능, 후기로 이어지는 명확한 계층 구조의 표준 중앙 정렬 레이아웃.

07

모션과 인터랙션

상호작용 요소에 미세한 색상 및 배경 전환.

상호작용 요소에 미세한 배경색 변화. · 액션을 나타내기 위한 시각적 상태 변화.

08

컴포넌트

• button 흰색 텍스트가 들어간 고대비 블루 필 모양 버튼 또는 간단한 텍스트 링크.
• card 부드러운 옐로우 배경과 굵은 출처 표기의 후기 블록.
• hero 흰색 배경 위의 크고 인상적인 세리프 헤드라인 양쪽에 선명한 플랫 일러스트레이션이 배치됨.

09

보이스와 금지 목록

• 톤 자신감 있고, 다소 비격식적이며, 안심시키는 어조.
• 헤드라인 직설적인 수사적 질문과 굵고 명확한 진술.
• CTA 행동 지향적이고 간결한.

• 다크 모드를 사용하지 않습니다 — 스크린샷은 순백의 배경을 보여줍니다.
• 네온색을 사용하지 않습니다 — 스크린샷은 프라이머리 블루(#0069ff)와 파스텔 악센트를 사용합니다.
• 헤드라인에 산세리프를 사용하지 않습니다 — 스크린샷은 디스플레이 텍스트에 묵직한 트랜지셔널 세리프를 사용합니다.
• 모서리를 모두 날카롭게 하지 않습니다 — 스크린샷은 필 모양 버튼과 둥근 모서리의 카드 요소를 보여줍니다.
• 인터페이스를 복잡하게 만들지 않습니다 — 스크린샷은 요소 사이에 상당한 여백을 유지합니다.
• 읽기를 위해 밀도 높은 다중 컬럼 레이아웃을 사용하지 않습니다 — 스크린샷은 단락 너비를 제한적으로 유지합니다.
• 피하기: 기업용 전문 용어
• 피하기: 모호한 약속
• 피하기: 지나치게 복잡한 기술 언어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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