큐레이션 · 오픈 · 무료

Wearechaiboy

현대적인 차 브랜드를 위한 다크, 프리미엄 에디토리얼 이커머스 경험.

01

디자인 DNA

현대적인 차 브랜드를 위한 하이 패션 매거진 에디토리얼.

02

컬러

블랙 캔버스와 화이트 타이포그래피를 사용하는 극단적인 고대비 단색. 시각적 무게감을 위해 포토그래피에 의존합니다.

03

타이포그래피

grotesque-sans

• display54px · 400
• body14px · 400
• small11px · 400

모든 네비게이션 및 유틸리티 텍스트에 대문자를 사용합니다. · 대형 디스플레이 사이즈에 타이트한 트래킹 (-1px)을 적용합니다.

04

여백

타이트하고 의도적으로, 에디토리얼 포토그래피를 강조하기 위해 넉넉한 네거티브 스페이스를 사용합니다.

05

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

1px solid #AFAFAF 또는 1px solid rgba(255,255,255,0.2)

06

레이아웃

엄격한 헤더/푸터 경계와 스크롤링 티커 탭이 있는 풀블리드 수직 캔버스.

07

모션과 인터랙션

모달 오버레이 및 UI 상태 변경을 위한 부드러운 투명도 전환. · 프로모션 메시지를 위한 선형 스크롤링 티커 탭.

상호작용을 나타내기 위한 미세한 색상 변화 또는 투명도 변경. · 투명도 또는 배경색 전환을 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 고스트 또는 아웃라인 스타일로 미세한 border-radius를 사용하고, 대문자 텍스트와 투명 배경을 사용합니다.
• card 엣지투엣지 포토그래피에 의존하는 최소한의 UI를 가진 이미지 중심 카드.
• chip 둥근 모서리가 있는 카테고리용 소형 아웃라인 뱃지.
• input 모달 오버레이 내의 간단한 하단 테두리만 있는 텍스트 필드.
• hero 주요 시각 요소로 작용하는 풀스크린 몰입형 포토그래피.

09

보이스와 금지 목록

• 톤 정교하고, 프리미엄이며, 직접적입니다.
• 헤드라인 주의를 끄는 짧고 강렬한 전형적인 대문자 문구.
• CTA 절제되면서도 명확하며, 종종 고스트 버튼이나 단순한 밑줄 텍스트를 사용합니다.

• 여러 브랜드 색상을 사용하지 마세요 — 블랙, 화이트, 그레이로 구성된 엄격한 단색 팔레트를 보여줍니다.
• 장식적이거나 스크립트 폰트를 사용하지 마세요 — 깔끔한 고딕산세리프 폰트만을 사용합니다.
• 무거운 드롭 섀도우를 사용하지 마세요 — 높이감 없이 플랫한 엣지투엣지 포토그래피를 보여줍니다.
• 복잡한 다색 그라디언트를 사용하지 마세요 — 단색 블랙 배경을 보여줍니다.
• 네비게이션에 소문자 텍스트를 사용하지 마세요 — 헤더와 푸터의 모든 텍스트가 대문자임을 보여줍니다.
• 둥근 카드 테두리를 사용하지 마세요 — 날카로운 직사각형 컨테이너 또는 풀블리드 이미지를 보여줍니다.
• 피하기: 여러 색상 사용을 피하고 팔레트를 엄격히 단색으로 유지합니다.
• 피하기: 장식적이거나 스크립트 폰트를 피하고 깔끔한 모던한 미학을 유지합니다.
• 피하기: 무거운 드롭 섀도우나 불필요한 그라디언트를 피합니다.
• 피하기: 복잡한 레이아웃을 피하고 대형 이미지와 네거티브 스페이스를 우선시합니다.
• 피하기: 장난기 있거나 캐주얼한 어조를 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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