큐레이션 · 오픈 · 무료

Athletic Brewing

프리미엄 무알콜 비어를 위한 대담하고 자연에서 영감을 받은 전자상거래 경험.

01

디자인 DNA

단지 맥주를 양조하는 프리미엄 아웃도어 라이프스타일 브랜드

02

컬러

대담하고 활기찬 커뮤니케이션을 위한 깊은 네이비와 밝은 노란색의 고대비 조합.

03

타이포그래피

condensed-sans · geometric-sans

• display64px · 900
• display-sm40px · 900
• body16px · 400
• caption12px · 400

모든 제목은 대문자 변환을 사용 · 요소 간에 넉넉한 수직 간격 유지 · 텍스트와 배경 간 높은 대비 보장

04

여백

제품이 숨쉴 수 있도록 넉넉하고 공기감 있는 간격.

05

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

1px solid rgb(0, 58, 93)

rgba(0, 0, 0, 0.08) 0px 4px 16px 0px · rgba(0, 0, 0, 0.04) 0px 2px 10px 5px

06

레이아웃

눈에 띄는 상단 내비게이션과 전체 폭 프로모션 배너를 갖춘 중앙 정렬 콘텐츠.

07

모션과 인터랙션

hover 상태에 대한 빠른 100ms 전환 · 가시성 변화에 대한 200ms ease-in-out · 배경색에 대한 300ms 전환

인터랙티브 요소에 대한 절제된 색상 변화 또는 그림자 증가. · 버튼에 대한 마이크로 인터랙션으로 즉각적인 피드백.

08

컴포넌트

• button 알약 형태의 둥근 모서리를 가진 고대비 주요 버튼 (노란색 배경, 네이비 텍스트).
• card '베스트 셀러'와 같은 명확한 뱃지를 가진 이미지 중심 제품 카드.
• chip 제품 속성을 표시하기 위한 작은 알약 형태의 태그.
• input 표준 테두리 스타일을 적용한 깔끔하고 미니멀한 양식 필드.
• hero 대담한 타이포그래피와 고품질 사진이 포함된 대형 분할 레이아웃 또는 전체 폭 섹션.

09

보이스와 금지 목록

• 톤 자신감 있고, 활기차며, 사명 중심적.
• 헤드라인 대담하고, 명령형이며, 주로 대문자 사용.
• CTA 직접적이고 행동 지향적. 예: 'GET RUN WILD' 또는 'FIND IN STORE'.

• 제목에 얇거나 가벼운 폰트 웨이트를 사용하지 마세요 — 스크린샷은 두꺼운 900 웨이트 타이포그래피를 보여줍니다
• 색을 빼거나 파스텔 팔레트를 사용하지 마세요 — 스크린샷은 고채도 네이비, 시안, 노란색을 보여줍니다
• 버튼에 둥근 사각형이나 부드러운 모서리를 사용하지 마세요 — 스크린샷은 극단적인 알약 형태의 둥근 모서리를 보여줍니다
• 좁은 패딩을 가진 작고 밀집된 레이아웃을 사용하지 마세요 — 스크린샷은 넉넉한 여백과 큰 터치 타겟을 보여줍니다
• 장식용 세리프 서체를 사용하지 마세요 — 스크린샷은 깔끔한 운동용 산세리프를 사용합니다
• 다크 모드를 기본 테마로 사용하지 마세요 — 스크린샷은 어두운 텍스트가 있는 밝은 배경을 사용합니다
• 피하기: 수동적이거나 지나치게 격식을 차린 언어
• 피하기: 제품과 관련 없는 복잡한 전문 용어
• 피하기: 지나치게 복잡하거나 분주한 시각적 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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