厳選・オープン・無料

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

見出しやボタンには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時のボックスシャドウ遷移。

微細なボックスシャドウの出現と色の遷移。 · 状態変化による即時的な視覚フィードバック。

08

コンポーネント

09

文体と禁止事項

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）、UI要素にサンセリフ（Source Sans 3）を採用。重要な禁止事項：繊細なタイポグラフィ、くすんだカラーパレット、最小限の縦方向の余白を避ける。デザインは、フルブリードのフォトグラフィー、大型の大文字テキスト、ゆったりとしたパディングを用い、インパクトが強く、温かみと自信に満ちたブランドプレゼンスを生み出している。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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