Shopping Google · 디자인 DNA

트렌딩 할로데이 제품을 강조하는 큐레이션 기반, 에디토리얼 중심 쇼핑 경험.

디자인 DNA

하이엔드 매거진의 할로데이 선물 가이드를 미니멀리스트 웹 경험으로 번역한 것.

컬러

#1A0DABAccent

#1F1F1FInk

#515151Ink soft

#FFFFFFBG

#70757AMuted

rgba(0,0,0,0.04)Line

깨끗한 화이트 캔버스, 짙은 잉크 텍스트, 주요 행동을 위한 단일의 생생한 Google 블루 액센트로 구성된 고대비 에디토리얼 팔레트.

타이포그래피

디스플레이 헤드라인은 우아한 에디토리얼 느낌을 위해 타이트한 트래킹의 라이트 웨이트 트랜지셔널 세리프를 사용합니다. · 본문 텍스트와 UI 요소는 깨끗하고 가독성이 높은 휴머니스트 산스세리프를 사용합니다. · 제품 타이틀은 그리드 레이아웃에서 최대한의 가독성을 위해 표준 웨이트 산스세리프로 렌더링됩니다.

여백

4px

8px

12px

16px

24px

32px

48px

64px

96px

제품 카드를 분리하고 깨끗하고 통기 있는 레이아웃을 유지하기 위해 넉넉한 화이트 스페이스와 다양한 거터(16px, 24px)를 가진 유연한 그리드.

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

rgba(0,0,0,0.04) 0px 0px 0px 1px · rgba(0,0,0,0.2) 0px 4px 8px 0px · rgba(60,64,67,0.25) 0px 2px 8px 0px

레이아웃

전체 폭의 히어로 섹션과 유연한 메이슨리 스타일 제품 카드 그리드가 이어지는 중앙 정렬, 최대폭 제한의 콘텐츠 컨테이너.

모션과 인터랙션

드롭다운 및 오버레이를 위한 부드러운 가시성 전환. · hover 상태에서의 미묘한 배경색 변화. · 인터랙티브 요소를 위한 표준 border-radius 전환.

배경색 변화나 그림자 변화와 같은 미묘한 시각적 단서가 카드와 버튼의 인터랙티브함을 나타냅니다. · 직접적인 내비게이션 또는 제품 상세 정보의 확장.

컴포넌트

보이스와 금지 목록

System Prompt

이것은 Google Shopping의 'Holiday 100' 큐레이션 가이드로, 에디토리얼 디스커버리 도구로 자체를 포지셔닝합니다. 디자인 DNA는 깨끗한 화이트(#FFFFFF) 캔버스, 짙은 잉크(#1F1F1F) 텍스트, 주요 '로그인' 액션을 위한 단일의 생생한 블루 액센트(#1A0DAB)를 중심으로 합니다. 타이포그래피는 핵심 차별화 요소입니다: 메인 히어로는 우아하고 매거진 같은 느낌을 위해 라이트 웨이트 트랜지셔널 세리프 폰트(Crimson Pro)를, UI와 본문 텍스트는 휴머니스트 산스(Google Sans)를 사용합니다. 레이아웃은 중앙 정렬되고 통기 있으며, 큰 라이프스타일 사진과 부드러운 20px 보더 라디우스의 제품 카드가 특징입니다. 중요한 금지 사항: 절대로 어두운 배경을 사용하지 마세요, 절대로 디스플레이 헤드라인에 무거운 폰트 웨이트를 사용하지 마세요, 절대로 이미지 컨테이너에 날카로운 모서리를 사용하지 마세요.

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

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

OpenDesign 스킬 ↗