큐레이션 · 오픈 · 무료

Monocle

글로벌 이슈, 문화, 라이프스타일을 다루는 세련된 에디토리얼 플랫폼.

editorialmagazine
Monocle 스크린샷
↓ 디자인 시스템 다운로드 (23 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

01

디자인 DNA

에디토리얼글로벌 이슈라이프스타일큐레이션프리미엄

하이엔드 국제 매거진을 디지털 형식으로 정제한 것.

02

컬러

#FFC500Accent
#000000Ink
#141414Ink soft
#FFFFFFBG
#F8F8F8BG soft
#6E6E6EMuted
rgba(0,0,0,0.1)Line

단 하나의 선명한 노란색 강조색과 구조를 위한 무채색의 회색 톤을 더한 고대비 흑백 구성.

03

타이포그래피

transitional-serif · grotesque-sans

전체 대문자 내비게이션과 보조 섹션 링크에는 대문자를 사용합니다. · 검은색 텍스트와 흰색 배경 간의 높은 대비를 반드시 유지합니다. · 대형 세리프 서체를 사용하여 마스트헤드를 중앙에 두드러지게 배치합니다.

04

여백

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

에디토리얼의 선명함을 위해 넉넉한 여백을 둔 일관된 4px 그리드.

05

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

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

구조적 구분과 버튼을 위해 사용되는 1px의 얇은 검정색 또는 회색 테두리.

0px 0px 0px 1px #D9D9D9 · 0px 30px 70px 0px rgba(0,0,0,0.3)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

고정되고 중앙에 정렬된 상단 내비게이션 바를 중심으로 한 12컬럼 그리드 구조.

07

모션과 인터랙션

220msmicro
250mssmall
400msmedium
ease-ineasing

인터랙티브 요소에 대한 미세한 배경색 및 transform 전환. · UI 상태 변경 시 선형 슬라이드 또는 페이드 전환.

버튼과 링크에 대한 미세한 배경색 변화 또는 transform 이동. · 커서 포인터 상태를 통한 즉각적인 시각적 반응.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

Monocle은 글로벌 이슈, 문화, 라이프스타일에 초점을 맞춘 세련된 에디토리얼 플랫폼입니다. 흰색(#FFFFFF) 배경에 순수 검정(#000000)을 사용한 고대비 팔레트를 기반으로 하며, 주요 강조색으로 단 하나의 선명한 노란색(#FFC500)을 사용합니다. 타이포그래피는 헤더와 마스트헤드에 전환 세리프 서체를 크게 의존하며, 본문에는 깔끔한 고트릭-산세리프를 페어링합니다. 핵심 디자인 규칙은 다음과 같습니다: 주요 텍스트에 저대비 회색을 절대 사용하지 말 것, 프리미엄 에디토리얼 느낌을 유지하기 위해 항상 넉넉한 여백을 유지할 것, 그리고 두 가지 색상에 노란색을 더한 팔레트를 엄격히 준수할 것. 지나치게 장식적인 서체, 복잡한 레이아웃, 또는 큐레이션된 콘텐츠에서 주의를 분산시킬 수 있는 보조 강조색을 사용하지 않습니다.

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

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

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

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