Electronicmaterialsoffice

高端机械键盘的旗舰产品发布页面

以单一鲜亮橙色作为行动号召点缀的高对比度深色主题。

didone-serif · humanist-sans

• display56px · 400
• body16px · 400

标题采用高对比度迪多尼衬线体。 · 正文使用清晰易读的人文主义无衬线体。 · 按钮文字采用无衬线体，首字母大写。

充裕的垂直间距强调高端质感，并为内容提供呼吸空间。

1px solid rgba(255,255,255,0.1)

0 4px 20px rgba(0,0,0,0.5)

全屏主视觉区域包含视频容器，其后是大号字体排版与两栏式产品图片网格。

淡入效果 · 按钮的微妙悬停过渡

按钮可能具有微妙的色彩变化或透明度变化。 · 按钮点击时提供明确的视觉反馈。

• button 药丸形按钮，采用纯色背景搭配高对比度文字，或次要操作使用白底深色文字。
• card 以图片为主的产品卡片，边框极简。
• chip 未使用
• input 未使用
• hero 大型深色容器，内置视频播放器及醒目的“播放影片”按钮。

• 语气 精致、高端且直接。
• 标题风格 衬线体，首字母大写，使用破折号增强戏剧效果。
• 按钮文案 清晰、行动导向，置于醒目的按钮内。

• 避免使用浅色背景——截图显示为深色近乎黑色的主题。
• 避免使用圆润、俏皮的形状——截图显示为棱角分明、严肃的风格。
• 避免使用多种亮色——截图显示为单色调配色加单一橙色点缀。
• 避免为标题使用无衬线体——截图显示为醒目的迪多尼衬线体。
• 避免使用复杂图案或纹理——截图显示为平整干净的表面。
• 避免使用低对比度文字——截图显示为黑底白字的高对比度设计。
• 避免: 过于随意的表达
• 避免: 鲜艳或冲突的色彩
• 避免: 密集的文字区块