Perplexity AI

近白色基底、衬线字形与宽松留白。
页面以近白色为基底,搭配近黑色文字。字体采用 pplxSans、pplxSansMono。视觉特点包括衬线字形、宽松留白、居中构图、胶囊形控件。适合参考的场景:AI 工具官网、产品能力介绍页。
查看原始网站使用规范
建议采用
- 使用40px borderRadius专用于导航胶囊和主要行动号召——全胶囊按钮与其余地方的4-12px形成即时的视觉层级
- 将展示标题设为300字重(pplxSans 96px 或 pplxSerif 72-96px)——轻声量的处理方式通过克制而非喧嚣建立权威
- 将白色(#ffffff)卡片叠加在羊皮纸(#faf8f5)画布上——绝不将白色直接置于白色,或奶油色直接置于奶油色。2-3%的亮度差异营造出微妙的深度,而无需阴影
- 所有pplxSans文本应用-0.028em字间距——此定制字间距是字体身份的一部分,而非可选的风格点缀
- 所有与代码相邻的元素(/查询标记、任务ID、状态标签)使用10-14px的pplxSansMono——等宽字体在AI代理场景中传递技术可信度
- 主要区块之间保持28-40px的垂直节奏——充足的空白空间让内容如植物密度中的空地般呼吸
- 所有场景下将#271a00(陈旧秋棕)作为主要文本——接近棕色的温暖是品牌的色彩标识,不可与真正的黑色互换
建议避免
- 绝不使用投影或框阴影——深度来自色彩分层(#ffffff → #faf8f5 → #d1cfc7)和图像的模糊滤镜,而非立体阴影
- 绝不将正文文本设置在15px以下——主要内容的舒适行高:1.5模式需要足够的字体大小以维持可读性
- 绝不将40px borderRadius用于卡片或内容容器——全胶囊圆角仅保留于导航和行动号召。卡片保持12px,输入框/标签保持4px
- 绝不引入饱和度超过#0f3639(青色强调)的辅助色——温暖的秋棕调本意为低调。鲜艳的蓝色/绿色/红色会破坏植物氛围
- 绝不使用真正的黑色(#000000)作为主要文本——将绝对黑色保留用于页脚背景和终端页面锚点。主要文本使用#271a00或#121516
- 绝不将pplxSerif设置在24px以下——衬线字体用于声明类展示标题。正文和UI元素使用pplxSans
- 绝不叠加多个透明层而无足够对比度——磨砂玻璃按钮(rgba(255,255,255,0.6))可叠加在模糊图像上,但不可叠加在其他透明表面之上