큐레이션 · 오픈 · 무료

Ghost

Ghost는 독립 출판자가 콘텐츠를 만들고 대중을 수익화할 수 있는 전문 플랫폼입니다.

cmspublishing

Ghost 스크린샷

↓ 디자인 시스템 다운로드 (27 MB)OpenDesign 에서 열기

원본 사이트: https://ghost.org

📦 팩 내용 보기 →

01

디자인 DNA

출판수익화멤버십크리에이터 이코노미

독립 작가를 위한 현대적이고 전문적인 도구 모음.

02

컬러

#FACC15Accent

#0F172AInk

#334155Ink soft

#FFFFFFBG

#F8FAFCBG soft

#F1F5F9BG quiet

#94A3B8Muted

rgba(229, 231, 235, 1)Line

흰색 배경 위의 고대비 흑백 타이포그래피에 단일한 선명한 노란색 강조와 다크 모드 대시보드 요소를 결합합니다.

03

타이포그래피

geometric-sans · humanist-sans · ui-monospace

display80px · 500
heading48px · 600
body18px · 400
caption12px · 500

04

여백

4px

8px

16px

24px

32px

48px

64px

96px

수직 간격은 4px의 배수에 의존하며, 일반적인 간격은 24px, 32px, 48px입니다.

05

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

sm · 4px

md · 8px

lg · 16px

pill · 9999px

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.03) 0px 2px 6px 0px · rgba(0, 0, 0, 0.1) 0px 4px 6px -1px · rgba(0, 0, 0, 0.1) 0px 10px 15px -3px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px · rgba(0, 0, 0, 0.25) 0px 25px 50px -12px

06

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

최대 너비 컨테이너가 있는 표준 반응형 그리드입니다.

07

모션과 인터랙션

150msmicro

300mssmall

0msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

상태 변경 시 섬세한 페이드인 전환.

인터랙티브 요소에 섬세한 색상 변화 또는 고도 변화. · 표준 포인터 커서와 즉각적인 상태 피드백.

08

컴포넌트

button 흰색 텍스트가 있는 어두운 단색 배경, 또는 어두운 텍스트와 섬세한 그림자가 있는 밝은 배경입니다.
card 섬세한 그림자와 둥근 모서리가 있는 깨끗한 컨테이너입니다.
chip 자간이 확대된 작고 대문자 레이블입니다.
input 깔끔한 테두리가 있는 표준 텍스트 입력 필드입니다.
hero 최소한의 배경 위에 배치된 크고 대담한 타이포그래피로, 종종 제품 스크린샷과 함께 사용됩니다.

09

보이스와 금지 목록

톤 전문적이고, 강력하며, 명확합니다.
헤드라인 크고 대담한 타이포그래피를 사용하는 직접적이고 이점 중심적인 진술.
CTA 알약 모양 컨테이너와 함께 자주 사용되는 행동 지향적 문구.

복잡한 gradient를 사용하지 마세요 — 스크린샷은 평면색 블록과 단색 배경을 보여줍니다.
제목에 세리프 폰트를 사용하지 마세요 — 스크린샷은 깨끗하고 기하학적인 sans-serif를 보여줍니다.
작고 빡빡한 타이포그래피를 사용하지 마세요 — 스크린샷은 넉넉한 간격과 큰 타이포그래피를 보여줍니다.
주요 액션에 둥글고 버블 같은 버튼을 사용하지 마세요 — 스크린샷은 날렵하고 전문적인 버튼을 보여줍니다.
혼란스러운 색상 팔레트를 사용하지 마세요 — 스크린샷은 절제된 검정, 흰색, 노란색 체계를 보여줍니다.
얇고 저대비 텍스트를 사용하지 마세요 — 스크린샷은 밝은 배경 위의 고대비 잉크를 보여줍니다.
피하기: 지나치게 캐주얼한 언어
피하기: 어수선한 레이아웃
피하기: 집중을 방해하는 애니메이션

10

팩 안의 실제 스크린샷

Ghost — 桌面首屏（hero） — 桌面首屏（hero）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 移动首屏 — 移动首屏

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

11

System Prompt

Ghost는 전문적인 출판 플랫폼입니다. 디자인 DNA는 깨끗하고 고대비이며, 검정(#0F172A)과 흰색(#FFFFFF)이 지배적이고 상징적인 노란색(#FACC15) 강조가 있습니다. 타이포그래피는 기하학적 sans-serif 표시 폰트와 인간론적 sans-serif 본문 폰트를 사용하며, 큰 제목에는 타이트한 자간을 적용합니다. 레이아웃은 넓으며, 12열 그리드와 풍부한 여백을 활용합니다. 핵심 중요 금지 사항: 세리프 폰트를 사용하지 마세요, 복잡한 gradient를 사용하지 마세요, 저대비 텍스트를 사용하지 마세요. 인터페이스는 프리미엄하고 권위적이며 콘텐츠에 집중되어 있습니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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