ATMOS 网站预览
ATMOS 网站预览

ATMOS

浅色基底、胶囊形控件与渐变展示。

页面以浅色为基底,搭配近黑色文字。字体采用 _NewYork、DM Sans。视觉特点包括胶囊形控件、渐变展示、衬线字形、居中构图。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 让紫罗兰渐变占满整个第一个视口,不要裁切或放入受限容器。
  • 任何展示级文字采用_NewYork(或Playfair Display)、50–200px,绝不低于40px。
  • 所有按钮、标签和胶囊形元素圆角设为9999px。
  • 区块之间保持100–250px垂直内边距,紧间距会破坏冥想节奏。
  • 按钮文字保持DM Sans 20px、字重700和1.15行高。
  • Times 10px仅用于细则小字和轨道或注释文字。

建议避免

  • 不要添加导航栏、页眉或页脚,系统中没有这些元素。
  • 不要使用卡片组件、阴影或高度效果,首屏下方的设计平坦且无边框。
  • 不要引入额外彩色,紫罗兰与白黑就是完整色板。
  • 展示字号不要使用DM Sans,它是UI字体而非展示字体,40px以上切换为衬线。
  • 文字不要低于10px或高于200px,字号尺度仅有六级。
  • 交互元素不要使用锐利圆角(0–4px),按钮必须是胶囊。
  • 不要用内容填满页面,寂静与留白是结构元素。