Apollo 网站预览
Apollo 网站预览

Apollo

暖白色基底、胶囊形控件与细线分隔。

页面以暖白色为基底,搭配深橙色文字。字体采用 MonaSans、paradigm-pro。视觉特点包括胶囊形控件、细线分隔、衬线字形、分屏构图。适合参考的场景:专题展示页、项目介绍页。

查看原始网站

使用规范

建议采用

  • 每个交互元素、卡片和图片都使用3px圆角,这是必须遵守的规则,定义了印刷出版物的感觉。
  • 所有极细边框、分隔线和卡片边缘采用Ash Mist(#dddedf);它是网站最常用的颜色,构建每个布局。
  • 所有正文与结构深色需求采用Espresso Bark(#3c261c),#000000仅用于图片填充。
  • Terracotta Ember(#e97451)仅用于主要操作边框、导航激活状态和字母组合标志,绝不作为大面积表面填充。
  • 所有展示和首屏标题采用paradigm-pro、字重300;轻如低语的衬线字体是网站最鲜明的排版标志。
  • 所有区块标题、导航链接和眉题标签采用大写与0.07-0.1em字间距;这种字间距让设计像编辑出版物而非网页。
  • 保持68px垂直区块间隔及45px卡片或区块内边距,形成疏朗、有呼吸空间的节奏。

建议避免

  • 圆角不要大于3px;任何地方都不使用胶囊按钮、圆润卡片或柔软角落。
  • 不要将#ffffff用作背景,始终采用Warm Linen(#f9f8f0),以保持奶油色画布的温暖。
  • 不要使用投影或box-shadow高度效果,分隔仅来自极细边框和表面明暗变化。
  • Terracotta Ember不要作为大面积填充,它是强调色,只限量用于边框、激活状态和标志。
  • 正文或导航不要使用Iris Ink(#4a43dd),它仅用于装饰展示标题和字母组合标志描边。
  • paradigm-pro展示衬线字体的字重不要超过300,轻如低语的字重就是核心。
  • 单一视图不要混用多种强调色,陶土色独自发声;在同一组件中增加鸢尾紫或蜂蜜色会产生噪声。