큐레이션 · 오픈 · 무료

Fableandmane

수제 향수 제품을 위한 깔끔하고 프리미엄 전자상거래 인터페이스입니다.

01

디자인 DNA

미니멀한 하이엔드 약국 선반

02

컬러

따뜻한 오프화이트 배경에 고대비 단색 텍스트와 주요 액션을 위한 단 하나의 고채도 레드 강조색을 사용합니다.

03

타이포그래피

transitional-serif · geometric-sans

• display72px · 800
• headline56px · 700
• body16px · 400

표현적이고 임팩트 있는 헤드라인에는 트랜지션 세리프를 사용합니다. · 모든 기능 및 본문 텍스트에는 기하학적 산세리프를 사용합니다.

04

여백

일관된 4px 기본 단위와 여유로운 여백을 사용하여 프리미엄이고 깔끔한 느낌을 유지합니다.

05

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

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.25) 0px 4px 20px 0px · rgba(0, 0, 0, 0.05) 0px -4px 10px 0px

06

레이아웃

제품에 집중하는 중앙 정렬 단일 열 레이아웃에 여유로운 수평 패딩을 적용합니다.

07

모션과 인터랙션

모달 및 페이지 요소를 위한 부드러운 페이드인 전환. · 인터랙티브 요소의 미세한 hover 상태 변환.

버튼과 링크의 미세한 배경색 또는 불투명도 변화. · transform 또는 불투명도 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 고채도 레드 배경에 흰색 텍스트의 알약 모양 주요 버튼; 어두운 텍스트의 외곽선 이차 버튼입니다.
• card 미세한 테두리 또는 부드러운 그림자, 둥근 모서리(24px)를 갖춘 깔끔한 제품 카드입니다.
• chip N/A - 분석된 모달/히어로 상태에서 두드러지게 보이지 않습니다.
• input N/A - 분석된 모달/히어로 상태에서 두드러지게 보이지 않습니다.
• hero 한쪽에는 큰 타이포그래피, 반대쪽에는 제품 이미지를 배치한 분할 레이아웃입니다.

09

보이스와 금지 목록

• 톤 세련되고 고급스러우며 친근한 어조.
• 헤드라인 좁은 자간의 굵고 표현적인 세리프 헤드라인.
• CTA 알약 모양 버튼의 직접적이고 행동 지향적인 동사.

• 네온이나 과도하게 채도 높은 색상을 사용하지 마세요 - 스크린샷은 따뜻한 오프화이트 배경(#FFF5EC)에 단 하나의 레드 강조색을 보여줍니다.
• 순수하게 모노스페이스나 필기체 폰트를 사용하지 마세요 - 스크린샷은 기하학적 산세리프와 트랜지션 세리프 카테고리를 사용합니다.
• 모서리에 날카롭고 직사각형을 사용하지 마세요 - 스크린샷은 요소에 큰 24px 테두리 반경을 보여줍니다.
• 인터페이스를 밀집된 정보로 채우지 마세요 - 스크린샷은 여유로운 간격과 깔끔한 레이아웃을 유지합니다.
• 주요 배경으로 밝은 흰색(#FFFFFF)을 사용하지 마세요 - 스크린샷은 지속적으로 따뜻한 크림 톤을 사용합니다.
• 가독성을 위해 본문 텍스트에 얇고 읽기 어려운 폰트 웨이트를 사용하지 마세요 - 스크린샷은 정규 400 웨이트를 사용합니다.
• 피하기: 지저분한 인터페이스
• 피하기: 지나치게 장난스럽거나 캐주얼한 언어
• 피하기: 강렬하고 고채도의 색상 팔레트

10

팩 안의 실제 스크린샷

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

11

System Prompt

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