Tines 网站预览
Tines 网站预览

Tines

如同玻璃下的薰衣草色天文台:柔和暖白、深紫罗兰边缘,以及带粉彩色调的标本卡片。

Tines是一座浸满紫罗兰色的天文台:柔和暖白画布(#fcf9f5)上叠着深鸢尾紫(#4d3e78),它像羊皮纸上的墨迹一样覆盖边框、文字和图标。Reckless衬线标题采用低语般的300轻字重与紧密负字间距,Roobert无衬线则以接近相同的字重承载全部UI。系统以手绘趣味取代常规平面SaaS附属元素,云朵、纸飞机和嫩芽插画作为装饰氛围悬浮在各分区。卡片是标志性元素,粉彩背景配粉、橘、绿或青绿的鲜亮饱和2px边框,营造“实验室笔记本”感,让每个故事都成为带标签的独立标本。按钮安静而自信,首屏CTA为透明描边轮廓,预约操作为深紫罗兰填充胶囊,全系统没有投影抬升。

查看原始网站

使用规范

建议采用

  • 所有卡片、按钮和主要容器都采用14px border-radius;这是定义系统的形状,必须一致应用。
  • 客户评价和统计卡片采用Orchid Pink、Tangerine、Cobalt和Forest Fern等鲜亮2px彩色边框,并配匹配的粉彩表面色调,形成标本卡片的标志性特征。
  • Reckless标题设为300字重和负letter-spacing,72px时为-2.16px;低语般轻衬线是反常规选择,使品牌具有编辑感而非企业感。
  • Iris Glow #745fbb是唯一的填充按钮色,次级操作配#4d3e78透明描边按钮,采用1:1布局。
  • 页面画布保持暖白#fcf9f5;整页背景绝不用纯白#ffffff,白色只留给卡片和产品框架。
  • 全大写Roobert标签和眉题采用正letter-spacing(0.050–0.100em),形成仪器标签的质感。
  • 每张卡片都使用完整色彩词汇,每张标本卡片选择粉、橘、蓝、绿或青绿中的一个强调色家族,并同时采用该家族的表面浅色调和边框。

建议避免

  • 不要用投影表现抬升;系统依靠边框、表面色调和颜色对比,任何box-shadow都会破坏平面标本卡片美学。
  • Reckless标题不要采用600+字重;系统依赖轻衬线展示文字与中等字重无衬线正文之间的对比。
  • 不要引入#6b7280、#9ca3af等纯灰中性色;系统所有中性色都带暖调或紫罗兰底色,存在于Parchment/Lavender Veil色谱中。
  • 文字不要采用纯黑#000000;即使正文,主导文字色也为Deep Iris #4d3e78。
  • UI元素不要置于纯白满幅背景上;页面应坐在温暖Parchment #fcf9f5上,白色只留给抬升卡片。
  • 不要使用超过两种字体家族;Reckless只用于标题,Roobert用于其余全部内容,混入额外衬线或无衬线会使编辑式系统感分裂。
  • 鲜亮强调色不要用于大面积填充区域;它们只作为2px边框和小型装饰点缀,绝不作为完整卡片背景或首屏色洗。