OpenServ 网站预览
OpenServ 网站预览

OpenServ

明亮的磨砂玻璃设计

OpenServ 以明亮、近乎画廊般的视觉风格呈现:纯白色画布,带有细线边框的表面卡片,以及两种高对比度的字体声音——用于界面的几何无衬线字体和用于标题及板块展示的轻盈过渡衬线字体。色彩被严格控制:单一鲜明的紫色(#5f79ff)承载所有交互时刻,而饱和的薄荷绿(#01fe93)仅在成功、高亮时刻或板块边界处出现一道细长渐变条纹。界面刻意不加修饰——内容区域无投影,无装饰性渐变,也无表情符号级别的插画。表面元素采用16px圆角,操作按钮采用100px圆角,使整体产品呈现出柔和、乐观的氛围,却避免陷入所有元素都圆润的SaaS模板风格。

查看原始网站

使用规范

建议采用

  • 使用 #5f79ff 的实心圆点,每个圆点半径为 100px,用于所有主要操作 —— 永远不要使用矩形的号召性用语。
  • 有意识地搭配两种字体:在编辑性内容场景(首屏、板块开启、大引语)中使用OS Chronik 300,用于功能性内容则使用OS Studio Grotesk 400。
  • 卡片保持平面,仅使用1px细线边框,颜色为#a6a6a6或#f5f5f5——内容表面禁止使用投影。
  • 在72px显示字号时使用-0.020em字间距,在20–24px UI字号时使用-0.017em字间距;由负值字间距完成收紧效果。
  • 首屏标题在纯白色背景上居中显示,无任何装饰——OS Chronik 300字重是视觉焦点。
  • 所有卡片、图片和导航容器均使用16px圆角,100px胶囊形按钮仅用于按钮和徽章。
  • 仅在板块结尾处使用薄荷绿-紫色-黑色的条纹作为收尾装饰,禁止作为行内装饰使用。

建议避免

  • 卡片、按钮和图片均不使用投影——投影仅用于浮动导航。
  • 衬线字体的字重不应超过300——更重的字重会破坏轻声细语的编辑风格。
  • 禁止引入额外的强调色——系统为单色系,仅包含两个色彩元素。
  • 禁止使用4–8px圆角的矩形按钮;胶囊形是系统设计承诺。
  • 禁止在表面元素上使用渐变;唯一与渐变相关的元素是三色板块条纹。
  • 正文文本字号不得低于13px或高于18px——15px正文 / 13px小号 / 18px副标题的范围是可读区间。
  • 禁止将#01fe93用作CTA填充色——薄荷绿是状态/强调角色,而非操作色。