Mirror

一个简洁、高端的出版平台，连接了Web2的社论美学与Web3的机制。

高对比度的中性色搭配一个充满活力的蓝色强调色，用于指示主要操作。

transitional-serif · geometric-sans · monospace

• display64px · 400
• h160px · 400
• h224px · 500
• body16px · 400
• caption14px · 400

标题使用衬线字体，界面和正文使用无衬线字体。 · 大型展示文字保持紧凑的字间距。 · 确保文字与白色背景之间的高对比度。

布局遵循4px基础网格，使用充足的留白来分隔内容块。

0px 1px 2px rgba(0,0,0,0.05) · 0px 0px 4px rgba(0,0,0,0.02) · 0px 10px 15px -3px rgba(0,0,0,0.1)

阅读采用居中单栏布局，发现探索则使用更宽的卡片网格。

交互元素上平滑的背景和颜色过渡。 · 悬停时卡片和按钮的微妙缩放和变换位移。

交互元素上的微妙颜色变化和阴影深度增加。 · 通过轻微的缩放效果提供即时的视觉反馈。

• button 胶囊形按钮，主要操作使用实心填充，次要操作使用微妙边框。
• card 圆角卡片，带有柔和阴影和全出血图像，用于文章预览。
• chip 小型圆角标签，用于‘加密社交’和‘DAO工具’等标签。
• input 简洁、无边框或极简边框的输入框，与白色背景融为一体。
• hero 一个大型、左对齐的文本主视觉区，通过一个展示阅读体验的浮动设备模型来平衡。

• 语气 精致、极简，专注于长文创意的价值。
• 标题风格 简短、有力、引人深思的标题，使用经典的衬线字体。
• 按钮文案 直接且带有鼓励性，使用‘开始阅读’或‘开始写作’。

• 不要使用通用的无衬线字体作为标题——截图显示的是一款精致的过渡衬线字体。
• 不要使用刺眼的原色作为背景——截图显示的是干净的白色和柔和的灰色调色板。
• 不要使用矩形按钮——截图显示的是完全圆润的胶囊形按钮。
• 不要使用沉重、深色的阴影——截图显示的是非常微妙、分层的box-shadow。
• 不要使用深色模式界面——截图显示的是明亮、以浅色为主的社论式布局。
• 不要使用复杂的多栏导航——截图显示的是简单的、顶部对齐的水平菜单。
• 避免: 过于技术化的术语
• 避免: 激进的营销语言
• 避免: 界面中复杂的句子结构
• 避免: 霓虹或刺眼的颜色组合
• 避免: 元素过多的杂乱布局