Peggy 网站预览
Peggy 网站预览

Peggy

冬日清晨的单色艺术画廊——墙面作品是唯一的色彩来源

Peggy 以一种精心策划的白立方美术馆形式呈现于网络:一个完全单色的界面,将色彩视为作品本身提供的元素,而非界面组件。页面以 Reckless 为锚点,采用现代衬线字体,用于显示文本时使用轻量级(300),用于中等层级标题时使用常规重量(400)——这一单一的排版决策使 Peggy 与充斥几何无衬线字体的市场画廊区分开来。Inter 负责所有 UI 组件,字号为 12–16px,Monument Grotesk 用于微大写标签标注页脚的分类架构。表面为扁平且几乎不可见:#f4f4f4 背景画布,#ffffff 卡片,细线 #f4f4f4 边框,唯一深色表面(#141414)专用于应用下载通知条和主要行动号召(CTA)。系统中没有品牌色、没有渐变、没有装饰性立体效果——其氛围通过充足的负空间、方正性(仅在胶囊形摄影中保留圆角)以及对真实艺术与真实字体的信任得以建立。

查看原始网站

使用规范

建议采用

  • 在任何显示尺寸的标题(48px 及以上)中使用 Reckless 300 重量;轻盈的切口是品牌的排版标志——使用 600 以上重量会破坏编辑基调
  • 将 CTA 背景设为 #141414,文字为 #ffffff,边框半径 0px,使用 Inter 14px 500 重量;这是系统中唯一的填充按钮样式
  • 所有艺术作品和生活场景摄影均需以 9999px 的 border-radius 圆角进行遮罩——胶囊轮廓是 Peggy 表达‘这是艺术’的方式,无需色彩或边框
  • 使用 #f4f4f4 作为页面背景和 1px 细线边框;画布颜色同时承担分隔作用,使整体配色仅限六种颜色
  • 保留 Inter 用于 20px 以下内容;20px 及以上使用 Reckless;Monument Grotesk 仅用于页脚分类标签,字号固定为 12px
  • 维持单色约束——不得引入任何色彩品牌色、渐变或彩色状态胶囊;信任作品本身提供色彩
  • 在主要区块之间保持 128px 的垂直留白;页面通过空间感而非装饰获得画廊氛围

建议避免

  • 卡片、按钮或输入框不得添加圆角(4px、8px、12px)——系统刻意保持锐利边缘,仅在胶囊形摄影中保留圆角
  • 不得使用彩色徽章、标签或状态胶囊(无绿色表示成功,无红色表示错误)——配色仅为灰阶;通过文字或图标形状传达状态
  • 不得在显示尺寸文本中使用 Reckless 400 重量;衬线字体失去其轻盈质感,在 60px 大小时读作普通文本
  • 不得为卡片添加阴影、彩色高光或彩色边框——立体感通过表面色彩对比(#f4f4f4 画布 vs #ffffff 卡片)表达,绝非通过阴影
  • CTA 仅允许出现在顶部导航内或作为区块的主要行动;所有次要操作由透明描边链接处理
  • 不得使用 Monument Grotesk 用于正文或标题——它仅是 12px 的标签类字体;在其他位置使用会破坏排版层级
  • 不得引入插图、带有色彩填充的图标或装饰性渐变;笔触曲线是唯一的装饰元素,且不应被复制