厳選・オープン・無料
Graza
遊び心のあるパッケージと、独自のアースカラーのビジュアルアイデンティティで再構築されたプレミアムオリーブオイル。
brandfood
01
デザイン DNA
オリーブオイル絞り出し式キッチンプレミアム遊び心
遊び心と触感に優れた、ハイエンドなアーティザナルフードブランド。
02
カラー
#D1E030Accent
#3C422EInk
#F6E6D9BG
#4E5340Muted
rgba(60, 66, 46, 1)Line
ダークオリーブグリーンと柔らかなピーチ色を基調とした、アースカラーで温かみのあるベースパレット。鮮やかなシャルトルーズのアクセントで彩りを添えます。
03
タイポグラフィ
transitional-serif · typewriter
- display
72px · 500 - body
16px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
垂直方向の間隔は、大きな画像や太字のタイポグラフィを活かすため、通常35pxや68pxなど、十分な余白を設けるリズムです。
05
サーフェス (角丸 / 影 / 罫線)
sm · 10px
md · 20px
lg · 20px
pill · 9999px
ボーダーは主にアウトラインや区切りとして使用され、通常1px solidダークグリーンで設定されます。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
フルワイドの写真によるヒーローセクションに続き、商品カード用の十分な余白のあるグリッドレイアウトが続く構成です。
07
モーションとインタラクション
250msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
インタラクティブな要素に対する、滑らかなbackground-colorとopacityのトランジション。 · ホバー状態に対するtransformトランジション。
ボタンやリンクなどの要素が、background-color、border-color、またはtransformを軽く変化させます。 · background-colorやtransformの変化による即時フィードバック。
08
コンポーネント
- button 太字でピル（锭剂）形状のボタン。強いアクセントカラーと大文字テキストを使用。
- card 商品カードは大きな画像、軽微な角丸、明確な価格/カテゴリーラベルが特徴です。
- chip N/A
- input N/A
- hero フルブリードの写真背景に、大きく左揃えのセリフ見出しがオーバーレイで配置される。
09
文体と禁止事項
- トーン 自信に満ち、親しみやすく、少し茶目っ気のあるトーン。
- 見出し 大きく、エレガントなセリフ文字のタイポグラフィ。文頭大文字や小文字で使用されることが多い。
- CTA 直接的で大文字、しばしばハイコントラストなピル形状で設定される。
- 暗い背景を使用しない — スクリーンショットでは明るく温かいピーチ色の背景（#F6E6D9）が示されています
- メイン見出しにサンセリフを使用しない — スクリーンショットでは表示用テキストにトランジショナルセリフフォントが使われています
- 控えめな、くすんだアクセントカラーを使用しない — スクリーンショットでは鮮やかなシャルトルーズのアクセント（#D1E030）が示されています
- あらゆる箇所に鋭い四角い角を使用しない — スクリーンショットでは角丸（20px）とピル形状が示されています
- 重要なメッセージに密集した小さなテキストを使用しない — スクリーンショットでは大きく太字のタイポグラフィ（72px）が示されています
- 冰冷なグレー系のニュートラルカラーを使用しない — スクリーンショットではダークオリーブグリーン（#3C422E）のようなアースカラーで温かいトーンが示されています
- 避ける: 冰冷な企業的な言葉遣いは避ける — スクリーンショットでは温かみのある会話的なトーンが示されています
- 避ける: 密集したテキストブロックは避ける — スクリーンショットでは十分な間隔と大きな画像が示されています
- 避ける: ダークモードは避ける — スクリーンショットでは一貫して明るく温かい背景が示されています
- 避ける: 過度に複雑なUIパターンは避ける — スクリーンショットではシンプルで画像主導のレイアウトが示されています
- 避ける: 見出しにサンセリフタイポグラフィは避ける — スクリーンショットでは表示用テキストにセリフ文字が使われています
- 避ける: くすんだ、低コントラストのアクセントは避ける — スクリーンショットでは鮮やかなシャルトルーズのアクセントが示されています
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Grazaは、品質とデザインを重視する消費者をターゲットとする、プレミアムで遊び心のあるオリーブオイルブランドです。サイトは、柔らかなピーチ色（#F6E6D9）とダークオリーブグリーン（#3C422E）を中心にした温かみのあるアースカラーパレットを採用し、CTAには鮮やかなシャルトルーズのアクセント（#D1E030）を使用しています。タイポグラフィは、エレガントなトランジショナルセリフの表示用フォントと、タイプライター風の本文テキストを組み合わせています。重要な禁忌：ダークモードの回避、見出しへのサンセリフの回避、控えめなアクセントの回避、鋭い角の回避、密集したテキストの回避、冰冷なニュートラルカラーの回避。レイアウトは、大型のフルブリード写真と十分な余白に依存し、エディトリアルでプレミアムな雰囲気を演出しています。
en · zh-CN · zh-TW · ja · ko