큐레이션 · 오픈 · 무료

Cupofcouple

패션, 여행, 디자인을 편집 정밀도로 기록하는 정제된 디저널.

01

디자인 DNA

고급 라이프스타일 사진의 큐레이션된 갤러리.

02

컬러

사진을 우선시하기 위해 엄격한 기하학적 테두리가 있는 미니멀리스트 단색 팔레트.

03

타이포그래피

didone-serif · humanist-sans

• display56px · 400
• heading32px · 400
• body16px · 400
• small10px · 400

헤드라인은 높은 스트로크 대비를 가진 우아한 디도네 세리프를 사용합니다. · 내비게이션과 메타데이터는 넓은 자간의 깔끔한 대문자 산세리프를 사용합니다. · 본문 텍스트는 정제된 저대비_look을 위해 일관된 400 웨이트를 유지합니다.

04

여백

카드를 위한 넉넉한 내부 패딩과 그리드를 위한 구조화된 세로 간격.

05

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

엄격한 그리드 구조를 만들기 위해 rgba(0, 0, 0, 0.8)을 사용하는 얇은 1px 테두리.

1px 0px 0px 0px rgba(240, 240, 240, 1)

06

레이아웃

구조적 구분선 역할을 하는 눈에 보이는 테두리 라인이 있는 엄격한 직사각형 그리드.

07

모션과 인터랙션

hover 시 부드러운 투명도 전환(0.25s linear 0.2s 지연). · 인터랙티브 요소에 일반적인 0.3s 전환.

텍스트 링크와 이미지에 미묘한 투명도 변화. · 표준 포인터 커서 인터랙션.

08

컴포넌트

• button 배경 채움 없이 텍스트만 있는 대문자 링크.
• card 얇은 내부 테두리가 있는 이미지 중심 카드로, 헤어라인 그리드 라인으로 분리.
• chip 수직 파이프(|)로 구분된 미니멀 텍스트 태그.
• input 눈에 보이는 테두리나 배경 없이 'Search...'로 레이블이 지정된 간단한 텍스트 필드.
• hero 초점을 맞추는 거대하고 중앙 정렬된 디스플레이 세리프 로고.

09

보이스와 금지 목록

• 톤 정교하고, 미니멀하며, 큐레이션된.
• 헤드라인 높은 시각적 무게감을 위해 전부 대문자인 우아한 세리프 타이포그래피.
• CTA 눈에 띄는 버튼 없이 절제된 텍스트 기반 내비게이션.

• 선명한 강조 색상을 사용하지 마세요 — 스크린샷은 엄격한 단색 팔레트를 보여줍니다.
• 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 0px 반경의 모서리를 보여줍니다.
• 깊이감을 위해 드롭 그림자를 사용하지 마세요 — 스크린샷은 구조를 위해 얇은 테두리를 사용합니다.
• 굵은 글꼴 웨이트를 사용하지 마세요 — 스크린샷은 모든 텍스트에 균일한 400 웨이트를 보여줍니다.
• 헤드라인에 산세리프를 사용하지 마세요 — 스크린샷은 모든 타이틀에 세리프 타이포그래피를 보여줍니다.
• 복잡한 레이아웃을 사용하지 마세요 — 스크린샷은 헤어라인 구분선이 있는 넓고 그리드 기반 구조를 사용합니다.
• 피하기: 선명한 색상
• 피하기: 둥근 모서리
• 피하기: 고도를 위한 그림자

10

팩 안의 실제 스크린샷

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

11

System Prompt

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