큐레이션 · 오픈 · 무료

Godly

웹 디자인 영감을 전시하도록 디자인된 미니멀하고 하이엔드 큐레이션 갤러리.

01

디자인 DNA

오직 작품만이 중요한 깨끗하고 넓은 갤러리 공간.

02

컬러

큐레이션된 콘텐츠의 다양한 색상을 위한 중립적인 프레임 역할을 하는 엄격한 단색 팔레트.

03

타이포그래피

humanist-sans

• display56px · 500
• h232px · 500
• body16px · 400
• caption14px · 400

모든 텍스트는 약간의 음수 자간을 가진 Inter 폰트 패밀리를 사용합니다. · 헤드라인은 반볼드 느낌을 위해 font-weight 500을 사용합니다. · 본문 텍스트는 가독성을 위해 여유로운 1.5 줄 높이를 유지합니다.

04

여백

여유로운 여백과 일관된 padding이 깨끗하고 숨 쉬는 리듬을 만듭니다.

05

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

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

0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

06

레이아웃

히어로 섹션을 위한 중앙 단일 열 레이아웃에서, 조밀하고 대칭적인 콘텐츠 카드 메이슨리 그리드로 전환됩니다.

07

모션과 인터랙션

hover 시 미세한 페이드 인아웃 · 인터랙티브 요소의 부드러운 배경색 트랜지션 · 버튼과 카드의 미세한 스케일 변환

150ms 트랜지션으로 투명도나 배경색의 미세한 변화. · 약간의 스케일 변환으로 즉각적인 시각적 피드백.

08

컴포넌트

• button 주요 작업을 위한 검정색 배경의 알약 모양 버튼과, 보조 작업을 위한 미세하고 테두리 없는 스타일.
• card 최소한의 텍스트와 함께 큰 시각적 썸네일을 우선시하는 깨끗하고 테두리가 없는 직사각형 카드.
• chip 탐색이나 메타데이터에 사용되는 작은 알약 모양의 텍스트 표시기.
• input 배경에 자연스럽게 녹아드는 미니멀하고 테두리 없는 입력 필드.
• hero 번개 아이콘과 함께 수직으로 중앙 정렬된 거대한 헤드라인과, 크고 두드러진 알약 모양 행동 유도 버튼.

09

보이스와 금지 목록

• 톤 자신감 있고 간결하며 영감을 주는 어조.
• 헤드라인 품질과 영감을 강조하는 짧고 강렬하며 가독성이 높은 진술.
• CTA '구독 +'와 같은 단순한 동사와 기호를 사용하여 직접적이고 행동 지향적.

• 카드에 드롭 섀도우를 사용하지 마세요. 스크린샷은 완전히 평면적이고 테두리가 없는 이미지 카드를 보여줍니다.
• 헤드라인에 세리프 폰트를 사용하지 마세요. 스크린샷은 전체적으로 깨끗한 휴머니스트 산세리프를 보여줍니다.
• 복잡하고 다채로운 UI 크롬을 사용하지 마세요. 스크린샷은 엄격한 흑백 인터페이스를 보여줍니다.
• 주요 버튼에 날카롭고 90도 모서리를 사용하지 마세요. 스크린샷은 완전히 둥글고 알약 모양의 버튼을 보여줍니다.
• 과도한 본문 padding이나 좁은 줄 간격을 사용하지 마세요. 스크린샷은 여유로운 여백과 1.5의 여유로운 줄 높이를 보여줍니다.
• 화려한 그라디언트나 장식적 배경을 사용하지 마세요. 스크린샷은 콘텐츠가 숨 쉴 수 있게 하는 단색 흰색 배경을 보여줍니다.
• 피하기: 과도한 느낌표 사용
• 피하기: 복잡한 기술 전문 용어
• 피하기: 주요 영역에서 길고 밀도 높은 문단

10

팩 안의 실제 스크린샷

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

11

System Prompt

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