精選 · 開放 · 免費

Robertaspizza

為手工披薩品牌設計的大膽、高對比編輯式版面。

Bold TypographyEditorialPhotographicWarm

Robertaspizza 網站截圖

↓ 下載設計系統包 (75 MB)在 OpenDesign 中開啟

原站: https://www.robertaspizza.com

📦 瀏覽包內檔案 →

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 solid 邊框。

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 簡單矩形卡片，帶有 drop shadow。
hero 全視野背景圖片/影片，搭配置中文字與 CTA。

09

文案語氣與禁用清單

語氣大膽、自信，並帶點趣味。
標題風格 全大寫的展示型襯線體，高衝擊力。
按鈕文案 直接、導向行動，並高度可見。

勿使用精緻、細體字 — 截圖顯示為粗重、大膽的展示型襯線體。
勿使用淺色或粉彩背景 — 截圖顯示為深色（#2B3036）或純白背景。
勿避免大寫文字 — 截圖顯示幾乎所有 UI 文字皆為大寫。
勿使用銳角按鈕 — 截圖顯示大圓角（藥丸形或大半徑）。
勿使用細微顏色作為行動呼籲 — 截圖使用主導性、高彩度紅色（#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 — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

一款為手工披薩品牌設計的大膽、高對比編輯式版面。關鍵色彩：純白、深灰（#2B3036）與鮮豔紅色（#ED2023）。排版使用粗重的展示型襯線體（Offset TM）作為標題，無襯線體（Source Sans 3）作為 UI 元素。關鍵禁忌：避免精緻字體、柔和色系或極簡垂直間距。設計採用滿版攝影、大寫文字與寬裕內距，以創造高衝擊力、溫暖且自信的品牌形象。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko