큐레이션 · 오픈 · 무료

Nofilter

패션과 사진을 위한 깔끔하고 타이포그래피 중심의 편집 플랫폼입니다.

01

디자인 DNA

하이엔드 패션 매거진 웹사이트

02

컬러

흰색 배경에 고대비 검은색 텍스트로 콘텐츠를 강조하는 모노크롬 팔레트입니다.

03

타이포그래피

grotesque-sans

• display120px · 400
• heading35px · 400
• body24px · 400
• small15px · 400

모든 텍스트에 프라그마티카 산세리프를 사용합니다. · 내비게이션 링크는 대문자로 표시합니다. · 작성자 및 날짜 줄은 더 작은 본문 크기로 설정합니다.

04

여백

4px의 배수로 일관된 패딩과 마진을 적용합니다.

05

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

주요 컨테이너에 1px solid rgb(51, 51, 51) 테두리를 적용합니다.

06

레이아웃

대형 이미지와 비대칭 칼럼을 활용한 그리드 기반 편집 레이아웃입니다.

07

모션과 인터랙션

커서 포인터로 클릭 가능한 요소를 표시합니다. · 커서 포인터로 클릭 가능한 요소를 표시합니다.

08

컴포넌트

• button 대문자 스타일링과 커서 포인터를 적용한 텍스트 링크입니다.
• card 대형 이미지가 포함된 기사용 테두리 컨테이너입니다.
• chip 없음
• input 없음
• hero 전체 너비에 걸친 대규모 타이포그래피 타이틀입니다.

09

보이스와 금지 목록

• 톤 권위 있고, 세련되며, 미니멀한 어조입니다.
• 헤드라인 직설적이고 임팩트 있는 대형 타이포그래피입니다.
• CTA 절제된 텍스트 기반 내비게이션입니다.

• 장식용 폰트를 사용하지 마세요 — 스크린샷에서는 프라그마티카 산세리프가 전체적으로 사용되었습니다.
• 배경 그라데이션을 추가하지 마세요 — 스크린샷에서는 단색 흰색 배경을 보여줍니다.
• 카드에 드롭 섀도우를 사용하지 마세요 — 스크린샷에서는 플랫하고 테두리가 있는 컨테이너를 보여줍니다.
• 둥근 모서리를 사용하지 마세요 — 스크린샷에서는 날카롭고 직사각형 요소를 보여줍니다.
• 화려한 포인트 컬러를 도입하지 마세요 — 스크린샷에서는 모노크롬 팔레트를 보여줍니다.
• 불필요한 요소로 레이아웃을 복잡하게 만들지 마세요 — 스크린샷에서는 충분한 여백을 보여줍니다.
• 피하기: 장식용 폰트를 사용하지 마세요.
• 피하기: 배경 그라데이션을 추가하지 마세요.
• 피하기: 카드에 드롭 섀도우를 사용하지 마세요.
• 피하기: 둥근 모서리를 사용하지 마세요.
• 피하기: 화려한 포인트 컬러를 도입하지 마세요.
• 피하기: 불필요한 요소로 레이아웃을 복잡하게 만들지 마세요.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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