OpenDesign·你的设计资产库

网页参考

Robertaspizza

为手工披萨品牌打造的大胆、高对比度编辑式布局。

Bold TypographyEditorialPhotographicWarm
Robertaspizza 网站截图

01

设计气质 DNA

手工感大胆质朴趣味

布鲁克林披萨盒包装纸

02

色彩

#ED2023Accent
#FFFFFFInk
#2B3036BG
rgba(43, 47, 54, 1.0)Line

以充满活力的红色为主导，与深色及白色背景形成高对比度。

03

字体

display-serif · grotesque-sans

  • display80px · 400
  • headline34px · 400
  • body22px · 400
  • small14px · 400

所有标题与按钮使用 Offset TM 字体。 · 若可用，正文使用 Source Sans 3 字体。 · 确保白色文字与深色/红色背景之间具有强对比度。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px
128px

主要章节采用充裕的垂直内边距（96px，128px）。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 10px
pill · 16000px

按钮与活动元素使用 2px 实线边框。

0px 4px 4px 0px rgba(0, 0, 0, 0.25)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽摄影主视觉区，下方为堆叠的内容块。

07

动效与交互

100msmicro
250mssmall
300msmedium
600mslong
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

背景色与文字颜色采用平滑的淡入过渡。 · Hover 时应用 box-shadow 过渡。

微妙的 box-shadow 显现与色彩过渡。 · 通过状态变化提供即时视觉反馈。

08

组件

  • button 大尺寸、全大写、圆角矩形，采用纯色填充（红色、白色、深灰色）。
  • card 带投影的简洁矩形卡片。
  • hero 全视口背景图片/视频，居中放置文字与 CTA。

09

文案语气与禁用清单

  • 语气 大胆、自信且略带趣味。
  • 标题风格 全大写展示型衬线体，极具冲击力。
  • 按钮文案 直接、行动导向且高度醒目。
  • 勿使用纤细、轻盈的字体——截图显示为粗重的展示型衬线体。
  • 勿使用浅色或柔和背景——截图显示为深色（#2B3036）或纯白背景。
  • 避免不使用大写文字——截图显示几乎所有界面文字均为大写。
  • 勿为按钮使用直角——截图显示采用大圆角（药丸形或大弧度）。
  • 勿为行动号召使用微妙颜色——截图使用主导的、高饱和度红色（#ED2023）。
  • 勿使用极少的内边距——截图显示充裕的垂直间距（128px）。
  • 避免: 微妙渐变
  • 避免: 柔和调色板
  • 避免: 纤细精巧的字体

10

包内真实截图

Robertaspizza — 桌面首屏（hero）
桌面首屏（hero）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Robertaspizza — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

为手工披萨品牌打造的大胆、高对比度编辑式设计。关键色彩：纯白、深灰（#2B3036）与鲜明红（#ED2023）。排版特点：标题采用粗重的展示型衬线体（Offset TM），界面元素使用无衬线体（Source Sans 3）。关键禁忌：避免使用纤细字体、柔和调色板或最小的垂直间距。设计采用全出血摄影、大尺寸全大写文字与充裕内边距，营造出高冲击力、温暖且自信的品牌形象。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。