Touchycoffee · 디자인 DNA

대담한 타이포그래피, 선명한 색상, 그리고 독특하고 반항적인 성격을 가진 활기차고 표현적인 D2C 커피 브랜드입니다.

디자인 DNA

컬러

#000000Ink

#9f4920BG

#fce3e3BG soft

#d0eaf4BG quiet

#788c8cMuted

rgba(0,0,0,1.0)Line

대담한 배경 블록과 선명한 검은색 텍스트에 의존하는, 고대비의 선명하고 약간 혼란스러운 팔레트입니다.

타이포그래피

인터랙티브 요소와 섹션 레이블에는 일관되게 text-transform: uppercase를 적용합니다. · 모노스페이스 텍스트의 자간은 타이트하고 엄격하게 유지하여 문자 격자가 드러나도록 합니다. · 표시용 타이포그래피에는 타이트한 행간을 적용하여 조밀하고 임팩트 있는 텍스트 블록을 만듭니다.

여백

4px

8px

16px

20px

24px

30px

40px

60px

80px

엄격한 수학적 리듬보다는 크고 뚜렷한 간격과 패딩에 의존하는, 느슨하고 불규칙한 리듬입니다.

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

레이아웃

엄격한 격자 제약을 무시하고 서로 겹쳐지는 대담하고 비대칭적인 단색 블록.

모션과 인터랙션

인터랙티브 요소의 미묘한 hover 스케일 또는 필터 효과. · 모달 등장/소멸을 위한 표준 DOM 요소 전환.

미묘한 밝기나 스케일 변화가 가능한 표준 포인터 커서. · CSS 전환을 통해 즉각적인 시각적 피드백.

컴포넌트

보이스와 금지 목록

팩 안의 실제 스크린샷

Touchycoffee — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

System Prompt

커피 브랜드를 위한 표현적이고 장난스러운 D2C 전자상거래 인터페이스를 디자인하십시오. 따뜻한 오렌지, 부드러운 핑크, 밝은 파랑과 같은 선명하고 단색의 배경 색상과, 선명한 검은색 텍스트 및 테두리가 특징인 대담하고 약간 혼란스러운 미학을 사용하십시오. 타이포그래피가 핵심입니다: 거대하고 표현적인 표시용 스크립트와, 모든 UI 요소 및 본문 텍스트에 사용되는 엄격한 대문자 모노스페이스 폰트를 페어링하십시오. 레이아웃은 깨끗하고 비어 있는 격자 대신, 두꺼운 검은색 스트로크가 있는 대담하고 겹쳐지는 색 블록에 의존합니다. 버튼과 카드와 같은 구성 요소는 오려낸 듯하고 뭉툭하게 느껴지며, 종종 알약 모양이나 무거운 둥근 모서리를 사용합니다. 세련됨, 미묘한 그라데이션, 또는 섬세한 타이포그래피를 피하고, 어조는 크고 독특하며 반항적입니다. 중요 제약 사항: 텍스트에는 모노스페이스 폰트를 엄격히 사용하고, UI 전반에 걸쳐 uppercase text-transform을 유지하며, 배경을 위해 이미지 대신 단색 블록에 의존하십시오.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗