厳選・オープン・無料
Fly By Jing
大胆で表現力豊か、かつ揺るぎないスパイシーさを纏ったプレミアム四川食品の定番品。
fooddtc
01
デザイン DNA
スパイシー大胆四川風味豊かモダン・ヘリテージ
プレミアムなパッケージとモダンなDTCブランディングで昇華された、鮮やかで大胆な屋台フードマーケットの様子。
02
カラー
#FFCD35Accent
#FFFFFFInk
#E52228BG
#F2F2F2Muted
rgba(0,0,0,1)Line
鮮やかなレッド、イエロー、大胆なブラックを用いた高彩度のスパイスを連想させるカラーパレットで、風味とエネルギーを表現します。
03
タイポグラフィ
grotesque-sans · transitional-serif
- display
88px · 700 - heading
44px · 700 - body
22px · 400
主要ナビゲーションとアクションラベルはすべて大文字にする · レッド背景にはハイコントラストの白文字を使用する · tightened で大胆なタイポグラフィ階層を維持する
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
セクション内に十分な垂直方向のパディング（44px）を確保し、大きなタイポグラフィや写真が息切れしないようにします。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
目立つボーダーは最小限にし、カラーコントラストとタイポグラフィで区切りを表現します。
rgb(204, 204, 204) 0px 0px 2px 2px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えのタイポグラフィまたはサイドバイサイドの画像/テキストレイアウトを持つフル幅ヒーローセクションから、モバイルでは積層カラムに移行します。
07
モーションとインタラクション
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素における滑らかな color と background-color のトランジション · hover/click 時の微細なスケールとトランスフォーム効果
ボタンやリンクにおける色の変化や微細な背景のシフト。 · 微細なトランスフォームや状態変化による即座の視覚的フィードバック。
08
コンポーネント
- button 大胆な大文字のテキストラベル。しばしばピルシェイプ（大きなボーダーラディウス）または矩形の、ハイコントラストカラーの背景を伴います。
- card 十分な内部パディングを持つシンプルなコンテナ。しばしばフード写真を掲示します。
- chip N/A
- input 微細なボーダーを持つシンプルなテキストフィールド。
- hero 没入型のフルブリード背景色、または巨大で大胆、中央揃えまたは左揃えのヘッドラインを伴う大きな商品写真。
09
文体と禁止事項
- トーン 自信に満ち、大胆で、表現力豊か、少し遊び心がある。
- 見出し 短く、パンチが効いていて、命令的、かつ非常にビジュアル。
- CTA 直接的で、アクション志向、常に大文字。
- ヘッドラインに細いまたは軽いフォントウェイトを使用しない — スクリーンショットでは、すべての主要タイトルに太く、bold、700ウェイトの grotesque-sans が使用されている。
- 小さく控えめなタイポグラフィを使用しない — スクリーンショットでは、巨大で tightened な表示タイプ（88px以上）が使用されている。
- ニュートラルでモノクロのパレットに依存しない — スクリーンショットは高彩度のレッド（#E52228）とイエロー（#FFCD35）が主役。
- 表示用にエレガントでハイコントラストのセリフフォントを使用しない — スクリーンショットでは、ヘッドラインに bold な grotesque-sans が使用されている。
- ナビゲーションに標準のケースを使用しない — スクリーンショットでは、メニュー項目とカテゴリリンクにすべて大文字のテキストが使用されている。
- 主要な区切りに細い1pxボーダーを使用しない — スクリーンショットでは、鮮やかなカラーのソリッドブロックに依存している。
- 避ける: 微細または控えめな言葉遣い
- 避ける: 小さく繊細なタイポグラフィ
- 避ける: 控えめなカラーパレット
- 避ける: 複雑で複数の単語からなるヘッドライン
- 避ける: 表示用の筆記体やエレガントなセリフフォント
- 避ける: 大胆なカラーのない大量の空白
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Fly By Jing は、四川のチリクリスプと食品の定番品を扱うプレミアムのダイレクト・トゥ・コンシューマー・ブランドです。そのデザインDNAは、鮮やかなスパイシー・レッド（#E52228）とパンチの効いた高視認性イエロー（#FFCD35）を中心に、揺るぎない大胆な高彩度パレットによって定義されています。タイポグラフィは、巨大な表示ヘッドラインに太くboldな grotesque-sans を、本文に堅牢な transitional-serif を組み合わせています。レイアウトは没入型で、フルブリードのカラーブロックと大きな商品写真を特徴とします。重要な制約：ヘッドラインに細いまたは軽いフォントウェイトを決して使用せず、小さく控えめなタイポグラフィを避け、控えめまたはモノクロのカラーパレットは使用しないこと。ブランドの声は自信に満ち、直接的で表現力豊かであり、主要なアクションとナビゲーションには常に大文字を使用します。
en · zh-CN · zh-TW · ja · ko