精选 · 开放 · 免费
Monocle
一个专注于全球事务、文化与生活方式的精致编辑平台。
editorialmagazine
01
设计气质 DNA
编辑全球事务生活方式精选高端
一本高端国际杂志的数字化提炼。
02
色彩
#FFC500Accent
#000000Ink
#141414Ink soft
#FFFFFFBG
#F8F8F8BG soft
#6E6E6EMuted
rgba(0,0,0,0.1)Line
高对比度的黑白搭配，辅以单一鲜亮的黄色点缀色，并使用柔和的灰色构建结构。
03
字体
transitional-serif · grotesque-sans
- display
96px · 400 - h1
48px · 700 - h2
24px · 700 - body
16px · 400 - caption
13px · 400
所有全大写的导航和次要章节链接均使用大写字母。 · 严格保持黑色文字与白色背景之间的高对比度。 · 报头需居中突出，使用大号衬线字体。
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
交互元素采用微妙的背景色和变换过渡效果。 · UI状态变化采用线性滑动或淡入淡出过渡。
按钮和链接在悬停时采用微妙的背景色变化或变换位移。 · 伴随光标指针状态变化，提供即时的视觉反馈。
08
组件
- button 亮黄色的按钮，搭配黑色大写文字，形状为药丸形或矩形，圆角较小。
- card 简单的内容区块，由留白和细微的边框线定义，特点是大型图片和加粗的标题。
- chip 主导航中由竖线分隔的简单文字标签。
- input 在主要内容区域不常见，但隐含的表单可能会使用极简的边框和4px圆角。
- hero 全宽区域，包含一个居中的大型报头，或一排带边框的编辑插图。
09
文案语气与禁用清单
- 语气 权威、精致且具有全球视野。
- 标题风格 直接、信息明确，用于类别导航时常采用全大写。
- 按钮文案 加粗、清晰且功能性强，主要操作（如“订阅”）使用高对比度的黄色。
- 不要使用红、蓝、绿等原色——截图显示黄色是唯一的高饱和度强调色。
- 不要到处使用圆角的药丸形按钮——截图显示为矩形或轻微圆角（4px半径）的按钮。
- 不要使用装饰性手写或手写字体——截图显示为结构化的过渡衬线体和简洁的无衬线体。
- 不要将背景设为深色或彩色——截图显示主要内容区域采用纯净的白色背景 (#FFFFFF)。
- 不要隐藏主导航——截图显示了固定的顶层链接，如 MAGAZINE、RADIO、SHOP。
- 不要使用复杂的渐变背景——截图显示为纯白色或简单的透明到白色渐变。
- 避免: 避免使用过于随意的语言或过多的感叹号。
- 避免: 避免在界面上堆砌过多竞争性的视觉元素。
- 避免: 避免使用低对比度的颜色，以免损害可读性。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Monocle是一个专注于全球事务、文化和生活方式的精致编辑平台。它采用纯黑 (#000000) 搭配白色 (#FFFFFF) 的高对比度配色方案，辅以单一鲜亮的黄色 (#FFC500) 作为主要强调色。字体方面，标题和报头主要依赖过渡衬线字体，正文则搭配简洁的无衬线字体。关键设计准则包括：绝不为正文使用低对比度的灰色；始终保持充足的留白以维持高端的编辑质感；严格遵守黑白加黄色的三色配色方案。避免使用过度装饰的字体、杂乱的布局，或任何会分散对精选内容注意力的次要强调色。
en · zh-CN · zh-TW · ja · ko