Partiful

白色基底、大幅摄影展示与渐变展示。
页面以白色为基底,搭配近黑色文字。字体采用 Partiful Display Medium、TWK Lausanne Pan。视觉特点包括大幅摄影展示、渐变展示、分屏构图、网格布局。适合参考的场景:SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 所有主要行动按钮(CTA)均使用#000000填充、#ffffff文字、8px圆角——绝不以彩色强调替代此设定。
- 所有24px及以上标题使用-0.04em字间距搭配TWK Lausanne Pan;14-18px正文文本则降为-0.02em字间距。
- 为圆形标签、出席状态标签和标签选择器使用960px圆角——这些元素绝不会使用小圆角。
- 在特征板块外层包裹靛蓝到白色的渐变(rgba(150,196,255,0.1) → #ffffff),以形成视觉节奏,交替于纯白色板块之间。
- 在展示区域以±10-15°旋转角度散落邀请卡拼图——倾斜堆叠的卡片传达了创意多样性与实体派对的活力。
- 将Partiful Display Medium专用于首屏标题和最大板块显示标题;其余所有标题使用TWK Lausanne Pan 700。
- 仅在出席语义状态(确定/可能/不能去)中使用#31c431、#ffae00和红色——其他UI区域绝不可将这些颜色用作装饰或品牌色。
建议避免
- 绝不使用紫色、蓝色、粉色等彩色作为主要按钮填充——整个行动层级仅基于黑与白运行。
- 不要在首屏或满幅区域应用阴影——仅在卡片和浮动组件上使用,绝不应用于全宽表面。
- 不要在小于26px时使用Partiful Display Medium——在小尺寸下会丧失其识别性;应改用TWK Lausanne Pan 700。
- 绝不将#d9c58b(Warm Sand)用于除激活导航链接状态之外的任何场景——它仅作为选中状态指示,而非通用强调色。
- 不要在特征板块中居中对齐正文段落——正文文本即使在板块布局居中时也保持左对齐。
- 单个卡片组件中不要使用超过2种字号——层级结构为标题+正文,而非3种以上字号的堆叠。
- 绝不将粉到紫渐变应用于交互UI组件(按钮、输入框、徽章)——该渐变仅用于背景或表面处理。