10X HUB 网站预览
10X HUB 网站预览

10X HUB

白色基底、胶囊形控件与网格布局。

页面以白色为基底,搭配近黑色文字。字体采用 Arial、10X Display (custom — madefor-text variant)。视觉特点包括胶囊形控件、网格布局、满幅色块。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • 所有交互元素(按钮、切换开关、标签、徽章)的圆角半径统一设为999px。锐利的边角仅出现在表单输入项底部边框和结构线中。
  • 首屏与展示标题采用定制显示字体,字号范围187–298px,字重400,行高1.0,字间距-0.064em。禁止使用粗体或进一步压缩。
  • 满幅板块背景在 #000000 与 #ff1841 之间交替。白色(#ffffff)仅作为临时表面,用于表单区域和正文内容。
  • 将 #ff1841 作为唯一色彩。所有红色元素——按钮、切换开关、板块背景——均源自同一枚 Ember Red 色值。
  • 正文与副标题使用 Helvetica 字体,字号13–45px,字重仅限400。通过字号跳跃建立层级,而非通过字重变化。
  • 所有UI控件保持平面——无阴影、无渐变、无玻璃态。深度来自色彩场的过渡(黑 → 红 → 白),而非表面抬升。
  • 微标签和带空格的副标题使用 #949494,以退居于主信息之后,同时保持可读性。

建议避免

  • 不可引入第二套强调色。该系统为二元结构:无彩色结构中仅存在一次红色突变。
  • 不可在任何位置使用字重600及以上。整个系统运行于字重400;粗体破坏了排版纪律。
  • 不可为卡片或按钮添加阴影或抬升。平面性是设计语言——#ff1841 在 #000000 上的对比是唯一的深度机制。
  • 不可为按钮或交互元素设置2px至12px之间的圆角半径。该系统从0(输入下划线)跳转至12px(卡片)再到999px(胶囊形控件)。
  • 不可将展示字体用于小于100px的字号。定制展示字体专为海报级渲染设计,用于正文尺寸将破坏其表现力。
  • 不可在红色板块使用#000000作为背景,或在黑色板块使用#ff1841作为背景。红与黑必须直接过渡,不可通过深红中间态连接。
  • 不可添加摄影、插画或装饰性图形。该系统为纯文字与平面色彩——任何图像都会稀释海报般的清晰度。