큐레이션 · 오픈 · 무료

Victoiredouy

깊은 블랙 배경 위에 거대한 디스플레이 제목을 배치한, 냉峻한 타이포그래피 포트폴리오 또는 에디토리얼 사이트.

01

디자인 DNA

거대하고 압축된 디스플레이 타입이 특징인, 고대비 흑백 에디토리얼 매거진.

02

컬러

최대한의 대비와 에디토리얼 임팩트를 위해 거의 블랙 배경과 거의 흰색 텍스트를 사용하는 엄격한 단색 팔레트.

03

타이포그래피

condensed-grotesque-sans · monospaced

• display177px · 400
• heading54px · 400
• body15px · 400

본문 텍스트와 내비게이션에는 Space Mono를 사용합니다. · 거대한 디스플레이 제목에는 압축된 그로테스크산스를 사용합니다. · 대형 디스플레이 텍스트에는 타이트한 네거티브 트래킹을 적용합니다. · 내비게이션과 특정 레이블에는 대문자 변환을 사용합니다.

04

여백

주요 섹션을 분리하는 상당한 수직 패딩으로 느슨하고 다양하게 구성되어 있습니다.

05

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

주로 인터랙티브 상태와 미세한 구분을 위해 사용되는, 얇은 2px 테두리입니다.

0px 1px 2px rgba(0,0,0,0.5) · 0px 0px 0px 1px rgba(250,250,250,0.1)

06

레이아웃

극도로 큰 타이포그래피를 수용하도록 설계된 전체 폭 컬럼.

07

모션과 인터랙션

인터랙티브 요소에서의 부드러운 색상 전환. · UI 상태 변화를 위한 ease가 적용된 불투명도 및 transform 전환.

인터랙티브 요소에서의 섬세한 색상 또는 배경색 변화. · 표준 active 상태.

08

컴포넌트

• button 대문자 모노스페이스 텍스트와 얇은 테두리가 있는 미니멀한 텍스트 기반 버튼.
• card 보이지 않음.
• chip 보이지 않음.
• input 보이지 않음.
• hero 압축된 대형 텍스트로 구성된, 거대하고 화면을 가득 채우는 타이포그래피 히어로 섹션.

09

보이스와 금지 목록

• 톤 미니멀하고 엄숙함.
• 헤드라인 타이트하게 트래킹된, 압축된 대문자 디스플레이 타입.
• CTA 절제된 모노스페이스 텍스트 레이블.

• 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 반지름이 0인 가장자리를 보여줍니다.
• 화려한 악센트 컬러를 사용하지 마세요 — 스크린샷은 엄격한 단색 팔레트를 보여줍니다.
• 가볍거나 세리프 디스플레이 폰트를 사용하지 마세요 — 스크린샷은 무겁고 압축된 산세리프 디스플레이 타입을 보여줍니다.
• 제목에 넉넉한 line-height를 사용하지 마세요 — 스크린샷은 거의 닿을 듯이 타이트하게 조여진, 디스플레이 라인을 보여줍니다.
• 디스플레이 텍스트에 넓은 letter-spacing을 사용하지 마세요 — 스크린샷은 타이트하고 네거티브 letter-spacing을 보여줍니다.
• 텍스트에 드롭 섀도우를 사용하지 마세요 — 스크린샷은 플랫하고 고대비의 타이포그래피를 보여줍니다.
• 피하기: 화려한 그라디언트
• 피하기: 둥근 모서리
• 피하기: 텍스트 드롭 섀도우
• 피하기: 장난스럽거나 장식적인 요소

10

팩 안의 실제 스크린샷

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

11

System Prompt

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