Attio
白色基底、紧密字距与细线分隔。
Mockups made easy
近白色基底、大字排版与细线分隔。
页面以近白色为基底，搭配近黑色文字。字体采用 Inter、TWKEverett。视觉特点包括大字排版、细线分隔、摄影展示、扁平表面。适合参考的场景：设计产品官网、作品展示页。
查看原始网站使用规范
建议采用
- 在首屏和区块展示标题中使用TWKEverett，字号77–110px，行高1.0，其紧密的行高是页面的标志性特征
- 仅将#0050b7信号蓝用于主要操作按钮、标志点及激活状态；禁止用于正文、图标或装饰边框
- 所有卡片、按钮、图片及交互表面均设置10px边框圆角，作为统一的角落语言
- 在摄影图像卡片上叠加四段式柔和降噪阴影堆叠，使其从#f4f4f4画布中脱离
- 将Inter正文设置为14–18px，字重400–500——UI的语气是紧凑且实用的，从不追求戏剧性
- 使用#000000用于细线、图标和文字——1px的真正黑色为布局提供结构骨架
- 保持区块间距为80px，以在内容区块间营造编辑式呼吸感
建议避免
- 不要引入额外的强调色——该系统为单色加一蓝；增加第二色调会破坏信号
- 不要在UI元素上使用锐利、高透明度的阴影——仅在摄影内容上保留柔和、低透明度、大半径的阴影
- 不要在展示标题中使用Inter——TWKEverett是唯一允许在40px以上使用的字面；在77px使用Inter会削弱编辑感
- 不要为次要操作使用填充蓝色按钮；透明描边/轮廓（#000000边框）保留蓝色的稀缺性
- 不要添加渐变、光晕或玻璃态效果——该系统为扁平设计，表面单层
- 不要将主要表面的边框圆角降低至10px以下；10px圆角是系统的基准，而非8px或6px
- 不要用颜色来建立信息层级——应依赖字体粗细、大小以及#86868b灰石色阶逐步递减文字，而非色彩变化
