Peggy

近白色基底、细线分隔与宽松留白。
页面以近白色为基底,搭配近黑色文字。字体采用 Reckless、Inter。视觉特点包括细线分隔、宽松留白、摄影展示、扁平表面。适合参考的场景:品牌电商首页、商品展示页。
查看原始网站使用规范
建议采用
- 在任何显示尺寸的标题(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 的标签类字体;在其他位置使用会破坏排版层级
- 不得引入插图、带有色彩填充的图标或装饰性渐变;笔触曲线是唯一的装饰元素,且不应被复制