Chat for impact 网站预览
Chat for impact 网站预览

Chat for impact

如同带粉彩房间的森林绿诊所。

Turn.io采用温暖、对医疗保健抱有乐观态度的视觉系统:深森林绿是主导品牌表面和首屏画布,薄荷、薰衣草、桃、奶油和天空等柔和粉彩色洗,像诊所里的彩色房间一样建立分区节奏。唯一鲜亮珊瑚CTA(#ff643b)是仅有的高饱和操作色,置于近乎单色区域上,使每个“Book a Call”都像明显的下一步。全部排版使用DM Sans,放大到69–116px的巨大展示字号,配紧密负字间距,让首屏也具有对话般的柔和,而非企业式厚重。组件平面且无边框,系统通过色块和16–24px圆角卡片沟通,而非阴影或界面附属元素。粉彩功能卡片和薰衣草页面画布赋予整站手绘、近乎编辑式的暖意,绿色首屏和紫色工具包横带则以全饱和呈现品牌两个锚点色。

查看原始网站

使用规范

建议采用

  • 从12px说明到116px展示文字,每个字号都使用DM Sans;单字体家族是标志性特征,不引入第二种字体。
  • 展示字号≥52px时采用-0.028em letter-spacing,32–48px时为-0.019em;正文及更小文字采用normal字间距。
  • 每个DM Sans实例都启用font-feature-settings: 'ss03'。
  • 功能卡片背景轮换粉彩#d2f2e3、#e4f7ee、#ccf0f8、#faf7e8、#fdf0ff和#ffede8,绝不要采用普通白色或灰色。
  • #ff643b Coral Pulse只用于主要填充CTA;每个珊瑚按钮旁都配一个透明描边按钮。
  • 所有按钮border-radius为40px,功能卡片24px,产品和通知卡片16px,小标签9999px。
  • 首屏和分区开场的标题大胆使用69–116px;大型展示系统让品牌具有编辑感而非企业感。

建议避免

  • 不要用box-shadow表现抬升;系统依靠颜色对比与粉彩表面变化,阴影会破坏平面编辑式感受。
  • 标题或正文不要引入第二种字体,DM Sans是唯一语气。
  • #ff643b只用于主要操作按钮,不用于其他任何内容,也不作为装饰强调。
  • 深绿色或薰衣草背景上不要使用#000000填充;它会形成生硬的死黑区域,改用白色或粉彩。
  • 功能卡片或按钮不要采用border-radius 0–2px的锐利圆角;系统由柔和16–40px圆角定义。
  • 每个分区不要使用超过一种鲜亮强调;珊瑚CTA与Leaf Bright或Indigo Bloom不应同时出现在同一视口。
  • 正文字号不要低于14px,也不要采用灰上灰对比;浅色表面上应为强黑#000000或近黑#3d3d3d。