큐레이션 · 오픈 · 무료

Goodfit Us

강한 타이포그래피와 절제된 프리미엄 미학을 갖춘 정제된 미니멀리스트 전자상거래 플랫폼.

01

디자인 DNA

잘 큐레이션된 갤러리 또는 부티크 상점.

02

컬러

인터랙티브 요소를 위한 단일 생동감 있는 파란색 강조가 포함된 고대비 모노크롬 베이스.

03

타이포그래피

geometric-sans

• display24px · 700
• body16px · 400
• body-semibold16px · 600

04

여백

padding 및 간격에 적용되는 일관된 4px 그리드 시스템.

05

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

대비를 위해 1px solid rgba(21, 21, 35, 0.1) 또는 단색 다크 테두리

rgba(0, 0, 0, 0.06) 0px 6px 18px 0px · rgba(21, 21, 35, 0.2) 0px 2px 4px 0px

06

레이아웃

충분한 여백과 중앙 정렬된 콘텐츠 컨테이너를 갖춘 표준 12열 그리드.

07

모션과 인터랙션

미묘한 페이드인 · 부드러운 배경 전환 · 인터랙티브 hover 상태

인터랙티브 요소에서 부드러운 색상 변화 또는 미묘한 입체감 변화. · 색상 변화 또는 미묘한 상태 전환을 통한 즉각적인 피드백.

08

컴포넌트

• button 모서리가 둥근(100px border-radius) 강조 색상 또는 다크 배경의 단색으로, 고대비 흰색 텍스트를 특징으로 합니다.
• card 미묘한 그림자와 명확한 테두리가 있는 둥근 컨테이너(12-20px 반경).
• chip 작고 둥근 라벨 또는 태그, 종종 다크 테두리 포함.
• input 미묘한 테두리와 둥근 모서리가 있는 표준 텍스트 필드.
• hero 눈에 띄는 이미지와 명확한 행동 유도가 있는 대형 타이포그래피 전시.

09

보이스와 금지 목록

• 톤 자신감 있고, 깔끔하며, 큐레이션된.
• 헤드라인 좁은 간격과 고대비를 가진 굵은 기하학적 sans-serif.
• CTA 직접적이고 행동 지향적이며, 종종 모서리가 둥근 버튼을 사용.

• 경쟁하는 여러 강조 색상을 사용하지 마세요 — 스크린샷은 단일 주요 파란색 강조를 보여줍니다.
• 본문 텍스트에 serif 글꼴을 사용하지 마세요 — 스크린샷은 기하학적 sans-serif를 보여줍니다.
• 주요 버튼에 날카롭고 사각형 모서리를 사용하지 마세요 — 스크린샷은 둥근 모서리의 버튼을 보여줍니다.
• 메인 콘텐츠 영역에 지나치게 어둡거나 검은 배경을 사용하지 마세요 — 스크린샷은 주로 흰색/밝은 배경을 보여줍니다.
• 복잡하고 지저분한 배경 텍스처를 사용하지 마세요 — 스크린샷은 깔끔하고 평평하거나 미묘한 그래디언트 배경을 보여줍니다.
• 텍스트와 배경 사이의 저대비를 사용하지 마세요 — 스크린샷은 밝은 배경에 높은 대비의 어두운 텍스트를 보여줍니다.
• 피하기: 복잡한 레이아웃
• 피하기: 지나치게 복잡한 팔레트
• 피하기: 불필요한 장식 요소

10

팩 안의 실제 스크린샷

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

11

System Prompt

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