Replay

近白色基底、胶囊形控件与细线分隔。
页面以近白色为基底,搭配近黑色文字。字体采用 Inter。视觉特点包括胶囊形控件、细线分隔、网格布局、单栏阅读排版。适合参考的场景:技术产品首页、开发工具说明页。
查看原始网站使用规范
建议采用
- 每个视口精确使用 #f43f5 作为唯一一个填充型CTA——若在屏幕上出现超过两次,其效果将完全丧失
- 将展示标题拆分为两行,第一行为 #111827,第二行为 #f02d5,色彩对比即为设计核心
- 所有按钮和标签的圆角均设为 9999px——胶囊形是不可妥协的,且统一了所有交互元素
- 在卡片、输入框和分隔线中使用 #e5e7eb 作为 1px 细线边框——绝不使用更粗的边框或背景填充来实现分隔
- 正文文字最大限制为 18px,最大宽度约为 640px——系统信任读者,不会为了自身目的而强行填充水平空间
- 在所有展示和标题字号中,80px 时字间距设为 -2px,40–48px 时设为 -1.2px——紧凑的字间距是使大字号看起来整齐而非松散的关键
- 交替使用白色和 #f3f4f6 作为节区背景,以创造节奏感,而无需线条或厚重分隔线
建议避免
- 不要将珊瑚红(#f43f5 / #f02d5e)用于正文、图标或装饰填充——该色彩仅限用于强调线、激活状态和CTA
- 不要为插图、徽章或节区强调引入新的色彩——系统仅依赖灰黑、白色和一种珊瑚红
- 不要在案例研究/证言卡片上使用小于 12px 的圆角,或在输入框上使用大于 8px 的圆角——圆角具有语义意义
- 不要在标题中使用 300 或 200 字重——Inter 600–700 才是其声音;细体字重会削弱编辑权威性
- 不要将两个填充型CTA并列放置——应搭配一个填充的珊瑚红与一个带描边的透明按钮或文本链接
- 不要为非卡片或浮动面板元素添加阴影——按钮仅获得 1px 的轻声阴影,无更多
- 不要在纯白色画布上将 #f3f4f6 用作卡片背景——它仅适用于作为白色卡片后方的节区柔化,绝不能作为白色背景上的卡片背景