Monocle

一本高端国际杂志的数字化提炼。

高对比度的黑白搭配，辅以单一鲜亮的黄色点缀色，并使用柔和的灰色构建结构。

transitional-serif · grotesque-sans

• display96px · 400
• h148px · 700
• h224px · 700
• body16px · 400
• caption13px · 400

所有全大写的导航和次要章节链接均使用大写字母。 · 严格保持黑色文字与白色背景之间的高对比度。 · 报头需居中突出，使用大号衬线字体。

遵循统一的4px网格，并配以充足的留白，以确保编辑内容的清晰度。

使用1px的细黑色或灰色边框进行结构分隔，也用于按钮。

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

采用结构化的12栏网格系统，顶部设有固定的居中导航栏。

交互元素采用微妙的背景色和变换过渡效果。 · UI状态变化采用线性滑动或淡入淡出过渡。

按钮和链接在悬停时采用微妙的背景色变化或变换位移。 · 伴随光标指针状态变化，提供即时的视觉反馈。

• button 亮黄色的按钮，搭配黑色大写文字，形状为药丸形或矩形，圆角较小。
• card 简单的内容区块，由留白和细微的边框线定义，特点是大型图片和加粗的标题。
• chip 主导航中由竖线分隔的简单文字标签。
• input 在主要内容区域不常见，但隐含的表单可能会使用极简的边框和4px圆角。
• hero 全宽区域，包含一个居中的大型报头，或一排带边框的编辑插图。

• 语气 权威、精致且具有全球视野。
• 标题风格 直接、信息明确，用于类别导航时常采用全大写。
• 按钮文案 加粗、清晰且功能性强，主要操作（如“订阅”）使用高对比度的黄色。

• 不要使用红、蓝、绿等原色——截图显示黄色是唯一的高饱和度强调色。
• 不要到处使用圆角的药丸形按钮——截图显示为矩形或轻微圆角（4px半径）的按钮。
• 不要使用装饰性手写或手写字体——截图显示为结构化的过渡衬线体和简洁的无衬线体。
• 不要将背景设为深色或彩色——截图显示主要内容区域采用纯净的白色背景 (#FFFFFF)。
• 不要隐藏主导航——截图显示了固定的顶层链接，如 MAGAZINE、RADIO、SHOP。
• 不要使用复杂的渐变背景——截图显示为纯白色或简单的透明到白色渐变。
• 避免: 避免使用过于随意的语言或过多的感叹号。
• 避免: 避免在界面上堆砌过多竞争性的视觉元素。
• 避免: 避免使用低对比度的颜色，以免损害可读性。

历史提取与模型分析 · 尚未逐项校验