큐레이션 · 오픈 · 무료

Eye on Design

독특한 핑크와 그린 컬러 팔레트를 적용하여 큐레이팅된 기사를 특징으로 하는 에디토리얼 디자인 블로그입니다.

01

디자인 DNA

깔끔한 에디토리얼 레이아웃을 갖춘 프리미엄 디지털 디자인 매거진입니다.

02

컬러

지배적인 핑크 강조색과 고대비 블랙 타이포그래피를 사용한 깔끔한 화이트 캔버스입니다.

03

타이포그래피

grotesque-sans · humanist-sans

• display44px · 700
• body16px · 400

제목은 볼드한 고로테크산 세리프를 사용합니다 · 본문은 깔끔한 휴매니스트 산세리프를 사용합니다 · 대문자 레이블은 자간을 넓게 설정합니다

04

여백

섹션 사이에 넉넉한 여백을 두어 일관된 수직 리듬을 만듭니다.

05

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

강조 요소에는 2px 실선 블랙을 사용하고, 나머지는 최소화합니다.

06

레이아웃

기사 카드용 3열 그리드, 본문 콘텐츠용 1열 레이아웃입니다.

07

모션과 인터랙션

대화형 요소를 위한 부드러운 전환

링크와 버튼에 색상 전환을 적용합니다. · 즉각적인 반응을 제공합니다.

08

컴포넌트

• button 단순한 텍스트 링크 또는 작은 대문자 레이블입니다.
• card 이미지, 카테고리 레이블, 제목, 짧은 요약으로 구성됩니다.
• chip 핑크색 대문자 카테고리 레이블입니다.
• input 탐색에 통합된 검색 기능입니다.
• hero 볼드한 제목과 이미지를 갖춘 큰 강조 기사입니다.

09

보이스와 금지 목록

• 톤 전문적이고 권위적이면서도 접근 가능하고 몰입감 있는 톤입니다.
• 헤드라인 직설적이고 정보적이며 볼드합니다.
• CTA 절제되고 기능적입니다.

• 지저분한 레이아웃을 사용하지 않습니다 — 스크린샷은 요소 사이의 깔끔하고 넉넉한 여백을 보여줍니다
• 장식용 폰트를 사용하지 않습니다 — 스크린샷은 깔끔하고 기능적인 고로테크 및 휴매니스트 산세리프를 보여줍니다
• 어두운 배경을 사용하지 않습니다 — 스크린샷은 주로 화이트 배경을 보여줍니다
• 미세한 그라디언트를 사용하지 않습니다 — 스크린샷은 핑크 강조색과 같은 평면적인 단색 블록을 보여줍니다
• 저대비 텍스트를 사용하지 않습니다 — 스크린샷은 화이트 배경 위의 고대비 블랙 텍스트를 보여줍니다
• 탐색을 숨기지 않습니다 — 스크린샷은 지속적이고 명확한 탐색 요소를 보여줍니다
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 콘텐츠에서 주의를 분산시키는 장식적 요소
• 피하기: 지저분한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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