Pa'lais 网站预览
Pa'lais 网站预览

Pa'lais

近白色基底、胶囊形控件与细线分隔。

页面以近白色为基底,搭配近黑色文字。字体采用 Times、hwt-artz。视觉特点包括胶囊形控件、细线分隔、摄影展示、分屏构图。适合参考的场景:摄影作品集、视觉内容展示页。

查看原始网站

使用规范

建议采用

  • 使用 #234386 深靛色作为唯一填充按钮的背景色——它是整个温暖调色盘中唯一的饱和冷色锚点。
  • 所有标签、导航项和 UI 文字均采用 Axiforma 或 ITC Avant Garde 字体,字间距设置为 0.13–0.27em,全大写呈现——这种强烈的字间距是该系统的字体特征。
  • 所有装饰性有机形状均以 SVG 路径形式呈现,使用单一强调色填充(#ffc400、#ed7328、#a2d3a6)——禁止使用 CSS 渐变或单个团块中使用多种颜色。
  • 所有按钮使用 32px 的边框半径,卡片使用 8px——胶囊按钮与软边卡片之间的半径对比是刻意设计,营造出系统的触感。
  • 将纯白色(#ffffff)卡片叠加在奶油色纸张(#fbf9f6)画布上,而非使用灰色表面——温暖的米白底色是系统具备食谱感而非仪表盘感的关键。
  • 将 Deep Indigo 深靛蓝色的全大写粗体窄体展示字(hwt-artz / Bebas Neue 替代字体),与用于情感化副标题的手写字体(Caveat 替代字体)结合;这种双声部标题模式是品牌语言与视觉的标志。
  • 使用植物线条插画(#234386 或 #6aa8dc)搭配 1–1.5px 线条与无填充,作为各板块间的装饰性连接组织。

建议避免

  • 不要引入新的蓝色或靛色调——#234386 是唯一的饱和冷色,任何额外的蓝色都会削弱暖色与冷色之间的张力。
  • 不要将 #ffc400 蜂蜜金 或 #ed7328 焦橙 用作填充按钮背景——这些强调色仅用于有机形状和轮廓线的次级操作。
  • 不要在标题上设置小于 0.03em 的字间距,或在标签上设置超过 0.27em 的字间距——极端字间距已精确调校,过度压缩或拉伸会破坏编辑节奏。
  • 不要使用中性灰(#f5f5f5、#e0e0e0)作为表面分隔——系统通过奶油 → 白色 → 橙色 → 靛色的层次实现分层,而非依赖中性灰。
  • 不要为按钮或导航添加阴影——阴影仅出现在食谱卡片上,且即使在卡片上也仅是不对称且柔和的。
  • 不要将正文文本置于显示字体(hwt-artz、Delivery Note、Sandman)中——这些字体仅用于 32px 及以上标题。
  • 不要将手写体强调字体(Caveat 替代字体)用于 UI 外围元素、标签或按钮——它仅作为情感化标题语调存在,使用频率极低。