큐레이션 · 오픈 · 무료

Starface

스킨케어 제품을 재미있는 컬렉터블로 대하는 고에너지, 플레이풀한 전자상거래 경험입니다.

01

디자인 DNA

활기차고 에너지 넘치는 십대 매거진이 팝 아트 사탕 가게와 만났습니다.

02

컬러

시그니처 강렬한 노란색, 밝은 마젠타, 그리고 밝은 그린을 날카로운 검정 테두리에 대비시킨 고채도 컬러 블로킹.

03

타이포그래피

geometric-sans · monospace

• display40px · 700
• body16px · 400

텍스트는 일관되게 소문자로 표시합니다. · 거의 모든 기능 및 설명 텍스트에 모노스페이스를 사용합니다. · 강렬한 헤더에는 두껍고 볼드한 둥근 산세리프를 사용합니다.

04

여백

카드 내부에 일관된 내부 패딩(25px)을 유지하여, 다양한 카드 크기에도 균일한 리듬감을 만듭니다.

05

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

모든 요소를 정의하고 컬러 블록을 분리하는 굵은 2px 검정 테두리 또는 단색 검정 구조적 간격.

없음

06

레이아웃

두꺼운 검정 선으로 분리된 단색 블록들의 엄격한 풀블리드 그리드.

07

모션과 인터랙션

제품 이미지에 대한 미세한 스케일링 on hover. · 원활한 전환을 위한 페이드 인 opacity.

인터랙티브 요소에 대한 미세한 transform 스케일링 또는 opacity 변화. · 지연 없이 즉각적이고 깔끔한 피드백.

08

컴포넌트

• button 검정 테두리, 텍스트가 있는 투명 배경 또는 단색 검정 배경.
• card 둥근 모서리(24px), 두꺼운 테두리, 그리고 명확한 이미지/텍스트 분리가 있는 밝은 단색 직사각형.
• chip 카테고리를 위한 태블리드 또는 작은 직사각형 컬러 코딩 태그.
• input 대담한 윤관 미학에 맞는 표준 테두리 인풋.
• hero 뷰포트를 지배하는 크고, 다채로우며, 이미지 중심의 블록.

09

보이스와 금지 목록

• 톤 매우 캐주얼하고 친근하며 약간 혼돈스러운 느낌. 인터넷 은어와 이모지를 사용합니다.
• 헤드라인 짧고, 임팩트 있으며, 소문자이고 열정적입니다.
• CTA 직설적이고, 소문자이며, 행동 지향적입니다.

• 세리프 서체를 사용하지 마세요 — 스크린샷에는 모노스페이스와 기하학적 둥근 산세리프 서체만 사용되어 있습니다.
• 대문자 텍스트를 사용하지 마세요 — 스크린샷에는 텍스트가 완전히 소문자로 되어 있습니다.
• 미세한 회색 테두리를 사용하지 마세요 — 스크린샷에는 대담하고 단색 검정 구조 선만 사용되어 있습니다.
• 복잡한 그림자를 사용하지 마세요 — 스크린샷에는 깊이 효과 없는 평면 컬러 블록만 사용되어 있습니다.
• 채도 낮은 파스텔 팔레트를 사용하지 마세요 — 스크린샷에는 매우 채도 높은 네온 스타일의 주요 색상만 사용되어 있습니다.
• 밀집된 텍스트 블록을 사용하지 마세요 — 스크린샷에는 짧고 임팩트 있으며 가독성 높은 카피만 사용되어 있습니다.
• 피하기: 격식 있는 언어
• 피하기: 대문자 텍스트
• 피하기: 세리프 서체
• 피하기: 채도 낮은 색상
• 피하기: 복잡한 문장

10

팩 안의 실제 스크린샷

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

11

System Prompt

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