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

Pa'lais

如同浸入蜂蜜的植物素描本。奶油色画布、蓝条纹线条插画和温暖色块的组合,唤起手写食谱日记的氛围,而粗体无衬线字体与充足的留白则赋予其现代编辑的自信气质。

Pa'lais 的视觉效果如同一本手工绘制的 手工艺烹饪书被巧妙地融入了现代美食杂志的排版中。整体基调是温暖的奶油色纸张(#fbf9f6),其上叠加了纯白色的卡片,核心由单一深靛色品牌语调(#234386)主导,所有标题、链接和主要按钮均以此为基调。这种深靛色是整个系统中唯一的饱和冷色;其余色彩均为温暖且可食用的——蜂蜜金(#ffc400)、焦橙(#ed7328)、暖沙色(#d2b68c)、薄荷鼠尾草(#a2d3a6)——这些暖色以有机流动的团块形态和植物线条插画呈现,几乎从不以平面填充形式出现。字体分为两种鲜明的声调:标题部分采用全大写藏青色的粗体紧凑无衬线字体,标签和界面外围元素则使用字间距达 0.27em 的几何无衬线字体(Axiforma / ITC Avant Garde)。搭配手写体脚本用于传递情感化的标语('烹饪的未来——今日')。组件设计轻盈——柔软的 8px 卡片、宽大的 32px 圆角半径的胶囊按钮、细线边框——让插画与摄影承担起叙事功能。

查看原始网站

使用规范

建议采用

  • 使用 #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 外围元素、标签或按钮——它仅作为情感化标题语调存在,使用频率极低。