큐레이션 · 오픈 · 무료

Nomad

기능성과 정제된 미학에 기반한 고급 기술 액세서리를 위한 프리미엄 전자상거래 경험.

01

디자인 DNA

내구성과 여행 중심의 변형이 가미된 Apple 스타일 제품 리테일.

02

컬러

사진 히어로와 함께하는 고대비 단색 베이스, 주요 브랜드 강조 색상은 없음.

03

타이포그래피

grotesque-sans · inconsolata

• display56px · 700
• heading24px · 700
• body16px · 400
• caption14px · 400
• overline12px · 700

04

여백

4px 단위의 선형 간격 스케일, 넓은 레이아웃에 넉넉하게 사용.

05

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

1px solid rgba(0, 0, 0, 1.0)

0px 6px 6px -3px rgba(0, 0, 0, 0.06) · 0px 0px 0px 1px rgba(0, 0, 0, 0.06) · 0px 0px 0px 1px inset rgba(0, 0, 0, 0.1)

06

레이아웃

풀宽度 사진 히어로로 시작하여 중심 정렬된 인용구 섹션과 제품 카드 격자로 구성.

07

모션과 인터랙션

오버레이 및 모달용 페이드 인/아웃 (불투명도 0.2s) · 상호작용 요소를 위한 매끄러운 hover 전환 (0.15s)

버튼과 링크에 대한 미세한 불투명도 또는 색상 변화. · 표준 버튼 상태를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 고대비 단색 채우기 또는 간단한 텍스트 링크가 포함된 둥근 알약형 또는 소프트 커브 버튼.
• card 미세한 내부 또는 드롭 섀도우가 있는 둥근 모서리 제품 카드. 종종 격자 또는 이미지 배경을 특징으로 함.
• chip 주요 뷰포트에 보이지 않음.
• input 소프트 둥근 모서리와 내부 섀도우가 있는 표준 양식 필드.
• hero 다크 그라디언트 오버레이와 거대하고 좁게 트래킹된 세리프 없는 타이포그래피가 포함된 풀블리드 사진 이미지.

09

보이스와 금지 목록

• 톤 자신감 있고, 프리미엄하며, 기능 중심.
• 헤드라인 미니멀하고 큰, 좁게 트래킹된 세리프 없는 진술.
• CTA 직접적이고 명확하며 행동 지향적.

• 밝은 주요 강조 색상을 사용하지 마십시오 — 스크린샷은 지배적인 색조 없이 엄격한 단색 팔레트를 보여줍니다.
• 주요 헤드라인에 장식적 세리프 폰트를 사용하지 마십시오 — 스크린샷은 디스플레이 텍스트에 좁고 볼드한 grotesque-sans를 보여줍니다.
• 주요 UI 요소에 부드러운 원형 border-radius를 적용하지 마십시오 — 스크린샷은 날카로운 모서리와 알약형 버튼의 혼합을 보여줍니다.
• 무겁고 화려한 드롭 섀도우를 사용하지 마십시오 — 스크린샷은 매우 미세하고 거의 보이지 않는 드롭 섀도우 또는 내부 윤곽선을 보여줍니다.
• 모든 본문 텍스트를 중앙 정렬하지 마십시오 — 스크린샷은 히어로 텍스트는 중앙 정렬하지만 다른 곳은 표준 좌측 정렬 본문을 보여줍니다.
• 주요 텍스트에 가볍고 얇은 웨이트를 사용하지 마십시오 — 스크린샷은 주로 정규(400)와 볼드(700) 웨이트를 보여줍니다.
• 피하기: 지나치게 캐주얼하거나 장난스러운 언어 사용을 피하십시오.
• 피하기: 복잡한 그라디언트 또는 장식적 요소 사용을 피하십시오.
• 피하기: 저대비 텍스트 사용을 피하십시오.
• 피하기: 복잡한 UI 또는 과도한 UI 크롬 사용을 피하십시오.
• 피하기: 지배적인 밝은 강조 색상 사용을 피하십시오.
• 피하기: 주요 헤드라인에 장식적 세리프 사용을 피하십시오.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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