큐레이션 · 오픈 · 무료

Glob Land

접근성을 강조한 라이프스타일 제품을 위한 세련된 이커머스 경험.

EditorialRefinedRestraintProductGallery

↓ 디자인 시스템 다운로드 (4 MB)OpenDesign 에서 열기

원본 사이트: https://glob.land

📦 팩 내용 보기 →

디자인 DNA

프리미엄기능적접근성소재 중심깔끔한

고품질 소재 상품을 선보이는 프리미엄 디자인 저널.

컬러

#574CD5Accent

#212121Ink

#474747Ink soft

#FFFFFFBG

#EFF1F7BG soft

#F8F9FCBG quiet

#69727BMuted

rgba(71, 71, 71, 0.1)Line

크리스피 화이트와 쿨 그레이를 중심으로 한 단색 팔레트에 기능적 UI 요소를 위한 단일한 보라색 강조색을 사용합니다.

타이포그래피

humanist-sans

display32px · 500
heading18px · 600
body16px · 400
small14px · 400
tiny12px · 400

여백

4px

8px

10px

12px

15px

20px

24px

25px

50px

모든 간격, 패딩 및 레이아웃 구조에 일관된 4px 기본 그리드가 사용됩니다.

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

sm · 4px

md · 8px

lg · 9999px

pill · 9999px

1px solid rgba(71, 71, 71, 0.1)

shadow-sm: 0 0 5px 0 rgba(25, 27, 30, 0.03) · shadow-lg: 0 4px 40px 0 rgba(25, 27, 30, 0.2)

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

풍부한 여백을 갖춘 넓고 깔끔한 레이아웃으로, 가독성과 명확한 콘텐츠 계층 구조를 우선시합니다.

모션과 인터랙션

250msmicro

500mssmall

1000msmedium

cubic-bezier(0.215, 0.61, 0.355, 1)easing

UI 요소를 위한 페이드 인 및 페이드 아웃 · 상태 변경을 위한 부드러운 전환 · 인터랙티브 피드백을 위한 미묘한 움직임

세련된 느낌을 유지하면서 테두리 색상이나 배경 불투명도의 미묘한 변화. · 약간의 스케일 또는 불투명도 변화로 즉각적인 시각적 피드백을 제공한 후 기본 상태로 부드럽게 전환됩니다.

컴포넌트

button 가벼운 테두리 또는 보라색 단색 배경을 사용하는 미니멀리스트 알약 형태 버튼으로, 대문자 텍스트를 사용합니다.
card 부드러운 둥근 모서리와 미묘한 그림자를 가진 간단한 컨테이너로, 주로 그리드 레이아웃에 사용됩니다.
chip 얇은 테두리를 가진 미니멀한 직사각형 요소로, 주로 내비게이션이나 필터에 사용됩니다.
input 기능적 명확성에 초점을 맞춘 가벼운 테두리와 둥근 모서리가 있는 깔끔한 양식 필드입니다.
hero 전체 너비 또는 대형 이미지에 대담하고 깔끔한 타이포그래피와 단일 명확한 CTA를 겹쳐 놓은 형식입니다.

보이스와 금지 목록

톤 친근하고 유용하며 전문적입니다.
헤드라인 직설적이고 명확하며, 강조를 위해 표준 및 굵은 글꼴 두께를 혼용합니다.
CTA 행동 지향적이고 간결하며, 주로 알약 형태 버튼에서 대문자 텍스트를 사용합니다.

무거운 drop shadow를 사용하지 마세요 — 스크린샷에서는 깊이감을 위해 매우 미묘하고 낮은 불투명도의 그림자를 보여줍니다.
밝고 부조화스러운 색상을 적용하지 마세요 — 팔레트는 화이트, 그레이, 그리고 단일한 보라색 강조색으로 제한됩니다.
지나치게 장식적인 글꼴을 사용하지 마세요 — 타이포그래피는 깔끔하고 기능적이며 높은 가독성을 갖추고 있습니다.
과도한 요소로 레이아웃을 어지럽히지 마세요 — 디자인은 풍부한 여백과 명확한 계층 구조를 사용합니다.
날카롭고 공격적인 모서리를 사용하지 마세요 — 디자인은 부드러운 둥근 모서리(5px~8px) 또는 완전히 둥근 알약 형태를 선호합니다.
접근성을 무시하지 마세요 — 인터페이스에는 전용의 종합적인 접근성 옵션 패널이 포함되어 있습니다.
피하기: 지나치게 기술적인 전문 용어
피하기: 공격적이거나 시끄러운 마케팅 언어
피하기: 모호하거나 애매한 표현

팩 안의 실제 스크린샷

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

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

System Prompt

프리미엄 라이프스타일 제품을 위한 세련되고 접근성 높은 이커머스 사이트입니다. 주요 색상은 크리스피 화이트(#FFFFFF), 딥 잉크(#212121), 그리고 기능적 보라색 강조색(#574CD5)입니다. 타이포그래피는 16px 기본 크기에 1.2의 타이트한 행간을 가진 humanist-sans(Neue Haas Unica)입니다. 레이아웃은 넓으며, 4px 기본 그리드와 미묘한 그림자를 사용합니다. 핵심 주의사항: 무거운 drop shadow를 사용하지 마세요, 부조화스러운 색상을 적용하지 마세요, 그리고 레이아웃을 어지럽히지 마세요. 이 시스템은 명확성, 세련됨, 그리고 포괄적 접근을 위해 설계되었습니다.

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

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

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

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