Portal 网站预览
Portal 网站预览

Portal

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

页面以近白色为基底,搭配近黑色文字。字体采用 Perfectly Nineties Regular、Inter。视觉特点包括胶囊形控件、渐变展示、扁平表面、衬线字形。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 所有展示标题采用Perfectly Nineties Regular、36-48px、1.0行高和400字重;这款衬线字体是系统标志性语气,不能通过在更小字号使用而稀释。
  • #007aff仅用于功能强调,包括主要CTA填充、激活状态、品牌图标高亮和行内链接,绝不用于装饰背景或大面积表面填充。
  • 每个按钮都必须为50px圆角的完整胶囊,没有例外;垂直内边距12-14px,水平内边距20-24px。
  • 正文保持Inter、14-16px、1.30-1.35行高和-0.02em字间距,以呈现精致的iOS原生感。
  • 所有卡片和图片圆角为22-30px,宽裕圆角赋予系统柔和高端气质。
  • 页面画布默认#f7f7f7,卡片置于#ffffff上;5px #f7f7f7辉光环是主要高度技巧,取代投影。
  • #000000仅用于标题和主要边框;正文切换为#3e3e3,弱化辅助文字和次要元信息为#636363。

建议避免

  • 不要引入第二种彩色强调,系统为单色调严格加唯一蓝色(#007aff)。
  • Perfectly Nineties不要用于正文、说明文字、按钮或UI标签,它只用于36px及以上展示。
  • 不要应用比5px #f7f7f7辉光环或1px #000000轮廓更重的投影,浓重阴影会破坏平坦编辑感。
  • 任何交互元素或卡片都不要使用锐利角落(0-4px圆角);最小7px,卡片优先16px+,按钮50px。
  • Inter正文不要低于14px,也不要超过600字重,字重范围是系统保持克制的机制。
  • 不要将#000000文字直接放在彩色或渐变背景上,文字必须只位于白色或#f7f7f7表面。
  • #007aff不要用于大面积填充、首屏背景或装饰形状,它是功能强调,而非表面颜色。