큐레이션 · 오픈 · 무료

Telfar

대담하고 접근 가능한 럭셔리에 초점을 맞춘 미니멀리스트, 사진 중심 패션 전자상거래.

01

디자인 DNA

제품이 주인공이 되는 깔끔하고 실용적인 부티크

02

컬러

제품 사진이 주도하도록 고대비 미니멀리즘

03

타이포그래피

grotesque-sans

• display56px · 400
• body16px · 400

대부분의 UI 요소에 균일한 굵기 사용 · _COMPACT_ 텍스트 블록을 위해 타이트한 line-height 보장 · 라벨과 배지에 대문자 사용을 절제

04

여백

표준 전자상거래 spacing과 일관된 4px 기본 격자

05

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

카드 및 인터랙티브 요소를 위한 얇은 1px solid 검정선

rgba(0, 0, 0, 0.01) 0px 0px 10px 0px

06

레이아웃

제품 쇼케이스를 위한 비대칭 메이슨리 또는 2열 격자

07

모션과 인터랙션

hover 상태를 위한 부드러운 스케일 전환 · 모달 및 오버레이 요소를 위한 페이드인

미묘한 opacity 변화 또는 background-color 전환 · 최소한의 애니메이션으로 즉각적인 시각적 피드백

08

컴포넌트

• button 얇은 테두리를 가진 미니멀리스트 알약형 또는 사각형
• card 제품 그룹화를 위한 미묘한 테두리의 깨끗한 흰색 카드
• chip 간단한 텍스트 기반 내비게이션 탭
• input 명확한 레이블이 있는 표준 텍스트 입력 필드
• hero 최소한의 오버레이 텍스트가 있는 대형 전폭 사진 배너

09

보이스와 금지 목록

• 톤 자신감 있고 직접적이며 절제된
• 헤드라인 명확하고 유용한 정보 전달, 색상이나 제품 유형을 명시하는 경우가 많음
• CTA '전체 보기' 또는 '환경설정 관리'와 같이 단순하고 행동 지향적인 텍스트

• 장식적 gradient를 사용하지 않음 — 스크린샷은 단색 배경을 보여줌
• 강한 drop shadow를 사용하지 않음 — 스크린샷은 매우 미묘한 box-shadow 하나만 보여줌
• 굵은 서체 굵기를 사용하지 않음 — 스크린샷은 굵기 400 선호를 보여줌
• UI에 화려한 강조 색상을 사용하지 않음 — 스크린샷은 주도적인 강조 색상을 보여주지 않음
• 모든 곳에 둥근 모서리를 사용하지 않음 — 스크린샷은 주로 날카롭거나 약간 둥근 모서리를 보여줌
• 아이콘으로 UI를 복잡하게 만들지 않음 — 스크린샷은 헤더의 미니멀리스트 아이콘 세트를 보여줌
• 피하기: 과도한 프로모션 언어
• 피하기: 장식적 요소
• 피하기: 화려한 색상 조합

10

팩 안의 실제 스크린샷

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

11

System Prompt

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