큐레이션 · 오픈 · 무료

Makr

절제된 팔레트, 깔끔한 타이포그래피, 대규모 제품 사진이 특징인 프리미엄 가방 및 상품을 위한 세련된 전자상거래 인터페이스입니다.

PremiumProductRefinedCleanEditorial
Makr 스크린샷
↓ 디자인 시스템 다운로드 (52 MB)OpenDesign 에서 열기

원본 사이트: https://makr.com

📦 팩 내용 보기 →

01

디자인 DNA

공예유산실용주의프리미엄 상품

촉각적 소재 품질과 절제된 디자인에 초점을 맞춘 미니멀하고 유산에서 영감을 받은 아틀리에입니다.

02

컬러

#1C1717Ink
#FFFFFFBG
#A9AFA9BG soft
rgba(28,23,23,1.0)Line

어두운 잉크와 밝은 배경 간의 높은 대비, 그리고 프로모션 섹션에 절제된 세이지 그린 악센트를 슬쩍 사용합니다.

03

타이포그래피

grotesque-sans · neo-grotesque-sans · geometric-mono

모든 보조 라벨 및 프로모션 텍스트에 대문자를 사용합니다 · 깔끔하고 균일한 외관을 유지하기 위해 모든 텍스트 요소에 보통 굵기(400)를 유지합니다 · 가독성을 위해 제목에는 라인 높이를 타이트하게, 본문에는 여유 있게 유지합니다

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

일관된 간격을 제공하는 엄격한 4px 기반 시스템이며, 더 큰 배수는 주요 콘텐츠 블록과 여백을 정의하는 데 사용됩니다.

05

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

sm · 2px
md · 4px
lg · 8px
pill · 999px

입력 필드 및 구분선을 위한 1px solid #1C1717

rgb(128, 128, 128) 0px 0px 5px 0px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

시선을 안내하기 위해 대규모 풀폭 이미지 블록과 여유로운 여백에 의존하는 깔끔한 수직 스크롤 레이아웃입니다.

07

모션과 인터랙션

100msmicro
150mssmall
200msmedium
cubic-bezier(0.55, 0.06, 0.68, 0.19)easing

인터랙티브 상태를 위한 빠른 색상 전환 · 보조 UI 요소를 위한 섬세한 불투명도 페이드

텍스트 링크 및 인터랙티브 요소에 대한 섬세한 색상 전환 · 전환 외에 눈에 보이는 상태 변화 없이 즉각적인 응답

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Makr — 桌面首屏（hero）
桌面首屏（hero）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 移动首屏
移动首屏

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

11

System Prompt

Makr.com은 가방 및 상품을 위한 프리미엄 전자상거래 사이트입니다. 네오그로테스크 산세리프 본문 폰트(Sohne)와 좀 더 기하학적인 디스플레이 폰트(Akzidenz Grotesk)를 사용하는 세련된 미니멀 미학을 구사합니다. 팔레트는 #FFFFFF, #1C1717, 그리고 무채색 세이지 그린(#A9AFA9)으로 구성된 엄격히 중립적입니다. 레이아웃은 여유롭며, 대규모 사진과 충분한 여백에 의존합니다. 주요 주의사항: 고채도 색상, 장식용 폰트, 두꺼운 테두리나 드롭 섀도우 같은 무거운 UI 요소를 피합니다. 전반적인 분위기는 고요한 럭셔리와 실용적 공예입니다.

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

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

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

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