큐레이션 · 오픈 · 무료

Sometimesalways Com Au

따뜻하고 장난스러우며 큐레이션된 미학을 갖춘 흥미로운 음료를 위한 부티크 온라인 와인 숍.

01

디자인 DNA

큐레이션된 에디토리얼 미학을 갖춘 친근한 동네 와인 숍.

02

컬러

따뜻하고 어스러운 배경에 높은 대비의 검정 타이포그래피와 상호작용 요소를 위한 밝은 오렌지색 포인트.

03

타이포그래피

didone-serif · grotesque-sans

• display50px · 400
• h140px · 400
• body20px · 400
• caption12px · 400

메인 디스플레이 로고와 세리프 강조에는 SunsetSerial-Light를 사용합니다. · 모든 본문 텍스트, 네비게이션, UI 요소에는 Founders Grotesk를 사용합니다. · 볼드 웨이트는 문장 내 강조용으로만 절제하여 사용합니다.

04

여백

상호작용 요소에 여유로운 패딩(20px)과 그리드 레이아웃에 일관된 간격(20px)을 적용합니다.

05

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

1px solid black 또는 #333333

0px 2px 0px 0px rgba(0, 0, 0, 0.035) · 0px 5px 40px 0px rgba(0, 0, 0, 0.16) · 0px 8px 24px 0px rgba(0, 0, 0, 0.16)

06

레이아웃

전체 폭 프로모션 배너, 둥근 모서리의 히어로 섹션, 그 다음 반응형 제품 목록 그리드.

07

모션과 인터랙션

버튼과 링크의 호버 상태를 위한 불투명도와 transform 전환. · 상호작용 요소에서의 부드러운 색상 전환.

링크와 버튼에서 미세한 불투명도 변화 또는 색상 변화. · 부드러운 전환과 즉각적인 반응.

08

컴포넌트

• button 여유로운 패딩의 알약 모양 버튼으로, 종종 얇은 1px 테두리가 있습니다.
• card 큰 둥근 모서리(20px 또는 40px)의 이미지 중심 카드로, 아래에는 최소한의 텍스트만 있습니다.
• chip 1px 테두리의 작은 알약 모양 태그(예: 'Progressive', 'Traditional').
• input 최소한의 스타일링이 적용된 간단한 텍스트 입력 또는 검색 필드.
• hero 세리프 폰트로 브랜드명이 오버레이된 큰 둥근 모서리 이미지 컨테이너.

09

보이스와 금지 목록

• 톤 친근하고 접근하기 쉬우며 약간 장난스러운 느낌.
• 헤드라인 직설적이고 캐주얼하며, 때로는 대시 대신 장난스러운 화살표(→)를 사용합니다.
• CTA 명확하고 행동 지향적이며, 종종 대문자 텍스트를 사용합니다.

• 차갑고 임상적인 흰색 배경을 사용하지 마세요 — 스크린샷은 따뜻한 복숭아색 배경을 보여줍니다.
• 엄격한 미니멀리즘, 성긴 레이아웃을 사용하지 마세요 — 스크린샷은 밀도 높고 이미지가 풍부한 에디토리얼 레이아웃을 보여줍니다.
• 카드에 날카롭고 0px인 border-radius를 사용하지 마세요 — 스크린샷은 큰 20px 또는 40px 둥근 모서리를 보여줍니다.
• 딱딱하고 경직된 폰트를 사용하지 마세요 — 스크린샷은 장난스러운 세리프와 깔끔한 고트로스크 sans의 조합을 보여줍니다.
• 높은 대비의 다크 모드를 사용하지 마세요 — 스크린샷은 따뜻하고 밝은 팔레트를 사용합니다.
• 복잡한 다색 그래디언트를 사용하지 마세요 — 스크린샷은 단색의 따뜻한 색상과 사진에 의존합니다.
• 피하기: 지나치게 형식적이거나 딱딱한 언어
• 피하기: 읽기 어려운 밀도 높은 텍스트 블록
• 피하기: 딱딱하고 기업적인 디자인 패턴

10

팩 안의 실제 스크린샷

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

11

System Prompt

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