큐레이션 · 오픈 · 무료

Substack

대담한 주황색 악센트와 가독성에 초점을 맞춘 깔끔하고 콘텐츠 우선의 퍼블리싱 플랫폼입니다.

01

디자인 DNA

독립적인 작가와 독자를 위한 현대적인 디지털 매거진이나 큐레이션 피드처럼 느껴지는, 깔끔하고 편집 중심의 플랫폼입니다.

02

컬러

가독성을 위한 높은 대비 잉크와 흰색 배경; 단 하나의 선명한 주황색 악센트가 에너지와 행동 유도 초점을 제공합니다.

03

타이포그래피

transitional-serif · humanist-sans · monospace

• display40px · 600
• h124px · 600
• h220px · 600
• body15px · 400
• caption13px · 400

두드러진 헤드라인과 편집 디스플레이에는 세리프 폰트 패밀리를 사용합니다. · 본문 텍스트, 내비게이션, UI 요소에는 시스템산세리프 스택을 사용합니다. · 제목과 본문 간의 크기와 두께 차이를 통해 명확한 계층 구조를 유지합니다.

04

여백

요소 간 간격을 위한 일관된 8px 기반 수직 리듬과 더 촘촘한 간격을 위한 4px 단위 증가.

05

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

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

0 1px 0 0 rgba(255,255,255,0.2) inset, 0 -1px 0 0 rgba(0,0,0,0.1) inset · 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 6px -1px rgba(0,0,0,0.1)

06

레이아웃

고정된 왼쪽 사이드바 내비게이션(데스크톱), 중앙 피드 컬럼, 로그인/검색용 오른쪽 사이드바(데스크톱); 하단 내비게이션이 포함된 단일 컬럼 스택(모바일).

07

모션과 인터랙션

인터랙티브 요소의 색상, 배경색, 테두리 속성에 대한 부드러운 250ms 트랜지션. · hover 상태에 대한 Transform 트랜지션. · 복잡한 애니메이션 없음; 모션은 미세하고 기능적임.

링크 및 버튼과 같은 인터랙티브 요소에서 미세한 배경색 또는 텍스트색 변경. · 표준 브라우저 focus 상태를 통한 즉각적인 피드백.

08

컴포넌트

• button 주요 행동 유도용('Create', 'Start your Substack')에는 단색 주황색; 보조 버튼은 미세한 테두리나 연한 회색 채우기가 적용된 흰색 배경을 사용합니다.
• card 피드 항목은 얇은 테두리로 구분되며, 작성자 아바타, 메타데이터, 텍스트 콘텐츠, 미디어, 그리고 행동 바(좋아요, 댓글, 공유)가 특징입니다.
• chip 최소한으로 사용; '구독' 텍스트는 보조 행동 링크로 작용합니다.
• input 검색 필드는 미세한 테두리와 둥근 모서리가 적용된 깔끔한 흰색 배경을 사용합니다.
• hero 세리프 헤드라인과 두 가지 뚜렷한 행동 유도 옵션(단색 주황색 버튼 대 흰색 텍스트 링크)이 있는 크고 짙은 청록색 배너입니다.

09

보이스와 금지 목록

• 톤 자신감 있고 직설적이며 크리에이터 중심적입니다.
• 헤드라인 간결하고 권한을 부여하며, 종종 더 편집적인 느낌을 위해 세리프 폰트를 사용합니다.
• CTA 직접적이고 행동 지향적이며, 'Start', 'Sign in', 'Log in'과 같은 명확한 동사를 사용합니다.

• 다크 테마를 사용하지 마세요 — 스크린샷은 밝은 회색 악센트가 적용된 주로 흰색 배경을 보여줍니다.
• 여러 악센트 색상을 사용하지 마세요 — 스크린샷은 단일로 지배적인 고채도 색상인 주황색을 보여줍니다.
• 메인 피드에 둥근 카드를 사용하지 마세요 — 스크린샷은 단순한 수평선으로 구분된 항목을 보여줍니다.
• 주요 헤드라인에 산세리프 폰트를 사용하지 마세요 — 스크린샷은 디스플레이 텍스트에 세리프 폰트(예: Cahuenga/Spectral)를 보여줍니다.
• 카드에 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 피드 항목에 매우 미세하거나 없는 섀도우를 보여줍니다.
• 콘텐츠에 밀집된 다컬럼 그리드를 사용하지 마세요 — 스크린샷은 메인 피드를 위한 단일 집중 컬럼을 보여줍니다.
• UI에 장식 요소나 일러스트레이션을 사용하지 마세요 — 스크린샷은 아이콘과 사진만으로 구성된 깔끔하고 기능적인 레이아웃을 보여줍니다.
• 피하기: 지나치게 캐주얼한 은어
• 피하기: 기술 전문 용어
• 피하기: 과장된 표현

10

팩 안의 실제 스크린샷

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

11

System Prompt

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