Palette Supply 网站预览
Palette Supply 网站预览

Palette Supply

阳光照耀的画室中的文具展示架

Palette Supply 遵循颜色即产品的理念 — 界面退居幕后,使色样得以发声。温暖的奶油底色(#f2f0e9)如同设计师的工作台,散落着不同尺寸和长宽比的哑光矩形色样,每一种都来自精心挑选的调色盘,呈现出大地色系的质感。界面外围元素被刻意保持低调:文字使用深墨黑(#141212),唯一使用饱和的蓝紫色(#3051a8)仅用于操作和链接,且不添加阴影 —— 每个边界皆为细线边框或色彩边缘。字体为定制且自信:'esbuild' 以 64px 的超大显示标题,字间距极紧,'ppsupply' 则以 100 或 300 的极轻字重处理其余内容,使页面显得通透而从容。整体效果更像一本精心整理的文具目录,而非网页应用 —— 大量留白、触感材质、无渐变、无玻璃态、无装饰性噪音。

查看原始网站

使用规范

建议采用

  • 所有页面背景设为工作室奶油色(#f2f0e9);禁止使用纯白色作为全页背景
  • 在显示标题中使用 esbuild 保持 64px 字号,字间距 -0.03em,行高 0.94 —— 一个词应能主导整个页面
  • 正文使用 ppsupply 100 或 300 字重;交互元素和强调内容保留 400 字重
  • 所有卡片、色样和图片使用 12px 圆角;矩形按钮使用 5px;胶囊形按钮、标签和输入框使用 100px
  • 所有交互元素(按钮、输入框、卡片)均包裹 1px 实线深墨黑(#141212)边框 —— 这是系统唯一的结构线
  • 仅将钴蓝指令(#3051a8)用于主要操作、激活链接和图标强调 —— 严禁用作背景填充或大面积表面
  • 有意识地变化色样矩形的尺寸 —— 高而窄的条带、宽而短的带状、小正方形 —— 以营造画廊节奏,而非统一网格

建议避免

  • 不要添加阴影、模糊或磨砂玻璃效果 —— 设计刻意保持平面,依赖色彩与边框实现分隔
  • 不要使用系统无衬线字体(Arial、Helvetica、SF Pro)用于正文 —— 始终使用 ppsupply;定制字体的轻量级字重定义了通透的氛围
  • 不要使用多个饱和色作为界面元素 —— 色彩饱和度属于色样内容,而非界面组件
  • 不要在全页最大宽度容器中居中内容 —— 允许色样满幅散开;画布即为布局
  • 除非需要层级提升,否则不要在奶油底色上使用白色卡片填充 —— 调色盘卡片默认使用工作室象牙色(#d7d7c8)
  • 不要将显示文本设为全大写;esbuild 的几何字形在小写或句首大写时更佳,以保持字形清晰可辨
  • 不要使用渐变填充,即使是细微的渐变 —— 本系统中每个表面均为单一实色