큐레이션 · 오픈 · 무료

Joyntcbd

대담하고 채도 높은 UI 악센트를 가진 니치 그래픽 스트릿웨어를 위한 다크 테마 전자상거래 플랫폼입니다.

01

디자인 DNA

니치 그래픽 중심 의류를 위한 하이에너지 디지털 부티크

02

컬러

대비가 강한 다크 기조 팔레트에 깔끔한 화이트 콘텐츠 배경과 활성 요소를 위한 생동감 있는 블루 악센트를 조화롭게 배치합니다.

03

타이포그래피

geometric-sans · humanist-sans

• display24px · 700
• body16px · 400
• caption12px · 600

대담하고 표현력 있는 디스플레이 텍스트에는 기하학적 산세리프(SharpGrotesk 스타일)를 사용합니다. · 본문 텍스트와 표준 UI 요소에는 휴머니스틱 산세리프(Roobert 스타일)를 사용합니다. · 어두운 배경 위의 텍스트에는 순백(#ffffff)을 사용하여 높은 대비를 유지합니다.

04

여백

표준 8/16/24px 거터를 사용하는 일관된 4px 그리드입니다.

05

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

1px solid rgba(233, 233, 236, 1)

0px 2px 4px 0px rgba(21, 21, 35, 0.2) · 0px 0px 10px 0px rgba(0, 0, 0, 0.4) · 0px -16px 16px 0px rgb(21, 21, 35)

06

레이아웃

고정 상단 헤더, 전체 너비 히어로/제품 섹션, 그리고 다단 제품 상세 레이아웃을 갖춘 표준 전자상거래 그리드입니다.

07

모션과 인터랙션

hover 시 미세한 불투명도 및 변환 전환(0.1s-0.15s ease-in-out). · 광범위한 인터랙티브 상태를 위한 표준 'all' 속성 전환.

약간의 스케일 또는 색상 변화. 일반적으로 빠른 100ms-150ms 전환 효과가 적용됩니다. · 상태 변화를 통한 즉각적인 시각적 피드백을 제공합니다.

08

컴포넌트

• button 주요 액션에는 둥근 직사각형(12px 반지름), 보조 태그와 칩에는 알약 형태(999px 반지름)를 사용합니다.
• card 제품 표시를 위해 미세한 테드와 적당한 드롭 섀도우가 적용된 깔끔한 화이트 배경 카드입니다.
• chip 제품 스타일과 카테고리를 표시하는 데 사용되는 작은 알약 형태의 태그입니다.
• input 높은 대비의 테두리와 두드러진 아이콘 버튼이 있는 둥근 검색창입니다.
• hero 사진과 대담한 텍스트 오버레이를 결합한 전체 너비의 시각적으로 밀도 높은 배너 섹션입니다.

09

보이스와 금지 목록

• 톤 직설적이고 트랜잭션적이며 에너지가 넘칩니다.
• 헤드라인 대담하고 간결하며, 강조를 위해 대문자 또는 혼합 대소문자를 자주 사용합니다.
• CTA 행동을 유도하는 높은 대비의 텍스트(예: 어두운 파란색 배경의 흰색 텍스트).

• 단순한 화이트 헤더를 사용하지 마세요. 스크린샷은 어두운 블루/네이비 주요 내비게이션 바를 보여줍니다.
• 모든 요소에 날카로운 직사각형 모서리를 사용하지 마세요. 스크린샷은 12px 둥근 모서리와 알약 형태의 구성요소가 혼합된 것을 보여줍니다.
• 단일 단색 팔레트에만 의존하지 마세요. 스크린샷은 다크 및 화이트 배경 대비 효과(#4e64df)를 보여줍니다.
• 세리프 또는 손글씨 글꼴을 사용하지 마세요. 스크린샷은 기하학적 및 휴머니스틱 산세리프의 엄격한 계층 구조를 보여줍니다.
• 모든 곳에 얇은 1px 테두리를 사용하지 마세요. 스크린샷은 높이감을 위해 두드러진 2px 테두리와 강한 섀도우를 사용합니다.
• 전체 배경을 화이트로 유지하지 마세요. 스크린샷은 다크 테마의 헤더와 다양한 오프화이트(#f4f4f5) 및 블루 틴트(#f1f3fe) 영역을 사용합니다.
• 피하기: 지나치게 시적인 언어
• 피하기: 차분한 톤
• 피하기: 미니멀리스틱 전문 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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