큐레이션 · 오픈 · 무료

Fillingpieces

프리미엄이고 절제된 미학을 가진 깔끔한 타이포그래피 중심의 이커머스 디자인.

01

디자인 DNA

절제된 우아함을 중시하는 프리미엄 스트리트웨어 브랜드.

02

컬러

고대비 단색 팔레트를 통해 제품 사진이 주목받도록 합니다.

03

타이포그래피

geometric-sans · humanist-sans

• display48px · 500
• body16px · 400
• caption12px · 400

네비게이션 링크, 버튼, 보조 라벨에는 대문자를 사용합니다. · 큰 디스플레이 텍스트에는 타이트한 트래킹을 유지합니다. · 모든 UI 요소에 깔끔한 sans-serif를 사용하여 현대적인 느낌을 유지합니다.

04

여백

일관된 4px 기본 그리드가 레이아웃 전반에 걸쳐 시각적 조화를 보장하기 위해 사용됩니다.

05

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

1px solid rgba(0,0,0,0.1)이 경계와 입력 필드를 정의하는 표준입니다.

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1) · 0 20px 25px -5px rgba(0, 0, 0, 0.1)

06

레이아웃

최대 너비 컨테이너와 태블릿 및 데스크톱을 위한 반응형 브레이크포인트를 갖춘 표준 12칼럼 그리드 시스템.

07

모션과 인터랙션

UI 상태 변경 시 미세한 fade-in 및 fade-out. · 버튼과 링크의 hover 효과를 위한 부드러운 전환.

인터랙티브 요소의 불투명도 또는 색상의 미세한 변화. · 상태 변경을 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 간단한 직사각형 버튼으로, 종종 대문자 텍스트와 테두리 곡선이 없거나, 특정 call-to-actions에는 완전히 둥근 필 형태입니다.
• card 제품 이미지가 주요 초점이 되고 풍부한 여백으로 분리된 깔끔하고 테두리 없는 카드.
• chip 가끔 필터링에 사용되는 미니멀한 칩으로, 깔끔한 테두리와 간단한 타이포그래피를 사용합니다.
• input 은은한 하단 테두리 또는 밝은 배경을 사용하여 명확성에 초점을 맞춘 미니멀리스트 입력 필드.
• hero 텍스트 오버레이가 중앙 또는 왼쪽 정렬된 풀 너비 고품질 사진 히어로 섹션.

09

보이스와 금지 목록

• 톤 자신감 있고 현대적이며 절제된.
• 헤드라인 직설적이며, 대문자를 사용하고, 강조를 위해 자주 굵은 글꼴을 사용합니다.
• CTA 간단하고 명료하며, 깔끔한 버튼 내에 종종 대문자 텍스트를 사용합니다.

• 밝고 채도 높은 색상을 사용하지 마세요 — 팔레트는 엄격하게 검정, 흰색 및 회색으로 구성된 단색입니다.
• 버튼에 둥근 모서리를 사용하지 마세요 — 스크린샷에 표시된 직사각형 버튼은 날카롭거나 약간 둥근 모서리를 가지고 있습니다.
• 장식적이거나 스크립트 폰트를 사용하지 마세요 — 타이포그래피는 지속적으로 깔끔하고 sans-serif입니다.
• UI 요소에 무거운 그림자를 사용하지 마세요 — 그림자는 깊이감을 위해 미세하게 사용되며, 장식용이 아닙니다.
• 레이이아웃을 복잡하게 하지 마세요 — 디자인은 프리미엄 느낌을 만들기 위해 풍부한 여백에 의존합니다.
• 복잡한 그라데이션을 사용하지 마세요 — 색상 체계는 단색이며 평면적입니다.
• 피하기: 지나치게 장식적이거나 스크립트 폰트를 피합니다.
• 피하기: 밝거나 네온색 또는 불협화음 팔레트를 피합니다.
• 피하기: 너무 많은 요소가 경쟁하는 지나치게 복잡한 레이아웃을 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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